Please note that SVG images on this page may not be displayed on older versions of browsers especially Internet Explorer 9 and earlier. They should be displayed properly on the latest versions of Chrome, Edge, Firefox, Opera, Iron and Vivaldi on desktops running Windows 7 or later operating systems. Unlike IE 9 and previous Internet Explorer browsers, IE 10, IE 11 can handle the text shadows, but still cannot run the animation in some of the SVG analogue clocks and do not support HTML Ogg Vorbis audio, but we have added an MP3 file for the audio below. The new Edge version for Android will run the animated SVG and play HTML Ogg Vorbis audio.  If there are layout problems with some graphics, try refreshing the browser. Note that since this site has implemented HTTPS, Safari 5.1.7 on Windows and browsers on mobile devices below Android version 4.4 cannot access this  website.

There are also problems with images in smaller viewports. Mobile phones, using recent versions of iOS and Android operating systems should be able display most of the graphics in the landscape orientation and using the desktop setting may help. However, they will still have problems, especially with the layout and the larger images. This page will continue to be a work in progress and, as browser issues were investigated, we added a page comparing browsers, using this SVG page for testing. From the comparisons you will see that this SVG page is best viewed on the larger screens of computers with Chrome, Edge, Firefox, Opera, Iron or Vivaldi browsers on desktops. You can test your computer browsers’ CSS3 and HTML5 capabilities by clicking on the links on the page More Web Tools. Note that in areas displaying animated images the cursor may not interact as expected wth the screen. To scroll the page in these areas, move the cursor to the side off the page.

We had added some Adobe^® Flash™ animated images, which display text, vector graphics, and raster graphics to provide animations. Flash™ with its vector-based code was ahead of its time and provided a method to create animations with a very small footprint. Unfortunately there were security issues that forced its demise. 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. These animated Flash™ images may appear as start buttons and run when clicked.

Many of the images on this page are examples of scalable vector graphics, usually referred to as SVGs, which are included in specifications (see footnote 5) issued by the W3C (World Wide Web Consortium). The official icon is shown above using an SVG image. These 2-D graphics range from very simple mono-colour icons to extremely complex multicoloured interactive graphics presentations. It is based on the use of strokes and fills, whose positions and colours can be defined purely by coding using XML (Extensible Markup Language). Simple shapes and geometric patterns can be created by coding mathematically defined vectors, but software such as the free open-source Inkscape and Adobe Illustrator® may be used to create images and add many effects, which can be saved in the SVG format. While Adobe Illustrator® has some similar features to Adobe Photoshop®, it has many fundamental differences. The latter is used used to create and manipulate images, which are made up of pixels displayed on a raster. Such pictures have a certain resolution and, if increased in size, it will become evident that they have limits as to how big they can be enlarged as the image loses sharpness. By contrast, an SVG image can be blown up to virtually any size without losing sharpness. Thus the image, such as the one shown above can fill a mobile phone screen; but could be shown on a screen thousands of times larger with the same sharpness. To get an idea of the efficiency of the use of SVG, the original single logo image file of this logo which has been coded to display the above sizes with variations from 175 x 175 pixels to 20 x 20 pixels is less than 5 kB in size. If you click on the first image, it should open an image that will fill your largest screen. It is not within our scope to discuss the technology of creating or displaying SVG images, but we feel that they are worthy of inclusion to whet the appetite of anyone, who uses modern multimedia devices, to look at this technology.

Clocks

Clocks are an interesting subject for exploring computer graphics. Using javascript and a font for the numbers, we can create a very simple 24-hour clock as seen in the first example with a file size of only 973 bytes. Styling, by changing the font, background, colours, and adding a border to make a 12-hour clock, results in a file of 1,146 bytes. With more coding a 12-24 hour clock, using a radio button to select the mode, was created by Sandeep Gangadharan, © 2003, with a file size of only 1,937 bytes.

The animation of SVG images opens some interesting possibilities and clocks have been a subject of much attention. The realistic representation of a flip clock, below on the left, was made using Flash™ with images, but the clock on the right was created by Hardik Sondagar to show UTC (Coordinated Universal Time) using SVG. The original had a white font face and we darkened the font face and the empty parts of the rings, to give more contrast on our page.

Although this page was originally intended to display SVG images, in the quest for clocks, we came across many interesting displays in other formats. Some require modification to be compatible with this page and are included as time permits. The attractive simulated LED digital clock below on the left was created using CSS and javascript by Wei-Hsiung Chen. It was to reduced to 40% of its original size and the colour changed slightly to match that of a specific LED colour viz. Super Orange with a wavelength of 620 nm, obtained when using Indium Gallium Aluminium Phosphide LED dye; and the border was given a matching colour.

The clock on the right was created by Jacopo Colò and originally designed with the background filling the screen. It is interesting because the background changes colour every second by using the time to generate an HTML colour using the hexadecimal notation. Because there are no letters and not all numbers are used in the double-digit values, bright colours are not generated. For more explanation regarding the hexadecimal notation of colours, see the More Web Tools page.

Animated analogue clocks are more of a challenge than simple two-dimensional digital clocks, although the three-dimensional digital clock illustrated below is in a class of its own. 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. As mentioned above, older browsers such as Internet Explorer 8 and earlier will not display SVG images. However, for those that do, you may click on the link in the text below the 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 crisp and clear when enlarged. When Internet Explorer, Safari and other browsers stumble in displaying SVG images and certain types of styling, there are sometimes alternative methods of coding and ways around these problems, which present interesting challenges for web developers. As a last resort for static images, it can be arranged to use a fall-back image in another form

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: www.bogotobogo.com.

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.

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 work well on the latest versions of the four major browsers and the Android default browser.

During the week of 18^th 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.

Starting in 2017, the Elizabeth Tower, home to the Great Clock underwent a major programme of restoration work. Work to the clock dials included repairing the glass and metalwork. The clock hands were removed for maintenance and restoration work and were be replaced with temporary ones.

After this work started, since noon on Monday 21 August, 2017 the bell’s hourly chimes were to remained paused until 2021 with the only exceptions on New Years and Remembrance Sundays. After what finally amounted to 5 years of restoration work, the bells of the Elizabeth Tower returned to regular service after 4 days of tests prior to Remembrance Sunday on the 13th November 2022. Visitors to Westminster were then able to hear Big Ben striking the hour, with the quarter bells sounding every 15 minutes.

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