Swiss Railway clock

index.html

<div class="clock">
	<div class="markers">
		<div marker-hour="0-6"></div>
		<div marker-hour="1-7"></div>
		<div marker-hour="2-8"></div>
		<div marker-hour="3-9"></div>
		<div marker-hour="4-10"></div>
		<div marker-hour="5-11"></div>
		<div marker-min="1-31"></div>
		<div marker-min="2-32"></div>
		<div marker-min="3-33"></div>
		<div marker-min="4-34"></div>
		<div marker-min="6-36"></div>
		<div marker-min="7-37"></div>
		<div marker-min="8-38"></div>
		<div marker-min="9-39"></div>
		<div marker-min="11-41"></div>
		<div marker-min="12-42"></div>
		<div marker-min="13-43"></div>
		<div marker-min="14-44"></div>
		<div marker-min="16-46"></div>
		<div marker-min="17-47"></div>
		<div marker-min="18-48"></div>
		<div marker-min="19-49"></div>
		<div marker-min="21-51"></div>
		<div marker-min="22-52"></div>
		<div marker-min="23-53"></div>
		<div marker-min="24-54"></div>
		<div marker-min="26-56"></div>
		<div marker-min="27-57"></div>
		<div marker-min="28-58"></div>
		<div marker-min="29-59"></div>
	</div>
	<div class="hands">
		<div hand="hour"></div>
		<div hand="min"></div>
		<div hand="sec"></div>
	</div>
</div>

script.babel

const handHour = document.querySelector('.clock [hand="hour"]'),
			handMin  = document.querySelector('.clock [hand="min"]'),
			handSec  = document.querySelector('.clock [hand="sec"]');

function updateClock() {
	var d = new Date(),
			h = d.getHours(),
			m = d.getMinutes(),
			s = d.getSeconds();

	// convert hours to 12-hour format
	h = h > 12 ? h - 12 : h;
	// set hour hand rotation
	h = h * 30 + m / 2;
	// set minute hand rotation
	m = m * 6 + s / 10;
	// set second hand rotation
	s = s * 6;
	
	handHour.style.transform = `rotate(${h}deg)`;
	handMin.style.transform  = `rotate(${m}deg)`;
	handSec.style.transform  = `rotate(${s}deg)`;
}

updateClock();
setInterval(updateClock, 1000);

style.scss

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	display: flex;
	height: 100vh;
	margin: 0;
	background: #ececef;
}

$clock-size: 80vmin;

$clock-color-bg:       #fff;
$clock-color-border:   #dcdcdc;
$clock-color-markers:  #0e0e10; //RAL 9005
$clock-color-hands:    #0e0e10; //RAL 9005
$clock-color-sec-hand: #bb1e10; //RAL 3020

$marker-hour-width:  $clock-size / 100 * 3.5;
$marker-hour-length: $clock-size / 100 * 12;

$marker-min-width:  $clock-size / 100 * 1.4;
$marker-min-length: $marker-hour-width;

$hand-hour-width-top:    $clock-size / 100 * 5.2;
$hand-hour-width-bottom: $clock-size / 100 * 6.4;
$hand-hour-length:       $clock-size / 100 * 44;
$hand-hour-offset:       $clock-size / 100 * 12;

$hand-min-width-top:    $clock-size / 100 * 3.6;
$hand-min-width-bottom: $hand-hour-width-top;
$hand-min-length:       $clock-size / 100 * 58;
$hand-min-offset:       $clock-size / 100 * 12;

$hand-sec-width:            $clock-size / 100 * 1.4;
$hand-sec-pointer-diameter: $clock-size / 100 * 10.5;
$hand-sec-length:           $clock-size / 100 * 47.7;
$hand-sec-offset:           $clock-size / 100 * 16.5;

.clock {
	position: relative;
	min-width: $clock-size;
	min-height: $clock-size;
	margin: auto;
	background: $clock-color-bg;
	border-radius: 50%;
	box-shadow:
		0 0 0 $marker-min-length $clock-color-bg,
		0 0 0 $marker-min-length*1.5 $clock-color-border;

	.markers {
		width: 100%;
		height: 100%;

		&::before,
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			background: $clock-color-bg;
		}

		&::before {
			z-index: 4;
			width:  $clock-size - $marker-hour-length * 2;
			height: $clock-size - $marker-hour-length * 2;
		}

		&::after {
			z-index: 2;
			width:  $clock-size - $marker-min-length * 2;
			height: $clock-size - $marker-min-length * 2;
		}

		[marker-hour] {
			z-index: 3;
			position: absolute;
			top: 0;
			left: 50%;
			width: $marker-hour-width;
			height: 100%;
			margin-left: -$marker-hour-width / 2;
			background: $clock-color-markers;
		}

		@for $i from 0 through 5 {
			[marker-hour="#{$i}-#{$i+6}"] {
				transform: rotate(#{$i*30}deg);
			}
		}

		[marker-min] {
			z-index: 1;
			position: absolute;
			top: 0;
			left: 50%;
			width: $marker-min-width;
			height: 100%;
			margin-left: -$marker-min-width / 2;
			background: $clock-color-markers;
		}

		@for $i from 1 through 29 {
			[marker-min="#{$i}-#{$i+30}"] {
				transform: rotate(#{$i*6}deg);
			}
		}
	}

	.hands {
		width: 100%;
		height: 100%;

		[hand] {
			z-index: 5;
			position: absolute;
			bottom: 50%;
			left: 50%;
			background: $clock-color-hands;
		}
		
		[hand="hour"] {
			bottom: calc(50% - #{$hand-hour-offset});
			width: $hand-hour-width-bottom;
			height: $hand-hour-length;
			margin-left: -$hand-hour-width-bottom / 2;
			transform-origin: center #{$hand-hour-length - $hand-hour-offset};
			clip-path: polygon(
				#{($hand-hour-width-bottom - $hand-hour-width-top) / 2} 0,
				#{$hand-hour-width-bottom - ($hand-hour-width-bottom - $hand-hour-width-top) / 2} 0,
				100% 100%,
				0 100%
			);
		}
		
		[hand="min"] {
			bottom: calc(50% - #{$hand-min-offset});
			width: $hand-min-width-bottom;
			height: $hand-min-length;
			margin-left: -$hand-min-width-bottom / 2;
			transform-origin: center #{$hand-min-length - $hand-min-offset};
			clip-path: polygon(
				#{($hand-min-width-bottom - $hand-min-width-top) / 2} 0,
				#{$hand-min-width-bottom - ($hand-min-width-bottom - $hand-min-width-top) / 2} 0,
				100% 100%,
				0 100%
			);
		}
		
		[hand="sec"] {
			bottom: calc(50% - #{$hand-sec-offset});
			width: $hand-sec-width;
			height: $hand-sec-length;
			margin-left: -$hand-sec-width / 2;
			background: $clock-color-sec-hand;
			transform-origin: center #{$hand-sec-length - $hand-sec-offset};
			
			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				width: $hand-sec-pointer-diameter;
				height: $hand-sec-pointer-diameter;
				background: inherit;
				border-radius: 50%;
			}
		}
	}
}

swiss-railway-clock.markdown

Swiss Railway clock

The SBB railway clock was designed by Hans Hilfiker in 1944 as an embodiment of the phrase “punctuality is the railway’s trademark”. The clock was given a sleek design and a face that was easy to read.

The now-famous pause when the second hand hits the minute mark stems from a technical necessity in the clock’s early days. Hilfiker wanted all station clocks in Switzerland to be synchronised. In order to achieve this, the clocks received a time pulse via telephone cable every minute from the master clock in the Zurich signal box. However, synchronising all the station clocks in this way took 1.5 seconds. This ultimately led to the incarnation of the second hand that only takes 58.5 seconds to complete a revolution, then pauses for 1.5 seconds before beginning its next revolution when the minute hand jumps.

Hilfiker gave this explanation for his technical solution: “The second hand provides reassurance at the last minute and makes it easier to dispatch trains on time.”

— The SBB station clock by Mondaine

Abbildung: Museum für Gestaltung / ZHdK

A Pen by Marc Müller on CodePen.

License.