Created
April 29, 2019 14:28
-
-
Save JeremiePat/49849ac68c890adc401cb8d40e42c3b5 to your computer and use it in GitHub Desktop.
SVG Clock (Digital) with CSS transition
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <title>Digital Clock</title> | |
| <style> | |
| html, body { | |
| height: 100%; | |
| } | |
| body { | |
| padding: 0; | |
| margin: 0; | |
| display: flex; | |
| } | |
| #h1 { transform: translate(0,0) } | |
| #h2 { transform: translate( 4px,0) } | |
| #m1 { transform: translate(10px,0) } | |
| #m2 { transform: translate(14px,0) } | |
| #s1 { transform: translate(20px,0) } | |
| #s2 { transform: translate(24px,0) } | |
| .zero use:nth-of-type(1) { transform: translate(1px, 1px) } | |
| .zero use:nth-of-type(2) { transform: translate(2px, 1px) } | |
| .zero use:nth-of-type(3) { transform: translate(3px, 1px) } | |
| .zero use:nth-of-type(4) { transform: translate(1px, 2px) } | |
| .zero use:nth-of-type(5) { transform: translate(3px, 2px) } | |
| .zero use:nth-of-type(6) { transform: translate(1px, 3px) } | |
| .zero use:nth-of-type(7) { transform: translate(1px, 3px) } | |
| .zero use:nth-of-type(8) { transform: translate(3px, 3px) } | |
| .zero use:nth-of-type(9) { transform: translate(1px, 4px) } | |
| .zero use:nth-of-type(10){ transform: translate(3px, 4px) } | |
| .zero use:nth-of-type(11){ transform: translate(1px, 5px) } | |
| .zero use:nth-of-type(12){ transform: translate(2px, 5px) } | |
| .zero use:nth-of-type(13){ transform: translate(3px, 5px) } | |
| .one use:nth-of-type(1) { transform: translate(3px, 5px) } | |
| .one use:nth-of-type(2) { transform: translate(3px, 5px) } | |
| .one use:nth-of-type(3) { transform: translate(3px, 5px) } | |
| .one use:nth-of-type(4) { transform: translate(3px, 4px) } | |
| .one use:nth-of-type(5) { transform: translate(3px, 4px) } | |
| .one use:nth-of-type(6) { transform: translate(3px, 3px) } | |
| .one use:nth-of-type(7) { transform: translate(3px, 3px) } | |
| .one use:nth-of-type(8) { transform: translate(3px, 3px) } | |
| .one use:nth-of-type(9) { transform: translate(3px, 2px) } | |
| .one use:nth-of-type(10){ transform: translate(3px, 2px) } | |
| .one use:nth-of-type(11){ transform: translate(3px, 1px) } | |
| .one use:nth-of-type(12){ transform: translate(3px, 1px) } | |
| .one use:nth-of-type(13){ transform: translate(3px, 1px) } | |
| .two use:nth-of-type(1) { transform: translate(1px, 1px) } | |
| .two use:nth-of-type(2) { transform: translate(2px, 1px) } | |
| .two use:nth-of-type(3) { transform: translate(3px, 1px) } | |
| .two use:nth-of-type(4) { transform: translate(3px, 2px) } | |
| .two use:nth-of-type(5) { transform: translate(3px, 2px) } | |
| .two use:nth-of-type(6) { transform: translate(1px, 3px) } | |
| .two use:nth-of-type(7) { transform: translate(2px, 3px) } | |
| .two use:nth-of-type(8) { transform: translate(3px, 3px) } | |
| .two use:nth-of-type(9) { transform: translate(1px, 4px) } | |
| .two use:nth-of-type(10){ transform: translate(1px, 4px) } | |
| .two use:nth-of-type(11){ transform: translate(1px, 5px) } | |
| .two use:nth-of-type(12){ transform: translate(2px, 5px) } | |
| .two use:nth-of-type(13){ transform: translate(3px, 5px) } | |
| .three use:nth-of-type(1) { transform: translate(1px, 5px) } | |
| .three use:nth-of-type(2) { transform: translate(2px, 5px) } | |
| .three use:nth-of-type(3) { transform: translate(3px, 5px) } | |
| .three use:nth-of-type(4) { transform: translate(3px, 4px) } | |
| .three use:nth-of-type(5) { transform: translate(3px, 4px) } | |
| .three use:nth-of-type(6) { transform: translate(1px, 3px) } | |
| .three use:nth-of-type(7) { transform: translate(2px, 3px) } | |
| .three use:nth-of-type(8) { transform: translate(3px, 3px) } | |
| .three use:nth-of-type(9) { transform: translate(3px, 2px) } | |
| .three use:nth-of-type(10){ transform: translate(3px, 2px) } | |
| .three use:nth-of-type(11){ transform: translate(1px, 1px) } | |
| .three use:nth-of-type(12){ transform: translate(2px, 1px) } | |
| .three use:nth-of-type(13){ transform: translate(3px, 1px) } | |
| .four use:nth-of-type(1) { transform: translate(1px, 1px) } | |
| .four use:nth-of-type(2) { transform: translate(3px, 1px) } | |
| .four use:nth-of-type(3) { transform: translate(3px, 1px) } | |
| .four use:nth-of-type(4) { transform: translate(1px, 2px) } | |
| .four use:nth-of-type(5) { transform: translate(3px, 2px) } | |
| .four use:nth-of-type(6) { transform: translate(1px, 3px) } | |
| .four use:nth-of-type(7) { transform: translate(2px, 3px) } | |
| .four use:nth-of-type(8) { transform: translate(3px, 3px) } | |
| .four use:nth-of-type(9) { transform: translate(3px, 4px) } | |
| .four use:nth-of-type(10){ transform: translate(3px, 4px) } | |
| .four use:nth-of-type(11){ transform: translate(3px, 5px) } | |
| .four use:nth-of-type(12){ transform: translate(3px, 5px) } | |
| .four use:nth-of-type(13){ transform: translate(3px, 5px) } | |
| .five use:nth-of-type(1) { transform: translate(1px, 5px) } | |
| .five use:nth-of-type(2) { transform: translate(2px, 5px) } | |
| .five use:nth-of-type(3) { transform: translate(3px, 5px) } | |
| .five use:nth-of-type(4) { transform: translate(3px, 4px) } | |
| .five use:nth-of-type(5) { transform: translate(3px, 4px) } | |
| .five use:nth-of-type(6) { transform: translate(1px, 3px) } | |
| .five use:nth-of-type(7) { transform: translate(2px, 3px) } | |
| .five use:nth-of-type(8) { transform: translate(3px, 3px) } | |
| .five use:nth-of-type(9) { transform: translate(1px, 2px) } | |
| .five use:nth-of-type(10){ transform: translate(1px, 2px) } | |
| .five use:nth-of-type(11){ transform: translate(1px, 1px) } | |
| .five use:nth-of-type(12){ transform: translate(2px, 1px) } | |
| .five use:nth-of-type(13){ transform: translate(3px, 1px) } | |
| .six use:nth-of-type(1) { transform: translate(1px, 1px) } | |
| .six use:nth-of-type(2) { transform: translate(2px, 1px) } | |
| .six use:nth-of-type(3) { transform: translate(3px, 1px) } | |
| .six use:nth-of-type(4) { transform: translate(1px, 2px) } | |
| .six use:nth-of-type(5) { transform: translate(1px, 2px) } | |
| .six use:nth-of-type(6) { transform: translate(1px, 3px) } | |
| .six use:nth-of-type(7) { transform: translate(2px, 3px) } | |
| .six use:nth-of-type(8) { transform: translate(3px, 3px) } | |
| .six use:nth-of-type(9) { transform: translate(1px, 4px) } | |
| .six use:nth-of-type(10){ transform: translate(3px, 4px) } | |
| .six use:nth-of-type(11){ transform: translate(1px, 5px) } | |
| .six use:nth-of-type(12){ transform: translate(2px, 5px) } | |
| .six use:nth-of-type(13){ transform: translate(3px, 5px) } | |
| .seven use:nth-of-type(1) { transform: translate(3px, 5px) } | |
| .seven use:nth-of-type(2) { transform: translate(3px, 5px) } | |
| .seven use:nth-of-type(3) { transform: translate(3px, 5px) } | |
| .seven use:nth-of-type(4) { transform: translate(3px, 4px) } | |
| .seven use:nth-of-type(5) { transform: translate(3px, 4px) } | |
| .seven use:nth-of-type(6) { transform: translate(3px, 3px) } | |
| .seven use:nth-of-type(7) { transform: translate(3px, 3px) } | |
| .seven use:nth-of-type(8) { transform: translate(3px, 3px) } | |
| .seven use:nth-of-type(9) { transform: translate(3px, 2px) } | |
| .seven use:nth-of-type(10){ transform: translate(3px, 2px) } | |
| .seven use:nth-of-type(11){ transform: translate(1px, 1px) } | |
| .seven use:nth-of-type(12){ transform: translate(2px, 1px) } | |
| .seven use:nth-of-type(13){ transform: translate(3px, 1px) } | |
| .height use:nth-of-type(1) { transform: translate(1px, 1px) } | |
| .height use:nth-of-type(2) { transform: translate(2px, 1px) } | |
| .height use:nth-of-type(3) { transform: translate(3px, 1px) } | |
| .height use:nth-of-type(4) { transform: translate(1px, 2px) } | |
| .height use:nth-of-type(5) { transform: translate(3px, 2px) } | |
| .height use:nth-of-type(6) { transform: translate(1px, 3px) } | |
| .height use:nth-of-type(7) { transform: translate(2px, 3px) } | |
| .height use:nth-of-type(8) { transform: translate(3px, 3px) } | |
| .height use:nth-of-type(9) { transform: translate(1px, 4px) } | |
| .height use:nth-of-type(10){ transform: translate(3px, 4px) } | |
| .height use:nth-of-type(11){ transform: translate(1px, 5px) } | |
| .height use:nth-of-type(12){ transform: translate(2px, 5px) } | |
| .height use:nth-of-type(13){ transform: translate(3px, 5px) } | |
| .nine use:nth-of-type(1) { transform: translate(1px, 5px) } | |
| .nine use:nth-of-type(2) { transform: translate(2px, 5px) } | |
| .nine use:nth-of-type(3) { transform: translate(3px, 5px) } | |
| .nine use:nth-of-type(4) { transform: translate(3px, 4px) } | |
| .nine use:nth-of-type(5) { transform: translate(3px, 4px) } | |
| .nine use:nth-of-type(6) { transform: translate(1px, 3px) } | |
| .nine use:nth-of-type(7) { transform: translate(2px, 3px) } | |
| .nine use:nth-of-type(8) { transform: translate(3px, 3px) } | |
| .nine use:nth-of-type(9) { transform: translate(1px, 2px) } | |
| .nine use:nth-of-type(10){ transform: translate(3px, 2px) } | |
| .nine use:nth-of-type(11){ transform: translate(1px, 1px) } | |
| .nine use:nth-of-type(12){ transform: translate(2px, 1px) } | |
| .nine use:nth-of-type(13){ transform: translate(3px, 1px) } | |
| use { transition: transform 250ms ease; } | |
| use:nth-of-type(1) { transition-delay: 0ms } | |
| use:nth-of-type(3) { transition-delay: 30ms } | |
| use:nth-of-type(5) { transition-delay: 60ms } | |
| use:nth-of-type(7) { transition-delay: 90ms } | |
| use:nth-of-type(9) { transition-delay: 120ms } | |
| use:nth-of-type(11){ transition-delay: 150ms } | |
| use:nth-of-type(13){ transition-delay: 180ms } | |
| use:nth-of-type(2) { transition-delay: 150ms } | |
| use:nth-of-type(4) { transition-delay: 120ms } | |
| use:nth-of-type(6) { transition-delay: 90ms } | |
| use:nth-of-type(8) { transition-delay: 60ms } | |
| use:nth-of-type(10){ transition-delay: 30ms } | |
| use:nth-of-type(12){ transition-delay: 0ms } | |
| </style> | |
| <script> | |
| const DIGIT = ['zero','one','two','three','four','five','six','seven','height','nine'] | |
| function timeAsDigits (time) { | |
| return digit = { | |
| h1: Math.floor(time.getHours() / 10), | |
| h2: time.getHours() % 10, | |
| m1: Math.floor(time.getMinutes() / 10), | |
| m2: time.getMinutes() % 10, | |
| s1: Math.floor(time.getSeconds() / 10), | |
| s2: time.getSeconds() % 10, | |
| } | |
| } | |
| function clock () { | |
| const now = new Date() | |
| const newTime = timeAsDigits(now) | |
| if (clock.lastTime != newTime) { | |
| clock.lastTime = newTime | |
| Object.keys(newTime).forEach(id => { | |
| document.getElementById(id).setAttribute('class', DIGIT[newTime[id]]) | |
| }) | |
| } | |
| window.requestAnimationFrame(clock) | |
| } | |
| window.addEventListener('DOMContentLoaded',clock) | |
| </script> | |
| <svg viewBox="0 0 29 7"> | |
| <defs> | |
| <rect id="base" width="1" height="1" stroke-width="0.01" stroke="black" /> | |
| </defs> | |
| <g id="h1"> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| </g> | |
| <g id="h2"> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| </g> | |
| <path d="M9,3 h1 v-1 h-1 z M9,5 h1 v-1 h-1 z" /> | |
| <g id="m1"> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| </g> | |
| <g id="m2"> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| </g> | |
| <path d="M19,3 h1 v-1 h-1 z M19,5 h1 v-1 h-1 z" /> | |
| <g id="s1"> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| </g> | |
| <g id="s2"> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| <use xlink:href="#base" /> | |
| </g> | |
| </svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment