| ▲ | Collection of Digital Clock Designs(clocks.dev) | |||||||||||||||||||||||||||||||
| 62 points by levmiseri 3 hours ago | 18 comments | ||||||||||||||||||||||||||||||||
| ▲ | atulvi 2 minutes ago | parent | next [-] | |||||||||||||||||||||||||||||||
Please add this one (my design) https://euclid.tulv.in/ | ||||||||||||||||||||||||||||||||
| ▲ | 72mena an hour ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||
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... | ||||||||||||||||||||||||||||||||
| ▲ | vunderba an hour ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||
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 | ||||||||||||||||||||||||||||||||
| ▲ | toddmorey 28 minutes ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||
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 | ||||||||||||||||||||||||||||||||
| ▲ | skippyfish an hour ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||
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. | ||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||
| ▲ | makeitdouble 2 hours ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||
"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. | ||||||||||||||||||||||||||||||||
| ▲ | throw0101d an hour ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||
I'd really like an analog watch face for the lock screen of my iPhone. | ||||||||||||||||||||||||||||||||
| ▲ | kqr an hour ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||
Not a single 24-hour analogue face? That unexpectedly turned into one of the best reasons I keep carrying my smartwatch. | ||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||
| ▲ | rfmoz 3 hours ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||
What would be the best device to put any of these ones over the desk? And old phone? Maybe an esp32? | ||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||
| ▲ | Theodores 42 minutes ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||
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. | ||||||||||||||||||||||||||||||||
| ▲ | diego_moita 2 hours ago | parent | prev [-] | |||||||||||||||||||||||||||||||
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). | ||||||||||||||||||||||||||||||||