What's the difference between live mode and custom mode?

Live mode reads your device's current time every second and redraws the hour, minute, and second hands to match, so the clock ticks in real time. Custom mode freezes the clock at an hour and minute you type in yourself, with the second hand hidden since no seconds value is entered.

What file formats can I download?

Both. Download SVG saves the clock face as a scalable vector file with crisp lines at any size, and Download PNG rasterizes that same SVG to a PNG image, useful when a tool or platform doesn't accept SVG.

Does the live clock keep running if I leave the tab open?

Yes, it re-reads the system clock once a second for as long as the page stays open and live mode is selected, so the hands keep advancing without a manual refresh.

Why is there no second hand in custom mode?

Custom mode only accepts an hour and a minute, there's no seconds field, so the clock is drawn with seconds treated as zero and the second hand simply isn't rendered for that static time.

Analog Clock Drawer - Live or Custom Time SVG Clock Face

Overview

Introduction

Sometimes you just need a clean analog clock face image, for a slideshow, a worksheet, a design mockup, or a website graphic, without opening an illustration program.

This tool draws one for you as a scalable SVG, either following your device's clock live or frozen at whatever hour and minute you specify.

What Is Draw an Analog Clock?

An analog clock face renderer that draws hour, minute, and (in live mode) second hands positioned by the same angle math a real clock uses.

It offers two modes: a live clock that updates every second to match your system time, and a custom clock that renders a single hour and minute you choose.

How Draw an Analog Clock Works

In live mode, the current hour, minute, and second are read from your device once a second and converted into hand angles: each hand's angle is degrees clockwise from 12 o'clock, computed from how far through its own cycle that unit is.

In custom mode, the hour and minute you enter are converted the same way, with seconds fixed at zero, so the second hand is omitted from the drawing entirely.

The resulting angles are handed to an SVG clock-face component that rotates each hand's line to the correct position; the finished SVG can be exported directly, or rasterized to PNG through an in-browser canvas conversion.

When To Use Draw an Analog Clock

Use it when you need a quick analog clock graphic for a document, presentation, or design without opening dedicated design software.

It's also handy for double-checking how a specific time looks on an analog face, or for generating a still image of a particular hour and minute for a lesson on reading clocks.

Often used alongside Calculate Clock Hand Angle, Set Clock Hand Angle and Generate Random Clock Times.

Features

Advantages

Produces a clean, scalable SVG that stays crisp at any size, plus a one-click PNG export for tools that need a raster image.
Live mode needs no input at all, it just mirrors your system clock automatically.
Custom mode lets you freeze the clock at any hour and minute for a specific illustration.

Limitations

Live mode relies on your device's system clock and time zone; it doesn't let you preview a different time zone's current time.
Custom mode only accepts whole hours (0-23) and minutes (0-59), there's no seconds input for a custom static time.

Examples

Custom time

Input

Custom mode, hour 10, minute 10

Output

An analog clock face with the hour hand near 10 and the minute hand near 2, no second hand shown

10:10 is a classic display time because the hour and minute hands form a symmetric, open angle.

Best Practices & Notes

Best Practices

Switch to custom mode before exporting if you want a reproducible, specific time in your image, live mode will keep changing between the moment you look at it and the moment you click download.
Prefer the SVG download when the destination supports vector images, it stays sharp when resized; use PNG only when SVG isn't accepted.

Developer Notes

Hand angles come from `getClockHandAngles(hours, minutes, seconds)` in the shared clock-geometry module, which normalizes the hour to a 0-11 range and computes each hand as a fraction of its cycle times 360 degrees; live mode re-runs this every second via a `setInterval` tied to a `tick` counter, and export uses shared `downloadSvgElement`/`downloadSvgAsPng` helpers that serialize the rendered `<svg>` node directly from the DOM.

Draw an Analog Clock Use Cases

Generating a clock face image for a presentation slide or worksheet
Illustrating a specific time (like 10:10) for design or teaching material
Adding a live-updating clock graphic to a personal dashboard export

Common Mistakes

Downloading from live mode expecting a specific time, the hands will reflect whatever moment the download button was clicked, not a time you chose.
Entering an hour above 23 or a minute above 59 in custom mode, which falls outside the accepted range for those fields.

Tips

Use the Clock Hand Angle Calculator first if you want to know the exact degree values behind a given time before drawing it.
For a time expressed as hand angles instead of a clock reading, Clock Hand Angle Setter converts angles back into an hour and minute you can then plug into custom mode here.

Draw an Analog Clock