CSS watch faces and analog clocks built with Orbit

A working analog clock face is one of the toughest CSS-only challenges out there. You need an outer ring, sixty tick marks, twelve hour markers, two or three rotating hands, and ideally one or more sub-dials — and they all have to share a single center and rotate independently. With most CSS approaches, you’d reach for SVG and pile on the JavaScript. With Orbit, every part of a watch face is a regular DOM element on a nested orbit, and the rotation math is handled by the framework.

These four examples cover the styles you’ll most often need to build, from a stripped-down analog clock to a feature-loaded smartwatch face.

Examples

Minimalist analog clock face A clean analog clock with hour numbers, two layers of tick marks and two hands. The starter project for any clock build.

Chronograph watch face A main clock face with three sub-dials for seconds, minutes, and hours. The classic 'racing chronograph' look.

Roman numeral clock face An elegant analog clock with Roman numerals (XII, I, II...) replacing Arabic numbers. For dressier UIs and luxury branding.

Smartwatch face with complications A feature-rich smartwatch face with curved alarm/digital text, a date complication, three sub-dials and animated hands.

Which one should I pick?

Looking for…	Pick
A starting point for a clock	Minimalist analog
A racing/sport chronograph look	Chronograph
Dressy or formal styling	Roman numeral
A live working watch face with date and alarm	Smartwatch

All four use the same underlying primitives — bigbang, gravity-spot, nested orbits, vector for tick marks and hands, satellite for hour labels. Once you’ve built one, the others are stylistic variations on the same skeleton.

Related

• vector element reference
• satellite element reference
• Circular timer
• Use case: IoT and hardware UI