At one point in time I found a cool clock graphic and I was looking for it again because it gave a fairly detailed explanation on making a nice looking vector based clock (it was the Codeproject article by Marc Clifton). During my search I found numerous implementations of both SVG and Silverlight clocks and I decided to catalog my findings.
The animated clocks are not necessarily practical to display on web pages, but an interesting exercise and fun as well.
SVG Clocks
by Adobe (unknown date)
A very basic looking clock that uses three <animateTransform type="rotate"> for the hour, minute, and second hands along with a load script to initialize the hands. Note that Adobe has discontinued their SVG Viewer and there are conflicts between SVG and Flash.
by Shelley Powers on November 30, 2007
This is an improvement on a very simple SVG clock by Jason Davis (the original link was not working). This implementation supports displaying time in a different time zone rather than the user’s current time using the statement: setInterval("setClock(calcTime(-6))", 1000);. The code is licensed with LGPL.
I had to download the file directly as it was not shown in FF 3.5. The author has a rather appropriate statement in the article:
Is the clock worth the extra burden on the client's machine? Yes, and no. As a demonstration of what you can do with SVG and simple animation, I think it's a valuable tool. There is a Catch 22 about SVG: we don't use SVG because browser support is incomplete or inefficient; effort to better incorporate SVG is of secondary importance because SVG is little used. The only way to break this cycle is to actually start using the specification, and pushing a bit at the edges while we go about it.
by Alexander Jones & Eric Pierce from Wikipedia on October 14, 2006
This is Wikipedia entry that I thought was animated but it turns out it is not animated. Bummer. It wouldn’t be hard to animate though.
by Kam-Hung Soh
This example uses Javascript at the DOM document level rather than inside the SVG document to rotate the clock hands. It also uses a regular expression to change the rotation angle.
by Tavmjong Bah (unknown date)
This is a really cool example created with Inkscape where every gear is independent and does not interfere with other gears. According to the author, the gears outlines were generated with a Python script by Aaron Spike.
by Stefan Oskamp (unknown date)
A nice looking clock that uses inline SVG along with a Javascript setInterval function to adjust the rotate attributes for the hour, minute, and second hands. The actual background is a 256 x 256 PNG file, rather than a vector based image.
by Damien Dawber (ibuildstuff.net)
This clock is a self generated SVG image using JavaScript and the Raphael JavaScript Vector Library.
by G. Wade Johnson
A clock with a sunburst effect that uses an external script to drive the animation. The author also has a version that runs backwards by simply changing a parameter in the initialization script.
by Steve Pomery
A nice looking clock created using Inkscape. Now at version 2.2.
by Chris W. Johnson on April 29, 2008
An inline base64 encoded SVG clock. The SVG has a version of the Google analytics tracking script "because it's nice to know if people care."
Silverlight Clocks
by Microsoft
A clock sample from the Silverlight 1.0 SDK which uses clock.xaml and clock.js to create the clock. The result is actually very similar to some of the SVG implementations since Silverlight 1.0 did not have codebehind capability.
Version 2.0 of the clock uses codebehind along with a XAP file. There is also a version using IronRuby although the XAP file is significantly larger (11KB vs 1MB!) because it includes several assemblies in the XAP. Then there is the Python version as well which is almost identical to the Ruby version except for the language substitution.
There is also a Microsoft walk-through: Creating a Silverlight Clock by Using Expression Blend or Code, which has a detailed step by step guide for Expression Blend.
by Marc Clifton on April 18, 2004
A very nice looking clock complete with a walkthrough on how to create the look and feel of the clock. Technically this isn’t a Silverlight clock as it is intended for the (now defunct) MyXaml and then improved upon by VG.net. The graphics should be mostly compatible with Silverlight though I haven’t tested it yet.
by Pencho Popadiyn on October 30, 2008
Version 1 introduces the MVP design pattern and the design of the clock using the MVP pattern.
Version 2 - This implementation uses VS2008, .NET 3.5, Silverlight 2 using an MVP pattern. The sample has a very nice looking graphic and improves upon the Clock view.
by Alex Bell on November 7, 2008 (based on SVN timestamps)
A modest clock using Silverlight although the author claims:
Hybrid Clock is, by far, the most sophisticated animated Date/Time visualization control developed for Microsoft Silverlight™ 2.0.
by Michael S. Scherotter on April 24, 2008
This is a gorgeous clock using Silverlight, Expression Blend, and Expression Design. For some reason this is a Silverlight 1.0 applet instead of 2.0 which means it uses some Javascript event triggering for the loading, but it looks great.
Miscellaneous Silverlight Clocks
I was taking way too much time, so here are other implementations without screen shots.
http://www.c-sharpcorner.com/UploadFile/nipuntomar/SilverlightClock08122008132436PM/SilverlightClock.aspx – A good Silverlight clock.
http://pixelplastic.de/2008/01/12/ZoomableUltraHighResolutionSilverlightClock.aspx – A Silverlight clock that allows the user to drag and move the clock. The applet did not work in IE or FF, so I assume it was developed with a pre-release version and has not been updated on the blog article. You can download the source code though. Marcel Hoyer has an older version of the clock as well as other cool Silverlight examples on his blog.
http://weblogs.asp.net/andrewrea/archive/2009/08/12/programmatic-drawing-with-silverlight-2-0-3-0-an-analogue-clock.aspx – A basic looking clock although the clock is mostly generated by code (tick marks, etc.) which is cool. The blog post has a lengthy code listing and downloadable code.
WPF Clocks
by Charles Petzold on April 7, 2006
This is an all XAML clock without any C# or .NET code. It was based on a Microsoft sample and Charles Petzold improved upon that sample by eliminating the C# code, improved the animation technique, and eliminated the repetition in the XAML. The clock graphic is basic and not fancy, but practical.