Analog ClockLoading saved progress…

Analog Clock

Build an analog clock whose hour, minute, and second hands point to the current time. It's two ideas together: the per-second timer (same as a digital clock) and the geometry — converting hours/minutes/seconds into rotation angles and spinning each hand with a CSS/SVG rotate transform.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

A clock face with three rotating hands, updating every second.

Examples

3:00:00 -> hour hand points right (90 deg), minute + second straight up (0 deg)
second = s * 6        (360 / 60)
minute = m * 6 + s * 0.1   (creeps as seconds pass)
hour   = (h % 12) * 30 + m * 0.5

Notes

  • Angles from 12 o'clock. A hand at 0 deg points up; degrees increase clockwise.
  • Sub-steps matter. The hour hand also moves with minutes; the minute hand with seconds.
  • Rotate, don't reposition. Keep each hand drawn straight up and transform="rotate(angle …)".
  • Timer like the digital clock. A 1-second interval refreshes the time; clear it on unmount.
Loading editor…
Loading preview…