Tech by VICE

This Extremely Chill Landscape Was Drawn in Pure Code

"An Evening in Southwold" isn't an image in the traditional sense; it was created using pure CSS, and it's rendered live in your browser, meaning you can tweak it in interesting ways.

by Matthew Gault
Mar 12 2020, 4:09pm

This is just an image file. Image: Ben Evans.

You know what’s nice? Calm landscapes. The faces of children. Still lifes. Beautiful and sedate scenes that put us at ease and, for a brief moment, cease the chattering of our minds in these troubled times. And when those images are made with pure code? It’s a stunning thing to watch be created and a reminder that there is still some chill left in our frenzied future.

Web designer Ben Evans creates realistic representations of everything from oceans to playing cards made from cascading style sheets (CSS). This means that the "drawing" is created by painstakingly coding individual elements in a language that normally just makes websites look good. For example, this extremely chill and stylish boardwalk landscape is made of pure CSS.

Pure CSS drawings—whether they be simple renditions of The Simpsons or elaborate baroque portraits—aren't static image files but code being rendered live. It's somewhat pointless (Evans even refers to a handful of his creations as "the pointless trilogy") but it is extremely awesome.

Evans has created an interactive spider’s web, a telephone box, a spinning playing card, an animated pixel art person taking a walk, and various still lifes purely using CSS. Evans has made his code available on his Codepen where anyone can tweak it to create slightly different results. With a few simple lines changes, it’s possible to radically transform his beach scene. For example, you can change the color of the sun with a few keystrokes.

The CSS coding is cool on its own, but I’m currently taking comfort in Evans’ YouTube channel where I can watch him write the code that creates the art. It’s like watching Bob Ross paint but set to electronic music. My current favorite has him recreating a scene from the 1984 video game Elite.

It’s haunting and comforting, and perfect for these times.

Tagged:
Art
Design
web design
pure css
pure code