├── LICENSE
├── README.md
└── clock.svg


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Tom Chen
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">
 2 | Animated SVG clock
 3 | </h1>
 4 | 
 5 | <p align="center">
 6 | <a href="https://tomchen.github.io/animated-svg-clock/clock.svg" title="Click to view the Clock with current time set">
 7 | <img src="https://github.com/tomchen/animated-svg-clock/raw/master/clock.svg" alt="Clock"><br>
 8 | Click the clock to show a github.io-hosted SVG file where JavaScript is executed to show your current time
 9 | </a>
10 | </p>
11 | 
12 | ## Technical details
13 | 
14 | * CSS-based animation
15 | * Use JavaScript to set the current time
16 | * [![W3C Validation](https://img.shields.io/w3c-validation/default?label=W3C%20SVG%201.1&preset=HTML%2C%20SVG%201.1%2C%20MathML%203.0&targetUrl=https%3A%2F%2Fvalidator.w3.org%2F)](https://validator.w3.org/check?uri=https%3A%2F%2Fraw.githubusercontent.com%2Ftomchen%2Fanimated-svg-clock%2Fmaster%2Fclock.svg&charset=%28detect+automatically%29&doctype=Inline&group=0)
17 | 
18 | ## GitHub usage
19 | 
20 | JavaScript code of an SVG in `<img>` will not be executed, the [SMIL](https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_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.
21 | 
22 | Even if you open the GitHub.com-hosted (not GitHub.io) raw SVG file ([here it is](https://raw.githubusercontent.com/tomchen/animated-svg-clock/master/clock.svg)) directly in your browser, the JavaScript code will still not be executed due to "[Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP): sandbox" header.
23 | 
24 | In order to execute the JavaScript code and correctly show the current time, you can:
25 | 
26 | * open a USERNAME.github.io-hosted SVG image ([here is one](https://tomchen.github.io/animated-svg-clock/clock.svg)) directly in your browser
27 | * or download the SVG file, then open it directly in your browser
28 | * 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
29 | 
30 | Use it (Markdown, can't set width and height):
31 | 
32 | ```markdown
33 | ![Clock](https://tomchen.github.io/animated-svg-clock/clock.svg "Clock")
34 | ```
35 | 
36 | Use it (HTML, with width and height set):
37 | 
38 | ```html
39 | <img src="https://tomchen.github.io/animated-svg-clock/clock.svg" alt="Clock" title="Clock" height="200px" width="200px">
40 | ```
41 | 
42 | ## Design
43 | 
44 | Yes it's highly similar to a [Swiss railway clock](https://en.wikipedia.org/wiki/Swiss_railway_clock) whose design [IS COPYRIGHTED](https://www.businessinsider.fr/us/apple-paid-21-million-for-swiss-railways-clock-2012-11).
45 | 
46 | ## Credits
47 | 
48 | By Tom Chen
49 | 
50 | 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
51 | 
52 | (The current SVG code has significate code change comparing to HackaLittleBit's work, and is using the permissive MIT license)
53 | 
54 | ## License
55 | 
56 | MIT license for the code, but Swiss railway clock **DESIGN IS COPYRIGHTED**.
57 | 


--------------------------------------------------------------------------------
/clock.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="utf-8"?>
  2 | <svg viewBox="-1136 -1136 2272 2272" width="600" height="600" 
  3 |   xmlns="http://www.w3.org/2000/svg" 
  4 |   xmlns:xlink="http://www.w3.org/1999/xlink">
  5 |   <!-- MIT license by Tom CHEN https://github.com/tomchen/animated-svg-clock -->
  6 |   <title>Clock</title>
  7 |   <style type="text/css">
  8 |   #face-outline {
  9 |     fill: #fff;
 10 |     stroke: #d3d3d3;
 11 |     stroke-width: 64;
 12 |   }
 13 |   #face-use,
 14 |   #hand-h-use,
 15 |   #hand-m-use {
 16 |     fill: #000;
 17 |     stroke: none;
 18 |   }
 19 |   #hand-s-use {
 20 |     fill: #bd2420;
 21 |     stroke: none;
 22 |   }
 23 |   #center-dot {
 24 |     fill: #fff;
 25 |     stroke: none;
 26 |   }
 27 |   @keyframes rotation {
 28 |     from {
 29 |       -ms-transform: rotate(0deg);
 30 |       -moz-transform: rotate(0deg);
 31 |       -webkit-transform: rotate(0deg);
 32 |       -o-transform: rotate(0deg);
 33 |       transform: rotate(0deg);
 34 |     }
 35 |     to {
 36 |       -ms-transform: rotate(360deg);
 37 |       -moz-transform: rotate(360deg);
 38 |       -webkit-transform: rotate(360deg);
 39 |       -o-transform: rotate(360deg);
 40 |       transform: rotate(360deg);
 41 |     }
 42 |   }
 43 |   #hand-h-use {
 44 |     -ms-animation: rotation 43200s linear infinite;
 45 |     -moz-animation: rotation 43200s linear infinite;
 46 |     -webkit-animation: rotation 43200s linear infinite;
 47 |     -o-animation: rotation 43200s linear infinite;
 48 |     animation: rotation 43200s linear infinite;
 49 |   }
 50 |   #hand-m-use {
 51 |     -ms-animation: rotation 3600s linear infinite;
 52 |     -moz-animation: rotation 3600s linear infinite;
 53 |     -webkit-animation: rotation 3600s linear infinite;
 54 |     -o-animation: rotation 3600s linear infinite;
 55 |     animation: rotation 3600s linear infinite;
 56 |   }
 57 |   #hand-s-use {
 58 |     -ms-animation: rotation 60s linear infinite;
 59 |     -moz-animation: rotation 60s linear infinite;
 60 |     -webkit-animation: rotation 60s linear infinite;
 61 |     -o-animation: rotation 60s linear infinite;
 62 |     animation: rotation 60s linear infinite;
 63 |   }
 64 |   </style>
 65 |   <defs>
 66 |     <path id="mark-5min" d="M -40,-1000 l 80,0 0,245 -80,0 z" />
 67 |     <path id="mark-min" d="M -15,-1000 l 30,0 0,80  -30,0 z" />
 68 |     <path id="hand-h" d="M -50,-650 l 100,0 10,890 -120,0 z" />
 69 |     <path id="hand-m" d="M -40,-950 l 80,0 10,1200 -100,0 z" />
 70 |     <g id="hand-s">
 71 |       <path d="M -20,-550 l 30,0
 72 |                      7,890 -30,0 z" />
 73 |       <path d="M   0,-750 a 105,105 0 0 1 0,210
 74 |                           a 105,105 0 0 1 0,-210 z" />
 75 |     </g>
 76 |     <g id="face-30d">
 77 |       <use xlink:href="#mark-5min" />
 78 |       <use xlink:href="#mark-min" transform="rotate(06)" />
 79 |       <use xlink:href="#mark-min" transform="rotate(12)" />
 80 |       <use xlink:href="#mark-min" transform="rotate(18)" />
 81 |       <use xlink:href="#mark-min" transform="rotate(24)" />
 82 |     </g>
 83 |     <g id="face-90d">
 84 |       <use xlink:href="#face-30d" />
 85 |       <use xlink:href="#face-30d" transform="rotate(30)" />
 86 |       <use xlink:href="#face-30d" transform="rotate(60)" />
 87 |     </g>
 88 |     <g id="face">
 89 |       <use xlink:href="#face-90d" />
 90 |       <use xlink:href="#face-90d" transform="rotate(90)" />
 91 |       <use xlink:href="#face-90d" transform="rotate(180)" />
 92 |       <use xlink:href="#face-90d" transform="rotate(270)" />
 93 |     </g>
 94 |   </defs>
 95 |   <circle id="face-outline" r="1104" />
 96 |   <use xlink:href="#face" id="face-use" />
 97 |   <use xlink:href="#hand-h" id="hand-h-use" />
 98 |   <use xlink:href="#hand-m" id="hand-m-use" />
 99 |   <use xlink:href="#hand-s" id="hand-s-use" />
100 |   <circle id="center-dot" r="5" />
101 |   <script type="text/javascript">
102 |   function setTime(h, m, s) {
103 |     document.getElementById("hand-h").setAttribute("transform", "rotate(" + ((h >= 12 ? h - 12 : h) * 30 + m / 2 + s / 120) + ")");
104 |     document.getElementById("hand-m").setAttribute("transform", "rotate(" + (m * 6 + s / 10) + ")");
105 |     document.getElementById("hand-s").setAttribute("transform", "rotate(" + (s * 6) + ")");
106 |   }
107 |   var date = new Date();
108 |   setTime(date.getHours(), date.getMinutes(), date.getSeconds());
109 |   </script>
110 | </svg>
111 | 


--------------------------------------------------------------------------------