Skip to content

Instantly share code, notes, and snippets.

@JeremiePat

JeremiePat/digital-clock.html

Created April 29, 2019 14:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JeremiePat/49849ac68c890adc401cb8d40e42c3b5 to your computer and use it in GitHub Desktop.
Save JeremiePat/49849ac68c890adc401cb8d40e42c3b5 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Clock (Digital) with CSS transition
Raw
digital-clock.html
<!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