Sunday, 15 February 2009

SVG animated clock

Update 2009-10-23 I went with a flash version for the live site, but will keep my eye on open solutions, such as canvas which looks great

Edit: Still having server problems, now using the staging server.

Since I created the new logo I had an urge to animate the clock, also I've had feedback from a few people who said they expected it to be telling the correct time. So this evening I had some spare time and created this, based on the example at BurningBird. I've tested it on Firefox on Ubuntu, and in Opera (letters around dial were missing, will investigate). I'm using the object tag, so that I could fall back to a static version. Let me know your thoughts.

Sorry, your browser doesn't understand the object tag

Ps. I found SVG really nice to work with. I created the original logo in Inkscape, but I wrote this by hand and it wasn't really that tricky, indeed once you understand the syntax I found it really powerful and preferred to other methods I've tried.


  1. try using .xml as a file extension instead of .svg that should fix your problem at least for every xml aware browser.

  2. The new clock looks good - are there any plans to incorporate it into the website?

    I have just found that your website is mentioned on a list of the Top 20 money websites on the Independent website:

  3. @Matt yes, I'm planning to add it after the next big update. I'll probably just revert to a static version for poor old IE users. Thanks for the Independent link, my spies missed that one. :)


Please feel free to comment on my blog, I read everything. Thanks