⏰ CSS-only Accurate, Settable, Animated Analog Clock

Mate Marschalko
13 min readMay 21, 2021

Let’s build a fully-functioning, settable analog clock with CSS Custom Properties and the calc() function. Next week, we will convert it to a digital clock .. all this with no JavaScript 😱

All you need is HTML and CSS

This is an example project from my book, All you need is HTML and CSS:

There are many other examples in the book pushing the limits of HTML and CSS including interactive carousels, accordions, calculating, counting, advanced input validation, state management, dismissible modal windows, and reacting to mouse and keyboard inputs. There’s even a fully working star rating widget!

--

--

Mate Marschalko
Mate Marschalko

Written by Mate Marschalko

Senior Creative Developer, Generative AI, Electronics with over 15 years experience | JavaScript, HTML, CSS