JeremiePat/svg-analogic-clock.html

## svg-analogic-clock.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

function updateClock () {
  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'  ).style.transform = `rotate(${360 *   hour/H}deg)`
  document.getElementById('minute').style.transform = `rotate(${360 * minute/M}deg)`
  document.getElementById('second').style.transform = `rotate(${360 * second/S}deg)`

  window.requestAnimationFrame(updateClock)
}

window.addEventListener('DOMContentLoaded', updateClock)
</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" />
  <line id="hour"   x1="0" y1="0" x2="0" y2="-20" />
  <line id="second" x1="0" y1="5" x2="0" y2="-30" />
  <circle id="top" r="3" />
</svg>
	<!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

	function updateClock () {
	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' ).style.transform = `rotate(${360 * hour/H}deg)`
	document.getElementById('minute').style.transform = `rotate(${360 * minute/M}deg)`
	document.getElementById('second').style.transform = `rotate(${360 * second/S}deg)`

	window.requestAnimationFrame(updateClock)
	}

	window.addEventListener('DOMContentLoaded', updateClock)
	</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" />
	<line id="hour" x1="0" y1="0" x2="0" y2="-20" />
	<line id="second" x1="0" y1="5" x2="0" y2="-30" />
	<circle id="top" r="3" />
	</svg>