Collection of Digital Clock Designs

Oh I love these! It just reminded me of a small project I had in which I was creating experimental watchfaces using SVGs and JavaScript, this is before the AI boom so I made all of these by hand and, although there's nothing impressive here, I'm proud of them as a designer who learned basic code by myself.

https://watchface.netlify.app/

And I wrote about it here: https://72mena.medium.com/designing-watch-faces-using-svgs-a...

At this point it'd be worth creating an old-school webring [1] for all the HN clock enthusiasts. :)

The clock at: https://clocks.dev/clock/lock-screen

is kind of similar to one of my clocks: the Filling Digit clock [2], which fills the hollow digits with water from the bottom up to represent the seconds in a minute:

Another one that made the rounds here on HN was "Alphabetical Clock" [3] which is pretty amusing.

[1] - https://en.wikipedia.org/wiki/Webring

[2] - https://clocks.specr.net/filling-digits

[3] - https://news.ycombinator.com/item?id=47571401

Please add this one (my design) https://euclid.tulv.in/

This is awesome! I made a Soroban (Japanese abacus) version, but I couldn't add it to the collection since I used css-based animations. Published here: https://soroban-clock.netlify.app

Some of these seem subtly off. For example, on the orange "number field" clock (https://clocks.dev/clock/number-field), you can't distinguish between 12:10 and 10:12. On the "word field" one (https://clocks.dev/clock/word-field), there are "X"es in lieu of unused characters, which makes the emergence of words a lot less mystifying than in the original "word clock" design this is based on. The "temporal exposure" one (https://clocks.dev/clock/temporal-exposure) has weird off-center bands in the blurred area. The "figure hands" one has text sticking out of the drawing area, etc.

"Number field" felt like the best spacial representation of a numeric clock (would need to be 24h to be perfect but that's a small tweak)

There are plenty of them in a more linear style, but the 12 columns design really works well IMHO. It's really easy to roughly guess the time at a glance.

https://clocks.dev/clock/number-field

I'd really like an analog watch face for the lock screen of my iPhone.

For some really quirky/weird/cool physical clocks, the British Museum channel has a few great videos:

Curious Clocks and Watches through time with Oliver Cooke | Curator's Corner S8 E1

https://www.youtube.com/watch?v=ywD5kngMuYM

Nice inspiration for world building, especially Steampunk etc!

This is cool. I'd love to see a collection like this for date representations. Anyone?

Not a single 24-hour analogue face? That unexpectedly turned into one of the best reasons I keep carrying my smartwatch.

What would be the best device to put any of these ones over the desk? And old phone? Maybe an esp32?

I've seen and used some variations of these in my Pebble watch.

They're cool for one day or two. But, in the end, I will always go back to some boring but more information-dense one (with battery charge, weather, heart rate, steps, etc).

I am not sure I want to use the API when it is not that hard to get the hands of a clock going with Javascript. I know I can do the latter, but the former poses a new learning challenge that doesn't guarantee a result.

My current SVG clock is modelled on a wall clock and it has the really small text that can normally found on a clock, for example 'Made in China' and 'Quartz'. I also have a fictional brand name, plus a bezel specified with 'pathLength="60"' and a dash array.

As a design exercise, a standard clock is interesting because you have to remember the stack order of the hands, and, despite looking at clocks many thousands of times, that detail requires a modicum of thought.

I think it is a good start to get a credible wall clock that tells the time at a glance before branching out into 'cool' clocks that put design before telling the time.

I now want to add a drop shadow that changes throughout the day, as if the clock is south facing, in the northern hemisphere, corresponding to my lat/lon.

This would be easy with three js because it could be modelled, along with the entire solar system, with the camera pointed at a 3D modelled clock, however, in SVG filters, could be a while.

Getting the hands to move is the easy bit, all considered. I really don't need another API for that, but I am not in the Svelte ecosystem.