Uptime is a JavaScript-powered analog clock that rotates the second/minute/hour dials rather than moving the hands.
Must Read: [Speaking] Create A Simple Analog Clock With jQuery And CSS3 | jsRapClock
Analog Clock With JavaScript And SVG Details
Post Name | SVG Analog Clock JavaScript |
Author Name | izeau |
Category | Date & Time, SVG, Time Clock |
Official Page | Clic Here | Click Here |
Official Website | github.com |
Publish Date | September 25, 2021 |
Last Update | July 3, 2023 |
Download | Link Below |
License | MIT |
How to make use of it:
1. Add uptime.css and uptime.js to the page.
<link rel="stylesheet" href="uptime.css" /> <script src="uptime.js"></script>
2. Create an analog clock from an SVG element.
<svg class="clock" viewBox="0 0 100 100"> <defs> <path id="path" d="M50,12a38,38 0 1,1 0,76a38,38 0 1,1 0,-76" /> </defs> <path class="hand hours" d="M50 25 V50" /> <path class="hand minutes" d="M50 14 V50" /> <path class="hand seconds" d="M50 3 V50" /> <text class="hour-marks" font-size="5" font-family="sans-serif" letter-spacing="-0.4" text-anchor="middle" /> <g class="second-marks" /> <g class="minute-marks" /> </svg>
See Demo And Download

Official Website(izeau): Click Here
This superior jQuery/javascript plugin is developed by izeau. For extra Advanced Usage, please go to the official website.