ludi.de ∙ Digital Clock

“Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun. Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet whose ape-descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea.” (Douglas Adams)

And as you can see, I still think digital watches are a pretty nice idea.

This page shows a web app for designing digital clocks. You can then download the clock as an SVG file and use it freely in a browser or on your website. Or you can use it as a template for building physical digital clocks.

The time display of the watch is provided by 7-segment displays, whereby the segment shape, its geometry and colors as well as the separator symbols between hours, minutes and seconds are adjustable.

Here are some examples you can use as a template:

Display

Today, the 24-hour clock is the most common time display for digital clocks worldwide. Unlike the 12-hour clock, it does not require the additional indication of AM and PM.

The decimal clock, also known as the 10-hour clock or revolutionary clock, originated during the French Revolution and divided the day into 10 hours, the hour into 100 minutes, and the minute into 100 seconds. It had only a short lifespan; after just a few years, it disappeared, and France reverted to the 24-hour day. Later attempts to introduce the decimal system for timekeeping also failed.

12-hour clock

24-hour clock

decimal clock

show seconds

Geometry

This section determines the geometry of the clock. You can choose between four different segment shapes:

symmetrical segments

flattened corners

sharp corners

rounded corners

Furthermore, the ratio of digit height to digit width, the display angle, the digit spacing, the segment spacing, and the segment width can be determined. The last three variables are percentages and are specified relative to the digit width. Please note that large values for segment width and segment spacing can lead to oversaturation. In this case, reduce the corresponding value slightly.

height/width

display angle

digit distance

segment distance

segment width

Delimiter

A colon or decimal point can optionally be used as a separator between hours, minutes, and seconds. This can be displayed in three variations and can be set to flash every second.

without delimiter

colon

decimal point

round dots

rounded points

square points

flashing separator

Colors

For the two segment states "on" and "off", you can adjust the colors and their opacity here. Reduced opacity is useful if the digital clock is placed on a colored background and you want the background color to show through. With an opacity of 0, the corresponding segment states are invisible.

segment "on"

opacity 100

segment "off"

opacity 0

Using

You can embed this clock in an HTML page or display it directly in a browser. Since all the settings you made above are written to an SVG file during the download, it's very easy to use.


  <html>
    <head>
    </head>
    </body>
      <object data="digitalclock.svg" type="image/svg+xml">
      </object>
    </body>
  </html>

Please note that the clock is embedded using an object tag in HTML. The obvious image tag won't work because JavaScript execution is blocked there for security reasons.

Those familiar with the JavaScript programming language can also change the clock's properties directly in the SVG source code. To do this, first load any version of the clock and then open it in a text editor. At the top of the SVG source code, you'll find the JavaScript object options, which you can copy to the clipboard along with your settings from above and paste, or you can manually change the corresponding values.

Download

This software is licensed under the GNU General Public License (GPL), which includes the right to run, study, modify, and distribute the software.

If you want to physically build this clock, that is, print, mill, or laser-cut it, then you can download the appropriate "pattern" here. You will then receive a black and white vector graphic (SVG) with all the numerals and separators, which you can import into your CAD program as a template.