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.
Quick Conversion
Formula: degrees = hours × 30
Live Analog Clock Face
Timezone
DST handled by Intl.DateTimeFormat — no manual offset math.
Skin
Hour-Hand Angle Reference Table
| Hour : Minute | Hour-hand deg | Minute-hand deg | Second-hand deg @ 0s |
|---|---|---|---|
| 12:00 | 0.00 | 0.00 | 0.00 |
| 1:15 | 37.50 | 90.00 | 0.00 |
| 2:30 | 75.00 | 180.00 | 0.00 |
| 3:00 | 90.00 | 0.00 | 0.00 |
| 4:20 | 130.00 | 120.00 | 0.00 |
| 5:45 | 172.50 | 270.00 | 0.00 |
| 6:30 | 195.00 | 180.00 | 0.00 |
| 7:05 | 212.50 | 30.00 | 0.00 |
| 8:50 | 265.00 | 300.00 | 0.00 |
| 9:00 | 270.00 | 0.00 | 0.00 |
| 10:10 | 305.00 | 60.00 | 0.00 |
| 11:55 | 357.50 | 330.00 | 0.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 × 6Worked: 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
| Feature | Classic Roman | Modern Minimal | Aviation Chrono |
|---|---|---|---|
| Inspiration | Big Ben, 1859 | Braun BN-21 | Breitling Navitimer |
| Numerals | Roman | Arabic, light | Arabic, bold |
| Face color | Cream | Pure white | Cockpit black |
| Best for | Living room, mantel | Web dashboard | Pilot / aviator |
Snapshot History
How To Use the Live Analog Clock — 5 Steps
- 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.
- 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.
- 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.
- Step 4. Press Snapshot to History to log the current displayed time. Snapshots persist in localStorage for next visit.
- 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.
Trusted by pilots, remote teams, astronomers and surveyors
“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.”
“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.”
“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.”
“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.”
Love using our calculator?
Related Tools
Related Articles
Dive deeper with our expert guides and tutorials related to Analog Clock — Live SVG With Roman, Minimal & Aviation Skins