DEV Community

Dipto Kumar Paul
Dipto Kumar Paul

Posted on

Analog Clock - Dark

A modern analog clock with a smooth neumorphic design. Built using pure HTML, CSS3, and vanilla JavaScript. Includes real-time rotating hour, minute, and second hands with elegant shadows and a soft 3D effect. Perfect for UI inspiration or learning clock animations.

Top comments (1)

Collapse
 
kiponos profile image
Devops Kiponos • Edited

Very nice and calm colours.
And comparing your design to a clock I’ve made once, I see how “noisy” mine is - Almost brutal! :) but my goal is to make the time bold as to help developers stay in focus on time spent.

See here: kiponos.io

I used React for the animation and direct drawing on canvas api.

Clicking the clock toggle it’s sizes.

I also plan to add reminders but not sure how to make that intuitive and quick.

I liked how you designed it in realistic style and elegantly matched it to dark mode! Thank you for sharing!