Clocks are an interesting subject for exploring computer graphics. The clock graphics displayed below were made using many different approaches to coding including HTML markup language, CSS stylesheet language, Flash™, SVG XML-based vector image format, JavaScript programming language and other scripts. Some cannot easily be reduced in size and some may have issues to display in certain browsers. Many of the clock graphics created by others have been modified and credit has been given to the authors for the original design.
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 was possible, to open them using Ruffle, a Flash™ Player emulator written in Rust. We installed Ruffle on this site in January 2021 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. We were still experiencing some issues, such as with the 12-hour digital clock design with a glow effect by Carlos Yanez created August 2009, using ActionScript 3. The image opened, but had no animation. Although newer versions of Ruffle were tried periodically, we had no success until 14 October 2023, when the latest Ruffle version enabled the animation of the file.
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.
A realistic version of a 24-hour digital flip clock, below, was made with Flash™ using images. If you right click you may select to view it full screen.
A less realistic version of a 24-hour digital flip clock below, was made with CSS by Goker, 2018. It displays well with an audio of the flip.
The 24-Hour Digital Clock below has a simple format with the digits rotating upwards. It was designed to display full screen and we have modified it to display on this page.The clock was created by Felix de Montis in September 2017, using CSS and JavaScript.
The 12-Hour digital Design Clock III below was created by Marcos Oliveira on July 10, 2016 using CSS and JavaScript with beautifully shaped digits. We modified the code to suit this page and added a colon between minutes and seconds and named it the Digital Designer Clock
The 24-hour clock below has a digital display with an analogue display of the numbers filling with water. The clock was published in September, 2016 by Jack Oliver.
The Spotlight-cast Shadow Clock below is an interesting new approach to displaying a digital clock with a shadow. It was created by Angela Galliat on 20 August, 2020 using CSS and JavaScript. The cursor will move the spotlight and change the shadow. We made some small changes to adapt to the page.
The Month, Day, Hour, Minute and Second – Date and Time image below was recoded from an old Flash™ file with a size of only 18 KB. The colours were set in the Flash™ file and a border added. It is included because it has a clear format that allows the easy reading of the month, day, hour, minute and second of the current date and time. If you right click you may select to view it full screen
Below is an LED version of a 12-hour digital clock design with a glow effect by Carlos Yanez in August 2009, using ActionScript 3 and Flash™. After installing Ruffle, the image opened without animation, but we left the file in place as an example of how it was handled. We were delighted when it was finally able to display the animation after installing a Ruffle version released on 14 October 2023. If you right click you may select to view it full screen, where the background glow effect is more visible.
3D Digital Clock
This blue swinging clock was created by Cassidy on CodePen on 15 September, 2018 and called 3D Clock.
In the quest for clocks, we came across many interesting formats and some are only timers. The timer below on the left uses SMIL script to make a morphing timer in SVG by Cmglee in January. 2015. Clicking on the link will fill open a new screen filled with the expanded graphics. Some such as the hex clock on the right was created by Jacopo Colò in June, 2014 and originally designed with a background filling the screen, which we have modified to show here. 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 on the Transapex Webcom website.
The clock on the left below, is entitled the Typographic Clock. It was made with HTML/Pug, CSS/Sass and JavaScript, October 5, 2017 by Peter Norton, and has an ingenious display of numbers to form the hours and minutes digits and simultaneously indicate the seconds. The 3D Digital Clock on the right below has an LCD-like display, which can be moved with a mouseover. We changed the width and height of the elements of the numbers to make them bolder. It was made by David Khourshid with RxJS, Babel, CSS and SCSS and published February 7, 2017.
The Slide Clock below on the left was made by Jacob Foster with HTML, CSS and JavaScript and published July 21, 2017. The Cube Clock on the right, can also be moved by the cursor, enhancing the three-dimensional effect. It was made with HTML, CSS and JavaScript by Stix and published January 22, 2016.
Round 12-hour Digital Clock
This 12 hour digital clock shows hours, minutes and seconds on a rotating rings and was created by Vineeth, 24 July, 2017.
Round 24-hour Digital Clock
This 24 hour digital clock also shows hours, minutes and seconds on rotating concentric rings with a lens-like display and was created by Vicio Bonura, 9 May, 2016.
CSS Rotary Clock
This 12 hour digital clock shows hours, minutes and seconds is also on rotating rings as on the above images. It was created on Codepen by Jake Albaugh on 19 April, 2015 and updated on 23 April, 2015 and appears to have been inspired by an actual limited edition functioning watch known as the Academia Mathematical manufactured by the DeWitt Manufacture Haute Horlogerie in Geneva, Switzerland. The watch has a casing made of 18 carat rose gold with a diameter of 42.5 mm and is available at an eye-watering price. This clock-sized animated image is exquisite, with transparency allowing the view of the six levels of rings carrying the hour’s, minute’s and second’s digits at different levels. However, the original code did not incude displaying the current time. We forked the pen several years ago, in order to try to add the code to make it a working clock showing the current time … still a work in progress, so the time shown is only the elapsed time after opening this page.
LED Digital Clock
The attractive simulated LED digital clock below was created using CSS and JavaScript by Wei-Hsiung Chen. It has been reduced to 80% 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.
3-D CSS Digital Clock
The CSS digital clock was made with HTML canvas, CSS and JavaScript by Gerard Ferrandez and published July 31, 2015. It has an interesting revolving 3-D effect.
3-D SVG Digital Clock
The SVG digital clock has a three-dimensional format like the above CSS digital clock. However, the display is more liquid with the black background and a surprising change of colour on the reverse side of the display. Changes were made to the font face, size and colour of the flashing date. This graphics file probably dates back to 2010 and is credited to www.bogotobogo.com. If we had to choose an SVG favourite on this page of digital clocks, this would be it!
Cistercian Numerical Clock
This clock displays the date and time in mediaeval Cistercian numerals, that were developed by the Cistercian Catholic monastic order, at about the time that Hindu-Arabic numerals were introduced to northwestern Europe in the 13th century. Numbers are based on a horizontal or vertical stave, with the placement of the digit indicating its place (units, tens, hundreds or thousands), and these form compounds on a single stave to indicate more complex numbers. The Cistercian system indicated numbers from 1 to 9999. Any number in this range can be written as a single cypher, so they are very compact.
The cyphers’ geometrical format makes them eminently suitable to code with SVG, but after seeing several attempts to create clocks with these cyphers, we found that many did not separate the hours and minutes. However, we finally found this clock on CodePen created by Tom on 4 February, 2021 and updated on February, 2021. Although attracted by this numerical system, we had felt that displaying a clock that was difficult to read, or decipher would cause frustration. However, after studying the way that the cyphers are written for a few minutes and then practicing reading them, we found it much easier than expected and decided that this clock is worthy of display. The image displays from left to right: the year, month, date, hour, minute and seconds. You can watch the right-hand seconds’ cypher cycle through the digits and numbers from 0 (plain stave) to 59.
For a brief summary of how the Cistercian cyphers are written, please click on the following link: Cistercian Numerical Cyphers and for a detailed description and history: Wikipedia Cistercian numerals