A clock made of clocks
A hundred and forty-four little analogue clocks. Their hands swing into position to draw the time, then swing again a second later. No images, no libraries, just a bit of geometry and some CSS.
your local time
How it works
Each clock is one pixel. Two hands, and between them they can draw a straight line, a corner, or nothing at all, which turns out to be everything you need to write a number. A dial with nothing to draw parks its hands at half past seven: a diagonal, the one direction no digit ever uses, so your eye separates the numbers from the background without being told.
The clever bit is in how the digits are described. The obvious approach, drawing each number as a stroke the way you would with a pen, falls over where a number branches, like the waist of an 8 meeting its side. Three lines meet there and a clock only has two hands. Draw the outline of the stroke instead and the problem disappears: an outline never branches, so every square needs exactly two line ends, which is exactly what you have. The whole alphabet then fits in a grid four clocks wide and six tall.
The nice part is the movement. Hands only ever turn forwards, so a hand that needs to travel from almost-midnight round to just-past takes the short way on rather than unwinding backwards. It never rewinds.
The two halves run at different speeds, which was not the original plan. The seconds have to finish moving inside one second or the next tick interrupts them mid-swing and they never arrive, so they hurry. The hours and minutes change rarely enough to take their time, and they sweep across the board left to right rather than all lurching at once. That stagger is one line of code and most of the reason the thing feels alive.
Why build this?
Because the things a business actually needs from a website (that it loads quickly, that it works on a phone, that it does not fall over) are hard to show off. This is the same skills, pointed at something you can watch. It weighs a few kilobytes and uses no libraries at all.
With thanks to Moises Lopes, whose open-source version of this idea supplied the four-by-six digit shapes, used here under the MIT licence. The rest is ours.