Tutorial: How to make clock icon show a specific time

[mholt]

How to make the clock icon show a specific time

This was a fun weekend project, so I wanted to share it:

First we start with our SVG code. This is based on the clock-hour-12 icon because I found the one arm going straight up easier to start with. I've added a second arm that is slightly shorter for the hour hand:

<svg id="clock" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
	<circle cx="12" cy="12" r="9"></circle>
	<path class="hour-hand" d="M12 8v3"></path>
	<path class="minute-hand" d="M12 7v5"></path>
</svg>

We will use SVG transforms to rotate each arm into place, which is easier than using trigonometry to figure out the start and end points of each arm ourselves.

Here's a JavaScript function that computes the angles of the arms:

// clockArms returns the angles for the hour and minute hand of a clock.
function clockArms(hour, minute) {
	const hourAngle = ((hour + minute / 60) / 12) * 360;
	const minuteAngle = (minute / 60) * 360;
	return {hourAngle, minuteAngle};
}

And finally, some JS code that calls the function and applies the transform:

const {hourAngle, minuteAngle} = clockArms(time.hour, time.minute);
document.querySelector('#clock .hour-hand').setAttribute('transform', `rotate(${hourAngle} 12 12)`);
document.querySelector('#clock .minute-hand').setAttribute('transform', `rotate(${minuteAngle} 12 12)`);

The 12 12 at the end of each rotate() are there because SVG rotations are done based on the corner of the viewbox by default, not the start of a path. So we shift/translate the rotation point to 12,12 which is the center of the 24x24 viewbox. That half the viewbox is the same number of hours on the clock is coincidence.

Anyway, I think this'll be a neat little easter egg for users of my app. Hope you enjoy. And thanks to @codecalm for the icons!

[codecalm]

Awesome! ❤️