Cooper Hewitt Clock Wall

See the Pen Cooper Hewitt Clock Wall by Aurer (@aurer) on CodePen.

The project is far simpler than it might appear, let's start with an individual 'clock' element which makes up one 'pixel' of the display. Each 'clock' is made up of a single div element, utilizing the ':before' and ':after' pseudo elements for the two clock hands, something like this:

<div class="clock"></div>

.clock {
	border-radius: 50%;
	width: 60px;
	height: 60px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	position: relative;
	background-color: #fff;
	max-width: 60em;
	margin: auto;
}

.clock:before,
.clock:after {
	content: '';
	display: inline-block;
	height: 45%;
	width: 4px;
	background-color: #444;
	position: absolute;
	left: 50%;
	top: 8%;
	margin-left: -2px;
	transform-origin: 2px 100%;
	transition: all 10s cubic-bezier(0.5, 0, 0.5, 1);
}

Which results is this:

In order to draw simple shapes, or in our case write digits using the clocks, they each need to be able to have the hands positioned in one of 6 positions e.g.

This is achieved with simple classes which alter the rotation of the pseudo elements around their respective transform-origins e.g.

.clock.pos2:before {
	transform: rotate(180deg);
}

.clock.pos2:after {
	transform: rotate(90deg);
}

Adding the pos2 class to a clock results in the following:

Now that the individual clocks are ready we can group them into a panel which will be able to display a number between 0 and 9. If you look at the source javascript in the original pen, you'll see this code close to the top:

function setNumber(group, number) {
	var clocks = group.children;
	var numbers = [
		'266352355555555551451664',
		'263013500550055024131664',
		'266316352645526451631664',
		'266316352645163526451664',
		'232355555145163500550014',
		'266352645163163526451664',
		'266352645163523551451664',
		'266316350055005500550014',
		'266352355145523551451664',
		'266352355145163500550014',
	];
	for (var i = 0; i < 24; i++) {
		clocks[i].classList.value = 'clock pos' + numbers[number][i];
	}
}

The 'numbers' array describes the numbers 0-9 for a group of clock elements, all it does is describe the 'position' of each clock element in the panel. So for the number 0 the positions are 266352355555555551451664 i.e. the first clock is in position 2, the second is position 6 and so on for each of the 24 clocks. The setNumber() function makes it simple to display a number between 0 and 9 on a panel by looping over the clocks and setting the respective pos class.

Now we have a way to show a number it's fairly trivial to show the time using 4 groups of clocks as well as a ':' between the hour and minute displays.

For me the eye-catching aspect of this pen is the transition when the time changes, it makes the whole thing look much more complex than it really is. In reality there is no programming involved in that effect, it's just a CSS transition and the clever devs who developed the browser have done all the hard work for it already.