ClocksTell the time?

A simple yet interesting display of clocks. Let's just dive right into it.

This interactive contains a lot of important features that I feel I should mention.

• Lock mode home prevents the overlay from showing if the focus is somewhere else, making it possible to run this clock in the background.
• Everything is 'dynamically drawn', using simple shapes.
• Therefore, everything is also dynamically sized. You can set the clock to whatever rectangle you wish.
• All animation (except 12) is time-based, so it won't matter if any frames are skipped.
• All animation (except 12) is smooth, based on cosine, starting and ending smoothly (most visible in clock 11).
• Clocks 1-2 are based on a simple rotation mechanic, on each position of the clock.
• Clocks 3-4 either fill up or empty depending on the number 'in front', making it consistent and cool to see.
• Clocks 5-11 Are block/pixel based clocks. Each of them uses a mask to show/hide the proper block/pixel with their relative value.
• Clocks 5-11 Also feature some additional animation tricks, like squares fading into a round shape (to smooth out the final image) and time-based offset animation between individual blocks, so they don't all move at the same time.
• Clocks 10-11 Are still based on simple blocks, but use 24 bit masks to show/hide the proper 'pixel'.
• Clock 12 is special and very hard to read. Can you figure it out? It's simpler than you think!
• Visually, it contains of 2 layers, the clock and a bitmap with 3 'filters' (fading to blue, interlace and blur).

There's a lot of interesting programming tricks going on here to make it as small (16k) and dynamic as possible. I could easily make more clocks, but they'd probably all be variants of these ones, so I didn't. 12 felt like a nice number for a collection of clocks.

Update:

I've made it downloadable and configurable. Download here: Clocks V1

By default, it is set to current=3, mode=false (true = 24h, false = 12h) and input=false (clock starts, and you can't change it). Of course a little watermarking had to be done ;)

Remember to change the values in BOTH places. Same as the size. The clock will resize automatically based on the size defined in the HTML.