CHECK BACK HERE IN SIX MONTHS
ยทUpdated:
·

You know, it's been awhile since the last pure Cool Internet Thing. But this week, Andy Baio managed to surface the brilliant work of UI engineer Diana Smith, who has created three incredible works of art with nothing but lines of code.

Here, for example is 18th century oil painting, hand-coded by Smith. She calls it, 'purecss-francine':

 dianna-adrianne.com

Sure, on the surface it looks nothing more like a slightly-off version of an oil painting. But pop open Chrome's inspect tool and you'll find that there is a lot going on under the hood.

We highly recommend you jump into the actual piece and check out all the various elements used to create this thing, but here is, at least, a visual demonstration.

 via dianna-adrianne.com

How did Smith do this? Well, as she explains in response to Baio's original tweet, HTML allows you to create rectangles, and then a Cascading Style Sheet, or CSS, lets you modify those rectangles. This becomes more clear when you try to load in 'purecss-francine' in older browsers, which Baio was nice enough to demonstrate and share on Twitter:

 

It's maybe not the most efficient way to make an image, but was more of a self-imposed challenged for Smith. In the Github page for her portrait she lays our her rules:

  1. All elements must be typed out by hand
  2. Only Atom text editor and Chrome Developer Tools allowed.
  3. SVG use is limited, and all shapes can only use hand-plotted coordinates and bezier curves โ€“ without the aid of any graphics editor.

In addition to purecss-francine, Smith has two other creations made with the same restrictions. The first is an iconic '30s print advertisement for fruit, called 'purecss-vignes', and the other is a pin-up cigarette add named 'purecss-zigaro'.

Smith has an important caveat for these creations. "Because of the artistic nature of this project I have not concerned myself with cross-browser-compatibility," she writes on her Github page. "So the live preview will most likely look laughable in anything other than chrome."

Because these are just lines of code shared online, other folks are starting to mess with it just to see what they can come up with. There are plenty of examples in that original Baio Twitter thread, but maybe the most functional of which is Jonty Wareing's permuting_francine, which continually randomize's purecss-francine's appearance. It is both horrifying and hypnotizing.

 via jonty.co.uk

Perhaps the most interesting transformation will happen over the days and months, as Chrome is updated and webpage rendering techniques changes, how purecss-francine will fair. Though I would imagine she would fair no worse than the march of time on an actual 18th century oil painting.

<p>Steve Rousseau is the Features Editor at Digg.&nbsp;</p>

Want more stories like this?

Every day we send an email with the top stories from Digg.

Subscribe