DEV Community

Dipto Kumar Paul
Dipto Kumar Paul

Posted on

3 1 1

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!

Gen AI apps are built with MongoDB Atlas

Gen AI apps are built with MongoDB Atlas

MongoDB Atlas is the developer-friendly database for building, scaling, and running gen AI & LLM apps—no separate vector DB needed. Enjoy native vector search, 115+ regions, and flexible document modeling. Build AI faster, all in one place.

Start Free

👋 Kindness is contagious

Discover fresh viewpoints in this insightful post, supported by our vibrant DEV Community. Every developer’s experience matters—add your thoughts and help us grow together.

A simple “thank you” can uplift the author and spark new discussions—leave yours below!

On DEV, knowledge-sharing connects us and drives innovation. Found this useful? A quick note of appreciation makes a real impact.

Okay