Art
Design
Illustration

#coding
#css
#female portrait
#portraits

Painting With Code: UI Engineer Diana Smith Creates Baroque-Inspired Portraits with CSS

With little more than a text editor—and years of experience as a web developer—UI engineer Diana Adrianne Smith creates Flemish and baroque inspired portraits using HTML and CSS, the two primary presentation markup languages designed to display web pages. The portraits fill thousands of lines of code, and Smith has a stringent rule that leaves this former web developer a little flabbergasted: all elements must be typed out by hand. Meaning that she doesn’t rely on libraries, shortcuts, or some kind of visual editor. These images are instead written in part like an essay, with what I can only image is an unreasonable amount of trial and error.

Troubleshooting the complexities of CSS or HTML problems can stymie even a good developer for hours, let alone forming pearl necklaces, hairdos, facial expressions, and lace collars. Via Twitter Smith says she finished her most recent piece over a period of two weekends. The designs are created for viewing in Google’s Chrome browser, but Firefox seems to do a great job too. Your mileage may vary using anything else. Here’s another work from last year titled Pure CSS Francine.

A portion of the 1,968 lines of CSS code Smith wrote to create the portrait above.