Even simple animated analogue clocks are more of a challenge to code than simple two-dimensional digital clocks. The first two examples of analogue clocks shown below were created using Flash™. They have the advantage that most older browsers will display them without problems. Older browsers such as Internet Explorer 8 and earlier will not display SVG images. However, for those browsers that do display SVG, you may click on the link in the text below the SVG clock and it should open a large display on a separate page to illustrate the scalability. Even the more simple creations will look better, when increased in size. Small details, such as fine lines will display with rough edges on screens with lower resolutions, but are sharp and clear when enlarged.
NOTICE: Adobe® stopped support of the Flash™ Player after 31 December, 2020 and blocked use of the Flash™ Player after 12 January, 2021. Flash images below, which were developed for displaying in the Adobe® Flash™ Player can no longer be viewed using the Flash™ plug-in that was installed in browsers. We were delighted to find that it is possible, to open them using Ruffle, a Flash™ Player emulator written in Rust. We installed Ruffle on this site and it runs on browsers through the use of Wasm (WebAssembly). There are no safety issues such as occurred with Flash. We recommend removing, or disabling the Flash™ plug-in before attempting to view the Flash™ images.
Simple Flash™ Analogue Clock
This is a simple clean-looking Flash™ analogue clock with a transparent background and black hour marks and hands. Shadows are rendered from the hour marks and the hands. If you right click you may select to view it full screen.
Adobe SVG Analogue Clock
This is a simple rendition of an SVG analogue clock, which was first published by Adobe in 2001 as an SVG file and released into the public domain. The original had 1 pixel wide bezel and a red second hand. It has been modified here to show all black details and a wider bezel.
Industrial Master Clock
This realistic 12-Hour Telefonbau & Normalzeit Master Clock was created by Kurt Grigg on 1 February, 2016 using CSS and SVG without images. A master clock is used to control other industrial or railway slave clocks.
La Crosse SVG Analogue Clock
This is an elegant, beautifully rendered example of an SVG analogue clock with realistic fine details, an off-white face and black bezel with a shadow. This work has been released into the public domain by its author, Richard Fussenegger.
Multi-dial Flash™ Analogue Clock
This multi-dial Flash™ analogue clock was included to show the complexity that can be achieved, with month, date and day indicators. Shadows are rendered from the the hands. If you right click you may select to view it full screen.
Coloured SVG Analogue Clock
This SVG analogue clock is similar to the one from Adobe, but has a transparent face without numbers. Many variations can be played on this theme. Here colours were added to the bezel and the hands, which are now rounded at the ends.
CSS Analogue Clock
This clock, named Sweet Analog Clock, was created with CSS by Monkey Raptor. The bezel shape changes with a mouse-over and there is an audio for the tick. The clock is in the original size with the background modified to suit this page.
Receding SVG Analogue Clock
The above receding SVG analogue clock created in 2009 by Wade Johnson with ECMAScript is interesting, because it demonstrates how the code can be used to change the perspective, as if the clock is sloping away from the viewer.
Black Analogue Clock
The black clock below was forked from a pen on CodePen named Clock created by Chandan Choudhary on 4 August, 2020. We set it to display the current time and changed the positions. It initially has a 3D aspect, but if the cursor is moved over it, it will rotate about its horizontal centreline and display the full clock face.
Apple Watch Clock
The Apple watch design below, coded by Malik Dellidj, could not be reduced from the original size and displays beautifully with the original black background. It was included because of its elegant rendition.
Analogue Ring Clock
The attractive analogue clock below was created 3 September, 2020 on CodePen by Bennet Feely and originally named Conic Clock. The code for the outer ring was changed because it did not seem to produce a ring corresponding to any specific elapsed time period. Without numbers or other markings, the time is not immediately apparent. The rings, starting at the centre, indicate the elapse of a second, seconds, minutes, hours of a 24-hour period and days elapsed in the year.
Geared SVG Analogue Clock
This is a beautifully crafted analogue clock showing the hours, minutes and seconds. It has a transparent background, with amazing details of the gearing. As those who have designed gearing will know, the design of meshing gears is complicated, but this image accomplishes this and displays the time in an interesting way. A dark grey border was added. An even more elaborate SVG graphics date and time creation, which is rather too big to be squeezed onto this page may be seen by clicking this link: SVG Month, Day, Hour, Minute and Second Display. These graphics files were created by the master SVG craftsman Tavmjong Bah © 2007.
24-hour Analogue Clocks
Any page about analogue clocks would be incomplete without some 24-hour analogue clocks. Although on a digital clock with a 24-hour display the exact time of day will be immediately clear, on an analogue display it can be confusing, because we tend to look the the position of the hands that we are used to seeing on a 12-hour clock, where we can easily tell the time to a minute even without any numbers.
Simple 24-hour SVG Analogue Clock
We adapted this 24-hour SVG analogue clock from the Adobe 12-hour clock shown above and put the zero hour position at the top. The minute and second hands follow a conventional 12-hour clock rotation with 60 minutes and 60 seconds respectively per rotation of the hands. The inner markings for the hours have been added separately from the minute and five-minute marks to make it easier to read the time.
Single-hand 24-hour SVG Analogue Clock
This 24-hour SVG analogue clock only has one hand and at first glance looks more like a compass than a clock. If displayed at larger sizes, the simple clear markings make it possible to estimate the time to an accuracy of about one minute, from the hour hand alone.
Day and Night 24-hour SVG Analogue Clock
This 24 hour SVG analogue clock with a black bezel, the styled hour and minute hands and the symbols drawn with SVG. The white top half of the face represents daylight (06:00 h – 18:00 h) and the grey part of the lower half represents night (18:00 h – 06:00 h), which would be more or less true year-round near to the equator. This clock was created by John Vandervort.
Minimalist 24-hour JavaScript Analogue Clock
This is a 24-hour analogue clock showing hours, minutes and seconds. The design is best described as minimalist. The original design, as created by Kurt Grigg, had a black background and grey numbers, which were not appropriate for this page, although very attractive on a black page. This clock may not display, if ad-blocker programmes or apps are being used. In the case of Adguard, you may see the logo (below) in the bottom right-hand corner of this page. If you click on this logo and select accordingly, you can stop the blocking of this image.
SVG Replica of the London Tower Clock
For those who like really big clocks, it is worth looking at the magnum opus of Jim Blackler. Unfortunately his web site has closed, but we had saved the files and you can still see his creation by clicking on the following links: a close-up view, or a more distant view of the Tower Clock created with a mixture of raster images, SVG coding and scripts. If you scroll down to the bottom of the more distant image, you will see the gilded inscription in Latin: DOMINE SALVAM FAC REGINAM NOSTRAM VICTORIAM PRIMAM, meaning “O Lord, keep safe our Queen Victoria the First”. The SVG animated images should open and display well on the latest versions of the four major browsers.
During the week of 18th August, 2014, the four clock faces on this 96 metre high tower were cleaned for the first time in four years. An unusual task needing special care. Each face is made up of 312 pieces of opal glass. During the cleaning period, the hands of the clock were stopped at 12 o’clock.
This well known Clock Tower at the Palace of Westminster in London, was renamed the Elizabeth Tower as a tribute to Queen Elizabeth II in her Diamond Jubilee year of 2012. The clock has a 7 metre diameter dial and chimes the hour with the striking of the Great Bell, fondly known as Big Ben, which weighs 13.76 tonnes. The hammer used weighs 200 kg and Big Ben’s sound, for more than 150 years has been heard for a distance of up to 8 km. Sadly there is no accompanying sound with the animated graphics. However, the best known bell in the world, which was first heard over radio the via a BBC radio broadcast at midnight on December 31st, 1923 and has been heard on most days ever since, can be heard striking 12 o’clock on a New Year’s eve by clicking the player button.
A recording by BBC World Service of Big Ben at midnight on New Year’s Eve: