Skip to content

tomchen/animated-svg-clock

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

Animated SVG clock

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
  • W3C Validation

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.

Releases

No releases published

Packages

No packages published