SVG Clock

This web component allows you to include an animated analog clock in any website, regardless of framework. Just pass it a prepared SVG and it will animate it. You can use one of the provided clocks or prepare your own SVG.

Usage

First, pick a prepared SVG clock or create your own.

Then set the URL in the src attribute, which will load it asynchronously (which is recommended since it allows the SVG file to be cached by the browser):

<svg-clock src="..."></svg-clock>

Alternatively, you can inline the SVG:

<svg-clock>
  <svg>...</svg>
</svg-clock>

Performance

svg-clock uses the visibilitychange event and document.hidden as well as IntersectionObserver (if supported) to pause the clock while it is hidden and restart it once it's visible.

Browser support

This component is built with Stencil and inherits the same browser support (Chrome 60+, Safari 10.1+, Firefox 63+, Edge 16+, and IE11).

But because IE11 and Edge 16 (but not Edge 17+) don't allow CSS transforms on SVG elements we use a fallback using the SVG transform origin attribute which needs to be defined (in the data-transform-origin attribute of each clock hand).

Using this component

See Stencil's documentation.

Preparing an SVG

There are a couple things you need to do to prepare an SVG clock:

• All hands need to be in the 12 o'clock position (pointing straight up).
• Ensure the hand elements have IDs of hours (or hours-24), minutes and optionally seconds.
  • hours will take 12 hours to rotate 360°, hours-24 will take 24 hours.
• Ensure those elements have no transform property since it would interfere with the animation.
• Add the correct CSS transform-origin definition as inline style (e.g. <g id="minutes" style="transform-origin: 50% 50%">)
• For IE11 and Edge 16 support, determine the correct SVG transform origin (for the transform property) and set it as the data-transform-origin attribute.

If you don't know how to find the correct transform-origin (CSS or SVG) we recommend initializing the clock so all hands point straight down (6:30:30 with disabled precision). Then adjust the origin (using browser DevTools) until the hands are in the correct position.

Example to test all hands at once:

<svg-clock disable-precision time="6:30:30" src="..."></svg-clock>

Contributing

To start contributing, clone this repo to a new directory:

git clone https://github.com/tricki/svg-clock.git svg-clock
cd svg-clock

and run:

npm install
npm start

To build the component for production, run:

npm run build

To run the tests, run:

npm test