Scalable Vector Graphics


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.

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.

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.

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.

3-D SVG Digital Clock

A truly amazing SVG digital clock, but unlike most digital clocks, this is three-dimensional with a black background and a change of colour on the reverse side of the number display. Changes were made to the font face, size and colour of the flashing date. This graphics file is credited to:

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 rears 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 a 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.Adguard Logo

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 Nostrum Victoriam Primam, meaning “O Lord, keep safe our Queen Victoria the First”. The SVG animated images should open and work well on the latest versions of the four major browsers and the Android default browser.

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.

Tower Clock Cleaning

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:

Back to top

Recent Posts