A Convenient Analog Clock With JavaScript And SVG | Uptime

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

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>

Convenient Analog Clock With JavaScript And SVG, Uptime Plugin/Github, javascript clock face, svg clock animation


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.

Share