Skip to content

Instantly share code, notes, and snippets.

@JeremiePat

JeremiePat/svg-analogic-clock-svg-animation.html

Created April 29, 2019 14:24
Show Gist options
  • Save JeremiePat/518f4534c799225e4ef3b6f21c388412 to your computer and use it in GitHub Desktop.
Save JeremiePat/518f4534c799225e4ef3b6f21c388412 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Clock (Analogic) with SVG animation
Raw
svg-analogic-clock-svg-animation.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Clock</title>
<style>
html, body, svg {
height: 100%;
padding: 0;
margin: 0;
}
circle, line {
fill: none;
stroke: black;
stroke-width: 7px;
stroke-linecap: round;
}
#clock {
stroke-dasharray: 1 99;
}
#second {
stroke: red;
stroke-width: 2px;
}
#top {
fill: red;
stroke: none;
}
</style>
<script>
const MS = 1000
const S = 60 * MS
const M = 60 * S
const H = 12 * M
window.addEventListener('DOMContentLoaded', () => {
const now = new Date()
const second = (now.getSeconds() * MS + now.getMilliseconds())
const minute = (now.getMinutes() * S + second)
const hour = (now.getHours() * M + minute) % H
document.getElementById('hour' ).setAttribute('transform', `rotate(${360 * hour/H })`)
document.getElementById('minute').setAttribute('transform', `rotate(${360 * minute/M })`)
document.getElementById('second').setAttribute('transform', `rotate(${360 * second/S })`)
})
</script>
<svg viewBox="-50 -50 100 100">
<circle id="clock" r="40" pathLength="1200" />
<line id="minute" x1="0" y1="0" x2="0" y2="-30">
<animateTransform attributeType="XML" attributeName="transform" additive="sum" type="rotate" from="0" to="360" dur="60min" repeatCount="indefinite" />
</line>
<line id="hour" x1="0" y1="0" x2="0" y2="-20">
<animateTransform attributeType="XML" attributeName="transform" additive="sum" type="rotate" from="0" to="360" dur="12h" repeatCount="indefinite" />
</line>
<line id="second" x1="0" y1="5" x2="0" y2="-30">
<animateTransform attributeType="XML" attributeName="transform" additive="sum" type="rotate" from="0" to="360" dur="60s" repeatCount="indefinite" />
</line>
<circle id="top" r="3" />
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment