index.html
<!DOCTYPE html>
<html>
<head>
<title>Circle Clock 1</title>
</head>
<body>
<svg class="clock circle-clock-1"></svg>
<style type="text/css">
body {
margin: 0;
}
.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>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript">
(function() {
'use strict'
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>