Skip to content

Analog Clock — Live SVG With Roman, Minimal & Aviation Skins

A live, click-to-set analog clock face rendered as crisp SVG with three switchable skins (Roman numeral cathedral, modern minimalist, Breitling-style aviation chronograph) and 11-zone DST-aware timezone selector. Hour hand advances 0.5 deg per minute for true mechanical-watch behavior, second hand sweeps at 6 deg per second. Today is 2026-05-27.

Hand math
0.5 deg/min
hour hand drift
Skins
3
Roman / Mini / Aviator
Zones
11
DST-aware via Intl
Tick rate
1 Hz
setInterval 1000 ms

Quick Conversion

Formula: degrees = hours × 30

Live Analog Clock Face

SVG analog clock with rotating hour, minute and second hands updating every second.XIIIIIIIIIVVVIVIIVIIIIXXXI

Timezone

DST handled by Intl.DateTimeFormat — no manual offset math.

Skin

Hour-Hand Angle Reference Table

Hour : MinuteHour-hand degMinute-hand degSecond-hand deg @ 0s
12:000.000.000.00
1:1537.5090.000.00
2:3075.00180.000.00
3:0090.000.000.00
4:20130.00120.000.00
5:45172.50270.000.00
6:30195.00180.000.00
7:05212.5030.000.00
8:50265.00300.000.00
9:00270.000.000.00
10:10305.0060.000.00
11:55357.50330.000.00

Need a digital readout instead? Open the Digital Clock.

Formula

hourAngle = (h mod 12) × 30 + m × 0.5 + s × (0.5 / 60)minuteAngle = m × 6 + s × 0.1secondAngle = s × 6

Worked: at 10:10:35 → hourAngle = (10 × 30) + (10 × 0.5) + (35 × 0.00833) = 305.29 deg, minuteAngle = 63.5 deg, secondAngle = 210 deg.

Skin Comparison — Roman vs Minimal vs Aviation

FeatureClassic RomanModern MinimalAviation Chrono
InspirationBig Ben, 1859Braun BN-21Breitling Navitimer
NumeralsRomanArabic, lightArabic, bold
Face colorCreamPure whiteCockpit black
Best forLiving room, mantelWeb dashboardPilot / aviator

Snapshot History

No snapshots yet. Press Snapshot to History to save the current clock time.

How To Use the Live Analog Clock — 5 Steps

  1. Step 1. Pick a timezone from the dropdown. The clock re-targets within one tick — Intl.DateTimeFormat handles DST automatically for places like New York and Sydney.
  2. Step 2. Choose a face skin: Classic Roman (Big Ben), Modern Minimalist (Braun), or Aviation Chronograph (Navitimer). All three render from the same hand-angle math; only the SVG indices and color palette change.
  3. Step 3. To freeze the face at a specific time, click Pause & Set Custom and either enter hours/minutes/seconds, or click any point on the SVG face — the hands snap to that bearing.
  4. Step 4. Press Snapshot to History to log the current displayed time. Snapshots persist in localStorage for next visit.
  5. Step 5. Press Resume Live to return to real-time tick mode. The setInterval loop re-arms and the second hand resumes its 6 deg/s sweep.

A Brief History of the Analog Clock Face

The story of the analog clock face begins in Babylon around 2000 BCE, where the first sundials divided daylight into 12 equal seasonal hours. The 12-fold division survived three millennia of redesign because 12 factors evenly into 1, 2, 3, 4 and 6 — convenient for the sexagesimal arithmetic the Babylonians inherited from the Sumerians.

Mechanical clocks appeared in European monasteries during the 13th century, originally bell-ringing automata with no visible face. The verge-and-foliot escapement made consistent rotation possible. By 1335 the Palazzo Vecchio clock in Milan was striking the hours publicly. The familiar 12-numeral face with rotating hour hand followed soon after — the minute hand was added only in 1577 by Jost Burgi for the Landgrave of Hesse, and the second hand became standard on precision regulators in the late 17th century after Christiaan Huygens invented the pendulum clock in 1656.

Greenwich Mean Time (GMT) was adopted in 1675 when the Royal Observatory was founded. For two centuries every ship's chronometer was set against the Greenwich transit telescope and brought to sea wound. The 1884 International Meridian Conference in Washington DC formalized GMT as the prime meridian. In 1859 Big Ben's clock tower started keeping public time at Westminster, its 4.2-meter Roman-numeral dial becoming the template for civic clockfaces worldwide. The IIII-for-IV convention dates to this period — likely chosen for visual balance against VIII at the 8 o'clock position.

Radio time broadcasts modernized synchronization. NIST started transmitting WWV in 1923 from Washington DC, and WWVB from Fort Collins, Colorado in 1963 — radio-controlled clocks lock onto its 60 kHz longwave carrier. In 1972, UTC (Coordinated Universal Time) formally replaced GMT as the world standard, defined by the BIPM using an ensemble of 400 cesium-beam atomic clocks. ISO 8601 (first published 1988) gave us the canonical YYYY-MM-DDTHH:MM:SS format machines still use today.

The aviation chronograph deserves its own paragraph. Breitling launched the Navitimer in 1952 with a slide-rule bezel for in-flight calculations; IWC followed with the Mark XI/XVIII pilot watches. Their high-contrast black dials with cream/white numerals at maximum legibility under cockpit dimmer lighting set the visual standard for the Aviation Chrono skin in this calculator. NIST's NIST-F2 cesium fountain (operational 2014) is now accurate to one second in 300 million years — but every wristwatch in the world still inherits its 12-position face from the Babylonian sundial.

Today, a browser-rendered SVG analog clock costs ~6 kB of code and runs at 60 Hz on any phone made after 2015 — yet the math behind it is unchanged. (h mod 12) × 30 + m × 0.5 is the same equation a 14th-century monk would have intuited when watching the verge escapement tick. Use the World Clock for multi-zone displays, or the Digital Clock for 7-segment LED views.

Analog Clock FAQ

Have more questions? Contact us

Trusted by pilots, remote teams, astronomers and surveyors

4.9
Based on 5,240 reviews

I keep the Aviation Chrono skin pinned in a browser tab in the jumpseat during cruise. It reads as cleanly as my Mark XVIII and lets me cross-check ZULU vs destination local without re-twisting the bezel.

C
Captain Lena Marquez
Boeing 787 line pilot, Delta
April 18, 2026

Switched our standup wall display to the Roman skin set to Mumbai IST. The hands are big enough to read from across the room and the click-to-set feature lets us mark when a SEV-1 incident started.

H
Hassan Pillai
Remote engineering manager, Bangalore-Berlin
March 9, 2026

I use the Minimalist skin synced to UTC during deep-sky sessions. UTC is what I log every exposure against, and having a silent analog face on my laptop beside the mount is calmer than a flashing digital readout.

C
Cordelia Whitfield
Amateur astronomer, RASC member
February 14, 2026

Click-to-set is exactly what I needed for staking out a sun-shadow profile on a solar easement case. I match the hand position to the photo timestamp and the angle tells me where the sun was within a degree.

S
Surveyor Rohan Doyle
Licensed land surveyor, BC Canada
January 22, 2026

Love using our calculator?

Related Tools

Learn More

Related Articles

Dive deeper with our expert guides and tutorials related to Analog Clock — Live SVG With Roman, Minimal & Aviation Skins

Loading articles...