jamesporter/clock.html

## clock.html
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Clock Concept</title>
  <meta name="description" content="SVG Clock">
  <meta name="author" content="James Porter">

  <!--
		Adapted from: http://demosthenes.info/blog/943/An-SVG-Analog-Clock-In-6-Lines-of-JavaScript
	-->
</head>

<style>
	#face { stroke-width: 0px; fill: #111; }

	#hour{stroke-width: 3px; stroke: #666; stroke-linecap: round;}
	#min{stroke-width: 2px; stroke: #888; stroke-linecap: round;}
	#sec { stroke: #c44; stroke-width: 1px; stroke-linecap: round;}

	.mark{
		stroke: #222; stroke-width: 2px;
	}

	#container{
		width: 75%;
		margin:auto;
	}
</style>

<body>

<div id="container">

<svg id="clock" viewBox="0 0 100 100">
	<circle id="face" cx="50" cy="50" r="45"/>

	<line class="mark" x1="50" y1="5" x2="50" y2="10" />
	<line class="mark" x1="50" y1="95" x2="50" y2="90" />
	<line class="mark" x1="90" y1="50" x2="95" y2="50" />
	<line class="mark" x1="5" y1="50" x2="10" y2="50" />

	<g id="hands">
	<line id="hour" x1="50" y1="50" x2="50" y2="30" />

	<line id="min" x1="50" y1="50" x2="50" y2="24" />

	<line id="sec" x1="50" y1="50" x2="50" y2="16" />
	</g>
</svg>

<div>

<script>
	setInterval(function() {
		var r = function(el, deg) {
			el.setAttribute('transform', 'rotate('+ deg +' 50 50)')
		}

		var d = new Date()
		r(sec, 6*d.getSeconds())
		r(min, 6*d.getMinutes())
		r(hour, 30*(d.getHours()%12) + d.getMinutes()/2)
	}, 1000);
</script>

</body>
</html>
	<html lang="en">
	<head>
	<meta charset="utf-8">

	<title>Clock Concept</title>
	<meta name="description" content="SVG Clock">
	<meta name="author" content="James Porter">

	<!--
	Adapted from: http://demosthenes.info/blog/943/An-SVG-Analog-Clock-In-6-Lines-of-JavaScript
	-->
	</head>

	<style>
	#face { stroke-width: 0px; fill: #111; }

	#hour{stroke-width: 3px; stroke: #666; stroke-linecap: round;}
	#min{stroke-width: 2px; stroke: #888; stroke-linecap: round;}
	#sec { stroke: #c44; stroke-width: 1px; stroke-linecap: round;}

	.mark{
	stroke: #222; stroke-width: 2px;
	}

	#container{
	width: 75%;
	margin:auto;
	}
	</style>

	<body>

	<div id="container">

	<svg id="clock" viewBox="0 0 100 100">
	<circle id="face" cx="50" cy="50" r="45"/>

	<line class="mark" x1="50" y1="5" x2="50" y2="10" />
	<line class="mark" x1="50" y1="95" x2="50" y2="90" />
	<line class="mark" x1="90" y1="50" x2="95" y2="50" />
	<line class="mark" x1="5" y1="50" x2="10" y2="50" />

	<g id="hands">
	<line id="hour" x1="50" y1="50" x2="50" y2="30" />

	<line id="min" x1="50" y1="50" x2="50" y2="24" />

	<line id="sec" x1="50" y1="50" x2="50" y2="16" />
	</g>
	</svg>

	<div>

	<script>
	setInterval(function() {
	var r = function(el, deg) {
	el.setAttribute('transform', 'rotate('+ deg +' 50 50)')
	}

	var d = new Date()
	r(sec, 6*d.getSeconds())
	r(min, 6*d.getMinutes())
	r(hour, 30*(d.getHours()%12) + d.getMinutes()/2)
	}, 1000);
	</script>

	</body>
	</html>