Pro tip: I thought pure CSS drawings were fake, then I built a clock with 1 div and 40 lines

Finley Hernandez · 2026-10-10T07:05:03.914093+00:00

I always figured those CSS art posts on here were cheating somehow, like maybe someone snuck in an SVG or a base64 image. So two weeks ago I sat down in my kitchen in Milwaukee and tried to build a simple analog clock with nothing but divs and keyframes. It took 40 lines of CSS and one div for each hand, plus a border-radius trick for the face, and it ticked along just fine at 60 frames per second in Chrome. The part that blew my mind was using box-shadow with 12 spread layers to make the hour marks, no extra markup needed. I showed it to my cousin who does front end work and she just shrugged, so maybe I am late to this. What is the smallest number of elements you have pulled off for something like this?

The Design Community Hub

Loading…

Pro tip: I thought pure CSS drawings were fake, then I built a clock with 1 div and 40 lines | CSS Art Club - The Design Community Hub