imranmajeed473 / animated-svg-clock

Animated SVG clock 🕒

Animated SVG clock

Click the clock to show a github.io-hosted SVG file where JavaScript is executed to show your current time

Technical details

• CSS-based animation
• Use JavaScript to set the current time
• 

GitHub usage

JavaScript code of an SVG in <img> will not be executed, the SMIL or CSS-based animation is fine, therefore, what you see on GitHub README.md page is an animated clock starting from 00:00, it basically counts the time you have stayed on the page.

Even if you open the GitHub.com-hosted (not GitHub.io) raw SVG file (here it is) directly in your browser, the JavaScript code will still not be executed due to "Content Security Policy: sandbox" header.

In order to execute the JavaScript code and correctly show the current time, you can:

• open a USERNAME.github.io-hosted SVG image (here is one) directly in your browser
• or download the SVG file, then open it directly in your browser
• or embed it directly (not via <img>) in your website, in USERNAME.github.io or any website that does not have strict Content Security Policy header and does not sanitize custom JavaScript code in SVG

Use it (Markdown, can't set width and height):

![Clock](https://tomchen.github.io/animated-svg-clock/clock.svg "Clock")

Use it (HTML, with width and height set):

<img src="https://tomchen.github.io/animated-svg-clock/clock.svg" alt="Clock" title="Clock" height="200px" width="200px">

Design

Yes it's highly similar to a Swiss railway clock whose design IS COPYRIGHTED.

Credits

By Tom Chen

Inspired by SVG animation: by HackaLittleBit (https://commons.wikimedia.org/wiki/File:Swiss_railway_clock_1.svg), CC-by-sa 4.0, whose original SVG is: by Jahoe (https://commons.wikimedia.org/wiki/File:Swiss_railway_clock.svg), CC-by-sa 3.0 & GFDL

(The current SVG code has significate code change comparing to HackaLittleBit's work, and is using the permissive MIT license)

License

MIT license for the code, but Swiss railway clock DESIGN IS COPYRIGHTED.