Skip to content


Subversion checkout URL

You can clone with
Download ZIP
A HTML5 analog clock experiment, using jQuery and Raphael js.
Branch: master
Pull request Compare This branch is even with jakobwesthoff:master.

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.

README.rst - A HTML5 analog clock experiment

The files in this repository represent the full source of the website

This page has been created to experiment in creating a nice looking analog clock only using HTML5 features.

The Raphael Javascript library as well as jQuery is used to realize the clock with all its nice animation effects.


If you want to use this clock in your own environment you need to load jQuery as well as Raphael js. Finally the file src/clock.js needs to be evaluated. After it has been loaded a Clock object is ready for use. Simple instantiate such an object providing a CSS selector to a container element to position the clock in, followed by an optional options object. For possible objects look into the source code of the clock itself. The names are pretty self-explanatory.

The method moveBack can be used to rewind the clock x hours. This method has mainly been implemented to play a little with the animation capabilities of Raphael.

A simple usage example could look something like this:

var clock = new Clock( "#clock-container" );

Reasons for publishing

I published this source code hoping that somebody might find this stuff useful in some way. I wrote this stuff just for fun and to experiment with some HTML5 features, as well as to play with Raphael js.

Something went wrong with that request. Please try again.