Many years ago in the early days of the interweb I developed a live clock for an investor relations website. Back then Flash was the tool of choice to display a dynamic clock, but these days Flash is pretty much dead. After talking about clocks with a client recently I had another look at what’s possible today.
My initial research rediscovered the BBC clock which I remember being launched back in 2010. This used HTML5 canvas to draw the clock. This seemed like a good idea, but the downside of canvas is having to redraw everything each time you want to update it.
SVG, however, stores everything in the DOM so it can be manipulated. It seemed a good idea to me to draw the hour and second hand and then simply rotate it every second. SVG has pretty good browser support these days, and I discovered Adobe’s Snap.svg project late last year. Snap is a new SVG library by the author behind Raphaël. It specifically targets modern web browsers (IE9+) and to me, looks like Adobe’s attempt to introduce a web standards alternative to Flash – which is good by me.
So I used the clock example as a way to learn a bit of Snap and to see how easy the library is to use. To my surprise is was dead easy. I was able to get a basic clock up and running within an hour, and pretty much managed to amend this to stop and start the clock, and set a custom time within another hour.
The Snap docs are a little sparse, they don’t offer a lot more than the API, but most of it is pretty self explanatory. I look forward to reading more about Snap and seeing how it develops.
You can take a look at my SVG clocks example or download the code on GitHub.