Convenient Analog Clock With JavaScript And SVG – Uptime

Preview:

Description:

Uptime is a JavaScript-powered analog clock that rotates second/minute/hour dials instead of moving the hands.

How to use it:

1. Add the 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>