About

An analog clock face communicates time through the angular displacement of rotating hands. The hour hand completes one full revolution (360°) every 12 hours, the minute hand every 60 minutes, and the second hand every 60 seconds. Misconfigured hand lengths or poorly chosen numeral spacing creates ambiguity at oblique viewing angles, particularly for wall-mounted clocks where parallax error compounds with distance. This tool renders a real-time clock on an HTML Canvas element, computing hand angles from the system clock using standard trigonometric projection. You control geometry (hand width, length ratios), aesthetics (face color, border, markers, numeral format), and behavior (sweep vs. tick second hand). Exported images are rasterized at up to 4× resolution for print-quality output.

Limitations: the rendered clock reflects your device’s system time and inherits its accuracy. NTP drift on consumer hardware is typically < 50ms, which is invisible on an analog dial. The export captures a single static frame. Pro tip: set the time to 10:10 before exporting, as this classic position frames the logo area and creates a visually balanced composition used by watchmakers worldwide.

Formulas

Each clock hand angle is computed from the current time components. The coordinate system places 0° at the 12 o’clock position and increases clockwise.

θ_h = ((h mod 12) + m60) × 30°

θ_m = (m + s60) × 6°

θ_s = s × 6°

For smooth sweep mode, the second value includes the millisecond fraction: s_smooth = s + ms1000. Canvas coordinates use sin and cos with a −π/2 offset to align 0° to the top:

x = cx + r ⋅ cos(θ − π2)

y = cy + r ⋅ sin(θ − π2)

Where cx, cy is the center, r is the hand length, and θ is the angle in radians. Hand widths are expressed as fractions of the clock radius to maintain proportional scaling across export resolutions.

Reference Data

Preset	Face	Border	Hour Hand	Minute Hand	Second Hand	Numerals	Markers	Style Note
Classic	#FFFFF0	#2C2C2C	#1A1A1A	#1A1A1A	#C0392B	Arabic	Lines	Traditional wall clock
Minimal	#FFFFFF	#E0E0E0	#333333	#333333	#999999	None	Dots	Scandinavian design
Vintage	#FDF5E6	#8B7355	#5C4033	#5C4033	#B8860B	Roman	Lines	Antique brass tone
Bauhaus	#F5F5F5	#000000	#000000	#000000	#FF4500	Arabic	None	Geometric modernism
Pastel	#FFF0F5	#D4A5A5	#7C9CBF	#7C9CBF	#F4A261	Arabic	Dots	Soft muted palette
Neon	#1A1A2E	#E94560	#0F3460	#16213E	#E94560	Arabic	Lines	Dark face, vivid hands
Swiss Railway	#FFFFFF	#333333	#1A1A1A	#1A1A1A	#EE2A24	Arabic	Lines	Mondaine-inspired
Retro	#FAE3D9	#BB8A52	#6B4226	#6B4226	#D35400	Arabic	Dots	1970s warm tones
Elegant	#F8F8FF	#4A4A4A	#2F2F2F	#2F2F2F	#C8A951	Roman	Lines	Dress watch aesthetic
Marine	#F0F8FF	#003366	#003366	#003366	#CC0000	Arabic	Lines	Nautical instrument
Hand angle reference
Hour hand		0.5°/min			30° per hour + 0.5° per minute
Minute hand		6°/min			360° ÷ 60 = 6° per minute
Second hand		6°/sec			360° ÷ 60 = 6° per second
12-hour cycle		360°			Hour hand full rotation
60-min cycle		360°			Minute hand full rotation

Frequently Asked Questions

Toggle the "Sweep" mode in the controls. In tick mode the second hand advances in discrete 6° steps each second, mimicking quartz movements. Sweep mode interpolates using the millisecond component of Date.now(), producing continuous motion similar to mechanical watch movements running at high beat rates (typically 28,800 vibrations/hour).

Use the 4× multiplier. A 400px on-screen clock becomes 1600×1600px, yielding approximately 300 DPI at 13.5 cm print size. For larger prints (A4 full-bleed), consider exporting at 4× from a maximized clock size. The canvas renders vectors mathematically, so all lines remain crisp at any multiplier.

The clock reads your device's system clock via the JavaScript Date object. Accuracy depends on your OS time synchronization (NTP). Typical consumer device drift is under 50 ms, which is imperceptible on an analog dial where 1° of the second hand represents approximately 167 ms.

The Roman numeral preset uses IIII at the 4-o'clock position, following the traditional watchmaking convention known as the 'clockmaker's four.' This practice dates to 14th-century tower clocks and provides better visual symmetry opposite the VIII.

The export renders only the clock circle and its contents. The area outside the dial is transparent in the PNG output, allowing you to composite the clock onto any background in image editing software. If you need a solid background, change the face color to your desired fill.

Hand lengths are stored as ratios of the clock radius: hour hand at 0.50, minute hand at 0.70, second hand at 0.80 by default. When exporting at higher multipliers, these ratios are applied to the scaled radius, maintaining visual consistency. Hand widths follow the same proportional system.