SVG Clock Gallery

A comment on the SVG Developers list got me started thinking about clocks in SVG. The following are a few examples that I worked out.

If the in-line version doesn't display in your browser, try clicking on the name of the clock for a standalone version of the file.

Let's start with the basics. Except for some minor effort to make the face interesting, this clock doesn't have much going for it. The script that drives it is pretty generic and could drive most forms of analog clock.

Squashed Analog Clock

One of the cool things about working with SVG is the easy way you can transform graphical elements. In this case, I scaled the first analog clock different amounts in the x and y directions. I was looking for a squeezing effect, but instead it seems to travel into the distance.

Counter-Clock

With a realtively minor change to the driving script, the clock can run the other direction. Maybe if the first clock makers had been in the southern hemisphere, all clocks would be this way.

Digital Clocks

Color Bands

This is the first clock I've designed that is not pretty ordinary. Most people would find this design hard to read. But, I would be willing to bet that any old electronics person would find this design hard to resist.

Roman Digital

I woke up one morning with the idea of a digital clock with Roman numerals. This has a couple of problems, including no representation for zero (which makes times on the hour look a little funny). Also the length of the number changes drastically as time goes on. (8:38 is the longest time.)

Update: New background effect after much playing with the filter element.