Circles Clock 1

<!DOCTYPE html>
<html>
<head>
	<title>Circle Clock 1</title>
</head>
<body>

.circle-clock-1 {
		background: #fff;
		width: 100vw;
		height: 100vh;

width: 960px;
		height: 500px;

}

.circle-clock-1 * {
		mix-blend-mode: difference;
		stroke-linecap: round;
		stroke-width: 16px;
	}

.circle-clock-1 .hours * {
		fill: #c00;
		stroke: #c00;
	}

.circle-clock-1 .minutes * {
		fill: #0c0;
		stroke: #0c0;
	}

.circle-clock-1 .seconds * {
		fill: #00c;
		stroke: #00c;
	}

.circle-clock-1 circle {
		stroke: none;
	}
</style>

var size = 1000
		var radius = size * 0.25

var tau = Math.PI * 2

var svg = d3.select('.circle-clock-1')
			.attr('viewBox', [0, 0, size, size])

svg = svg.append('g')
				.attr('transform', 'translate(' + [size/2, size/2] + ')')

var rHours = radius * 0.4,
			rMinutes = radius * 0.6,
			rSeconds = radius * 0.9,
			lineMargin = 16

var hours = svg.append('g')
			.attr('class', 'hours')

hours.append('circle')
			.attr('r', rHours)
			.attr('cy', -rHours)

hours.append('line')
			.attr('stroke', '#000')
			.attr('y1', -lineMargin)
			.attr('y2', -rHours * 2 + lineMargin)

var minutes = svg.append('g')
			.attr('class', 'minutes')

minutes.append('circle')
			.attr('r', rMinutes)
			.attr('cy', -rMinutes)

minutes.append('line')
			.attr('stroke', '#000')
			.attr('y1', -lineMargin)
			.attr('y2', -rMinutes * 2 + lineMargin)

var seconds = svg.append('g')
			.attr('class', 'seconds')

seconds.append('circle')
			.attr('r', rSeconds)
			.attr('cy', -rSeconds)

seconds.append('line')
			.attr('stroke', '#000')
			.attr('y1', -lineMargin)
			.attr('y2', -rSeconds * 2 + lineMargin)

function render(date) {
			var ms = date.getMilliseconds() / 1000,
				s = date.getSeconds() / 60,
				m = date.getMinutes() / 60,
				h = date.getHours() % 12 / 12

seconds.style('transform', 'rotate(' + (s + ms / 60) + 'turn)')
			minutes.style('transform', 'rotate(' + (m + s / 60 + (ms / 6000)) + 'turn)')
			hours.style('transform', 'rotate(' + (h + m / 12 + s / (12 * 60)) + 'turn)')
		}

function tick() {
			var now = new Date()
			render(now)
		}

d3.timer(tick)

})()
</script>
</body>
</html>

https://d3js.org/d3.v4.min.js