Spoke Clock 2

<!DOCTYPE html>
<html>
<head>
	<title>Spoke Clock 2</title>
</head>
<body>

.spokes-02 {
		background: #fff;
		width: 100vw;
		height: 100vh;
	}

.spokes-02 * {
		stroke: #ddd;
	}

.spokes-02 .active {
		stroke: #000;
	}

.spokes-02 .hour {
		stroke-width: 6px;
	}

.spokes-02 .hour.active {
		stroke-width: 8px;
	}

.spokes-02 .minute  {
		stroke-width: 4px;
	}

.spokes-02 .minute.active {
		stroke-width: 6px;
	}

.spokes-02 .second  {
		stroke-width: 2px;
	}

.spokes-02 .second.active {
		stroke-width: 4px;
	}

</style>

var size = 1000
		var radius = size / 2

var tau = Math.PI * 2

var svg = d3.select('.spokes-02')
			.attr('viewBox', [0, 0, size, size])

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

var line = d3.radialLine()

var hours = svg.selectAll('.hour')
			.data(d3.range(12).map(function(d) {
				var a = (tau / 12) * d
				return [[a, radius * 0.2], [a, radius * 0.4]]
			}))
			.enter()
			.append('path')
			.attr('class', 'hour')
			.attr('d', line)
      .classed('active', function(d, i) { return !i })

var minutes = svg.selectAll('.minute')
			.data(d3.range(60).map(function(d) {
				var a = (tau / 60) * d
				return [[a, radius * 0.4], [a, radius * 0.6]]
			}))
			.enter()
			.append('path')
			.attr('class', 'minute')
			.attr('d', line)
      .classed('active', function(d, i) { return !i })

var seconds = svg.selectAll('.second')
			.data(d3.range(60).map(function(d) {
				var a = (tau / 60) * d
				return [[a, radius * 0.6], [a, radius * 0.8]]
			}))
			.enter()
			.append('path')
			.attr('class', 'second')
			.attr('d', line)
      .classed('active', function(d, i) { return !i })

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