About

An analog clock face maps continuous time onto circular geometry. The hour hand completes one full revolution (360°) every 12 hours, the minute hand every 60 minutes, and the second hand every 60 seconds. Errors in hand positioning compound visually: a 1° offset on the minute hand corresponds to 10 seconds of drift. This implementation uses sub-second interpolation from Date.getMilliseconds to produce smooth, continuous motion rather than discrete ticking. All trigonometric calculations use radians with offset −π⁄2 so that angle zero points to 12 o'clock.

The clock renders on an HTML Canvas at device-pixel-ratio resolution to prevent aliasing on high-DPI screens. Hand lengths follow horological convention: hour hand at 50% of radius, minute at 75%, second at 85%. Note: this tool reads your system clock. If your OS time is wrong, the displayed time will be wrong. It does not sync to NTP.

Formulas

Each clock hand angle θ is computed from the current time components. The offset −π2 rotates the coordinate system so 0 radians points upward (12 o'clock) instead of rightward.

θ_s = 2π ⋅ (s + ms1000)60 − π2

θ_m = 2π ⋅ (m + s60)60 − π2

θ_h = 2π ⋅ ((h mod 12) + m60)12 − π2

The endpoint of each hand at radius r from center (cx, cy):

x = cx + r ⋅ cos(θ)

y = cy + r ⋅ sin(θ)

Where s = seconds, ms = milliseconds, m = minutes, h = hours (24-hour), r = hand length, cx/cy = canvas center coordinates.

Reference Data

Hand	Full Rotation	Degrees per Unit	Radians per Unit	Typical Length (% of radius)	Typical Width
Hour	12 h	0.5°/min	0.00873 rad/min	50%	Thick
Minute	60 min	6°/min	0.10472 rad/min	75%	Medium
Second	60 s	6°/s	0.10472 rad/s	85%	Thin
Hour Marks	-	30° apart	π⁄6 apart	-	-
Minute Marks	-	6° apart	π⁄30 apart	-	-
Hour Hand (per hour)	-	30°/h	0.5236 rad/h	-	-
Minute Hand (per second)	-	0.1°/s	0.001745 rad/s	-	-
Second Hand (per ms)	-	0.006°/ms	0.000105 rad/ms	-	-
12-hour overlap count	12 h	Hour and minute hands overlap 11 times (not 12) every 12 hours
Overlap interval	-	65 min 27.27 s between overlaps
DPI Scaling	-	devicePixelRatio multiplied on canvas dimensions for crisp rendering
Frame Budget (60fps)	-	16.67 ms per frame maximum

Frequently Asked Questions

The clock interpolates milliseconds into the second hand angle calculation using (s + ms/1000). This produces continuous sweep motion at 60fps rather than discrete 1-second jumps. Mechanical clocks with high beat rates (28,800 vph) appear smooth for the same reason - the steps are too small to see.

The canvas internal resolution is multiplied by window.devicePixelRatio (typically 2 on Retina displays). The CSS size stays the same, but the pixel buffer is 2× or 3× larger, preventing blurry lines. Without this correction, a 400px clock on a 2× display renders at effectively 200px logical resolution.

The hour hand angle includes a fractional component from minutes: (h mod 12) + m/60. At 3:30, the hour hand points halfway between 3 and 4 (exactly 105°). A clock that snaps the hour hand to whole hours is incorrect - real analog clocks show continuous hour hand movement.

This clock reads your system's Date object. Accuracy depends entirely on your OS clock synchronization. Modern systems sync via NTP with typical drift under 50ms. The rendering loop itself adds no measurable delay - requestAnimationFrame callbacks execute within the 16.67ms frame budget.

The minute hand laps the hour hand once every 65 minutes 27.27 seconds (exactly 720/11 minutes). Starting at 12:00:00, the 11th overlap occurs at approximately 10:54:33 - the next overlap is back at 12:00:00, beginning a new cycle. The overlap at 12 is shared between cycles.