On the web
Every one of these drawings is a single HTML div
A Single Div is Lynn Fisher's CSS art project where each illustration is one div element, built from stacked box-shadows and layered gradients. No cheating.
A wizard leans over a crystal ball, candles lit, a raven on his hat. It is a complete little illustration, shadows and highlights and all, and it is drawn with exactly one HTML element.
A Single Div, by Lynn Fisher, is a CSS
drawing project with one rule that sounds impossible until you see it:
every picture is a single <div>. No child elements, no SVG, no canvas.
Fisher started it in May 2014 with a small camera and has kept adding to
it for more than a decade. The archive page covering 2014 to 2019 alone
holds 144 drawings; I counted. And every October brings divtober, her
one-drawing-a-day challenge with a public prompt list on the site.
Three elements hiding in one
The way you draw a wizard with one element is by abusing the parts of
CSS that let a single box paint more than a single box, and Fisher wrote
the technique up herself
on Mozilla Hacks
in September 2014. The starting move: one div is secretly three
canvases, because CSS grants every element a :before and an :after
pseudo-element. "With one div in the HTML, I actually have three
elements to work with," as she puts it there.
Each of those three layers then gets multiplied. A stack of box-shadow
values turns into dozens of offset colored rectangles, each shadow
acting like one shape. Layered background gradients, linear and radial,
fill in shading and depth, stopped hard where she wants a crisp edge and
feathered where light falls off. It is the same language you use to put
a soft grey glow under a button, pushed until it becomes a portrait.
The tooling lives in the project's repo on GitHub, 1.8k stars and 415 commits of drawings: she writes them in Stylus, a CSS preprocessor, wrapped in Pug templates that generate the pages. The README is upfront that an SVG would be the practical choice for illustration. Practical was never the assignment.
Try one yourself
Her Mozilla Hacks piece doubles as the tutorial, building up a small camera drawing property by property, and the repo holds the source for every finished piece, so you can pick a favorite and read exactly which shadow is the raven.
The reason this matters beyond the party trick is that it is a stress test of a language most of us only ever use gently. Fisher rebuilds her own site from an empty CSS file most years, the footer currently reads v. XIX, and the muscle behind those redesigns is exactly this: knowing what a single rule can be talked into doing.
Constraint as the whole creative engine has a sibling sighting here: a full animation from one line of JavaScript.
More of the browser used as a canvas: summer, rendered as an entire website.
Next up
The paperclip game is still the best AI lecture ever written