skillful coder diana smith creates baroque paintings with freehand CSS and HTML

UI engineer diana smith creates baroque-inspired portraits using HTML and CSS. using these two hypertext markup languages — jargon for the coding that makes up what you see displayed on web browsers — smith creates every single element by hand. 

image courtesy of @modestmeows

smith‘s portraits, titled ‘pure CSS francine‘ and ‘pure CSS lace‘, are not images that can be saved to file but pure code created without libraries, shortcuts, or the use of another visual editor. that means that the portraits can look very different when viewed in different browsers – because of the different code-reading capabilities of each program. 

loaded in firefox
image courtesy of @triptych

creating images with CSS involves writing code that will display an object in a browser and then manipulate its various properties, like size or color for example. what makes smith’s process so painstakingly time-consuming is that you can’t see what you are making, which means smith has to use trial-and-error.

image courtesy of diana smith

the portrait titled ‘pure CSS lace’, which features a woman wearing a black dress complete with pearls and a lace colla, is made up of 1,968 lines of CSS code. a piece like this can take smith up to two weeks to create. the outcome is a pure CSS image made up of code that can be endlessly tweaked.

in an old version of opera
image courtesy of @dz

project info

designer: diana smith
title: pure CSS lace / pure CSS francine