Digital Clock

clock-face.svg

<svg xmlns="http://www.w3.org/2000/svg" width="375" height="96" viewBox="0 0 375 96">
	<g transform="translate(17,0)">
		<g class="digit" transform="skewX(-12)">
			<path d="M10,8L14,4L42,4L46,8L42,12L14,12L10,8z"/>
			<path d="M8,10L12,14L12,42L8,46L4,42L4,14L8,10z"/>
			<path d="M48,10L52,14L52,42L48,46L44,42L44,14L48,10z"/>
			<path d="M10,48L14,44L42,44L46,48L42,52L14,52L10,48z"/>
			<path d="M8,50L12,54L12,82L8,86L4,82L4,54L8,50z"/>
			<path d="M48,50L52,54L52,82L48,86L44,82L44,54L48,50z"/>
			<path d="M10,88L14,84L42,84L46,88L42,92L14,92L10,88z"/>
		</g>
		<g class="digit" transform="skewX(-12)">
			<path d="M66,8L70,4L98,4L102,8L98,12L70,12L66,8z"/>
			<path d="M64,10L68,14L68,42L64,46L60,42L60,14L64,10z"/>
			<path d="M104,10L108,14L108,42L104,46L100,42L100,14L104,10z"/>
			<path d="M66,48L70,44L98,44L102,48L98,52L70,52L66,48z"/>
			<path d="M64,50L68,54L68,82L64,86L60,82L60,54L64,50z"/>
			<path d="M104,50L108,54L108,82L104,86L100,82L100,54L104,50z"/>
			<path d="M66,88L70,84L98,84L102,88L98,92L70,92L66,88z"/>
		</g>
		<g class="separator">
			<circle r="4" cx="112" cy="28"/>
			<circle r="4" cx="103.5" cy="68"/>
		</g>
		<g class="digit" transform="skewX(-12)">
			<path d="M134,8L138,4L166,4L170,8L166,12L138,12L134,8z"/>
			<path d="M132,10L136,14L136,42L132,46L128,42L128,14L132,10z"/>
			<path d="M172,10L176,14L176,42L172,46L168,42L168,14L172,10z"/>
			<path d="M134,48L138,44L166,44L170,48L166,52L138,52L134,48z"/>
			<path d="M132,50L136,54L136,82L132,86L128,82L128,54L132,50z"/>
			<path d="M172,50L176,54L176,82L172,86L168,82L168,54L172,50z"/>
			<path d="M134,88L138,84L166,84L170,88L166,92L138,92L134,88z"/>
		</g>
		<g class="digit" transform="skewX(-12)">
			<path d="M190,8L194,4L222,4L226,8L222,12L194,12L190,8z"/>
			<path d="M188,10L192,14L192,42L188,46L184,42L184,14L188,10z"/>
			<path d="M228,10L232,14L232,42L228,46L224,42L224,14L228,10z"/>
			<path d="M190,48L194,44L222,44L226,48L222,52L194,52L190,48z"/>
			<path d="M188,50L192,54L192,82L188,86L184,82L184,54L188,50z"/>
			<path d="M228,50L232,54L232,82L228,86L224,82L224,54L228,50z"/>
			<path d="M190,88L194,84L222,84L226,88L222,92L194,92L190,88z"/>
		</g>
		<g class="separator">
			<circle r="4" cx="236" cy="28"/>
			<circle r="4" cx="227.5" cy="68"/>
		</g>
		<g class="digit" transform="skewX(-12)">
			<path d="M258,8L262,4L290,4L294,8L290,12L262,12L258,8z"/>
			<path d="M256,10L260,14L260,42L256,46L252,42L252,14L256,10z"/>
			<path d="M296,10L300,14L300,42L296,46L292,42L292,14L296,10z"/>
			<path d="M258,48L262,44L290,44L294,48L290,52L262,52L258,48z"/>
			<path d="M256,50L260,54L260,82L256,86L252,82L252,54L256,50z"/>
			<path d="M296,50L300,54L300,82L296,86L292,82L292,54L296,50z"/>
			<path d="M258,88L262,84L290,84L294,88L290,92L262,92L258,88z"/>
		</g>
		<g class="digit" transform="skewX(-12)">
			<path d="M314,8L318,4L346,4L350,8L346,12L318,12L314,8z"/>
			<path d="M312,10L316,14L316,42L312,46L308,42L308,14L312,10z"/>
			<path d="M352,10L356,14L356,42L352,46L348,42L348,14L352,10z"/>
			<path d="M314,48L318,44L346,44L350,48L346,52L318,52L314,48z"/>
			<path d="M312,50L316,54L316,82L312,86L308,82L308,54L312,50z"/>
			<path d="M352,50L356,54L356,82L352,86L348,82L348,54L352,50z"/>
			<path d="M314,88L318,84L346,84L350,88L346,92L318,92L314,88z"/>
		</g>
	</g>
</svg>

clock.js

var Clock = Clock || {};

Clock.digitPattern = [
	[ 1, 0, 1, 1, 0, 1, 1, 1, 1, 1 ], 
	[ 1, 0, 0, 0, 1, 1, 1, 0, 1, 1 ], 
	[ 1, 1, 1, 1, 1, 0, 0, 1, 1, 1 ], 
	[ 0, 0, 1, 1, 1, 1, 1, 0, 1, 1 ], 
	[ 1, 0, 1, 0, 0, 0, 1, 0, 1, 0 ], 
	[ 1, 1, 0, 1, 1, 1, 1, 1, 1, 1 ], 
	[ 1, 0, 1, 1, 0, 1, 1, 0, 1, 1 ]
];

Clock.load = function(clockFaceSvg) {
	Clock.xhr.sendRequest({
		url : clockFaceSvg,
		headers : {
			'Content-Type' : 'image/svg+xml'
		}
	}, function(request) {
		Clock.inject(request.responseXML.documentElement);
		Clock.setup();
		Clock.run();
	});
}

Clock.inject = function(xml) {
	var svg = Clock.svg.cloneToDoc(xml);
	svg = document.importNode(svg, true);
	document.body.appendChild(svg);
}

Clock.setup = function() {
	var svgUnderlay = d3.select('svg'),
		svgOverlay = d3.select('body').append(function() {
			return svgUnderlay.node().cloneNode(true);
		}),
		svg = d3.selectAll('svg');

	svgUnderlay.attr('id', 'underlay');
	svgOverlay.attr('id', 'overlay');

	Clock.digit = svg.selectAll('.digit');
	Clock.separator = svg.selectAll('.separator circle');
	Clock.digitCount = Clock.countChildren(svgUnderlay, '.digit');
}

Clock.run = function() {
	(function tick() {
		var now = new Date,
			hours = now.getHours(),
			minutes = now.getMinutes(),
			seconds = now.getSeconds();

		var digit = Clock.digit.data([
			hours   / 10 | 0, hours   % 10,
			minutes / 10 | 0, minutes % 10,
			seconds / 10 | 0, seconds % 10
		]);

		for (var i = 0; i <= Clock.digitCount; i++) {
			digit.select('path:nth-child(' + (i + 1) + ')').classed('lit', function(d) {
				return Clock.digitPattern[i][d];
			});
		}

		Clock.separator.classed('lit', seconds & 1);

		setTimeout(tick, 1000 - now % 1000);
	})();
}

Clock.countChildren = function(node, selector) {
	return node.selectAll(selector)[0].length;
}

Clock.xhr = Clock.xhr || {};

Clock.xhr.XMLHttpFactories = [
    function () { return new XMLHttpRequest(); },
	function () { return new ActiveXObject('Msxml3.XMLHTTP'); },
	function () { return new ActiveXObject('Msxml2.XMLHTTP.6.0'); },
	function () { return new ActiveXObject('Msxml2.XMLHTTP.3.0'); },
	function () { return new ActiveXObject('Msxml2.XMLHTTP'); },
	function () { return new ActiveXObject('Microsoft.XMLHTTP'); },
];

// http://stackoverflow.com/a/2557268
Clock.xhr.sendRequest = function(config, callback) {
	config = config || {};
	
	var url = config.url;
	var jsonData = config.data;
	var headers = config.headers;

	var xhr = Clock.xhr.createXMLHTTPObject();
	
	if (!xhr) {
		return;
	}
	
	var method = jsonData != null ? 'POST' : 'GET';
	xhr.open(method, url, true);

	if (jsonData != null) {
		xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
	}
	
	if (headers != null) {
		for (var header in headers) {
			xhr.setRequestHeader(header, headers[header]);
		}
	}
	
	xhr.onreadystatechange = function () {
		if (xhr.readyState != 4) {
			return;
		}
		if (xhr.status != 200 && xhr.status != 304) {
			return;
		}
		callback(xhr);
	}
	
	if (xhr.readyState == 4) {
		return;
	}
	
	xhr.send(jsonData);
}

Clock.xhr.createXMLHTTPObject = function() {
    for (var i = 0; i < Clock.xhr.XMLHttpFactories.length; i++) {
        try {
            return Clock.xhr.XMLHttpFactories[i]();
        } catch (e) {
            continue;
        }
    }
    return null;
}

Clock.svg = Clock.svg || {};

// http://stackoverflow.com/a/7986519
Clock.svg.cloneToDoc = function(node, doc) {
	if (!doc) {
		doc = document;
	}

	var clone = doc.createElementNS(node.namespaceURI, node.nodeName);

	for (var i = 0, len = node.attributes.length; i < len; ++i) {
		var attr = node.attributes[i];

		if (/^xmlns\b/.test(attr.nodeName)) {
			continue; // IE can't create these
		}

		clone.setAttributeNS(attr.namespaceURI, attr.nodeName, attr.nodeValue);
	}

	for (var i = 0, len = node.childNodes.length; i < len; ++i) {
		var child = node.childNodes[i];

		clone.insertBefore(
			child.nodeType == 1
				? Clock.svg.cloneToDoc(child, doc)
				: doc.createTextNode(child.nodeValue),
			null
		);
	}

	return clone;
}

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="application/xhtml+xml;charset=utf-8"/>
		<link rel="stylesheet" href="style.css" />
		<!-- link rel="stylesheet" href="theme-green.css" / -->
		<link rel="stylesheet" href="theme-blue.css" />
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
		<script src="clock.js"></script>
		<script type="text/javascript">	
			Clock.load('clock-face.svg');
		</script>
	</head>
	<body></body>
</html>

style.css

body {
  position: relative;
}

svg {
  position: absolute;
  top: 0;
  left: 50px;
  width: 860px;
  height: 500px;
}

#underlay {
  -webkit-filter: blur(4px);
  -moz-filter: blur(4px);
  -ms-filter: blur(4px);
  -o-filter: blur(4px);
  filter: blur(4px);
}

theme-blue.css

body {
  background: #411;
}

#underlay path,
#underlay circle {
  fill: none;
  stroke: #301;
}

#underlay .lit {
  fill: #28e;
  stroke: #28e;
}

#overlay path,
#overlay circle {
  fill: #613;
  stroke: #05f;
  stroke-opacity: 0;
}

#overlay .lit {
  fill: #27e;
  stroke-opacity: 1;
}

theme-green.css

body {
  background: #111;
}

#underlay path,
#underlay circle {
  fill: none;
}

#underlay .lit {
  fill: #0e0;
  stroke: #0e0;
}

#overlay path,
#overlay circle {
  fill: #222;
  stroke: #5f0;
  stroke-opacity: 0;
}

#overlay .lit {
  fill: #0e0;
  stroke-opacity: 1;
}

thumbnail.png