SVG Clock

Clock using SVG and d3

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  </head>

<body>
    <script>var chart = d3.select("body").append("svg:svg")
		    	.attr("class", "chart")
			    .attr("width", 600)
			    .attr("height", 600).append("svg:g")
			    .attr("transform", "translate(200,200)");
		chart.append("svg:path").attr("fill","black").attr("d", d3.svg.arc().innerRadius(160).outerRadius(162).startAngle(0).endAngle(Math.PI*2));
		var hourRing = chart.append("svg:path").attr("fill","red");
		var minuteRing = chart.append("svg:path").attr("fill","yellow");
		var secondRing = chart.append("svg:path").attr("fill","green");		
		var millisecondRing = chart.append("svg:path").attr("fill","black");
		window.setInterval(function(){
			var a = new Date();
			hourRing.attr("d", d3.svg.arc().innerRadius(140).outerRadius(160).startAngle(0).endAngle(Math.PI*2/12*(a.getHours()%12)));
			minuteRing.attr("d", d3.svg.arc().innerRadius(120).outerRadius(140).startAngle(0).endAngle(Math.PI*2/60*(a.getMinutes())));
			secondRing.attr("d", d3.svg.arc().innerRadius(100).outerRadius(120).startAngle(0).endAngle(Math.PI*2/60*(a.getSeconds())));			
			millisecondRing.attr("d", d3.svg.arc().innerRadius(98).outerRadius(100).startAngle(0).endAngle(Math.PI*2/1000*(a.getMilliseconds())));
		},10)
    </script>
  </body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js