Convenient Analog Clock With JavaScript And SVG – Uptime

Category: Date & Time | September 23, 2021
Author:izeau
Views Total:505 views
Official Page:Go to website
Last Update:September 23, 2021
License:MIT

Preview:

Convenient Analog Clock With JavaScript And SVG – Uptime

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>

You Might Be Interested In:


Leave a Reply