dynamic SVG clock

real-time SVG clock

HTML

<svg height="100" style="position: absolute;z-index: 1000;margin-left: 27px;margin-top: 19px;" width="100" xmlns="http://www.w3.org/2000/svg">
<g>
<circle cx="45" cy="45" id="circle" r="45" style="fill: #e7e6e6;"></circle>
<circle cx="45" cy="45" id="circle" r="2" style="fill: #7bc4bd;"></circle>
<line id="hour0" x1="45" x2="45" y1="4.5" y2="0"></line>
<line id="hour1" x1="65.25" x2="67.5" y1="9.925971146730234" y2="6.02885682970026"></line>
<line id="hour2" x1="80.07402885326977" x2="83.97114317029974" y1="24.75" y2="22.5"></line>
<line id="hour3" x1="85.5" x2="90" y1="45" y2="45"></line>
<line id="hour4" x1="80.07402885326977" x2="83.97114317029974" y1="65.25" y2="67.5"></line>
<line id="hour5" x1="65.25" x2="67.5" y1="80.07402885326977" y2="83.97114317029974"></line>
<line id="hour6" x1="45" x2="45" y1="85.5" y2="90"></line>
<line id="hour7" x1="24.74999999999999" x2="22.49999999999999" y1="80.07402885326977" y2="83.97114317029974"></line>
<line id="hour8" x1="9.925971146730241" x2="6.028856829700267" y1="65.25000000000001" y2="67.50000000000001"></line>
<line id="hour9" x1="4.5" x2="0" y1="45.00000000000001" y2="45.00000000000001"></line>
<line id="hour10" x1="9.925971146730234" x2="6.02885682970026" y1="24.749999999999996" y2="22.499999999999996"></line>
<line id="hour11" x1="24.749999999999982" x2="22.49999999999998" y1="9.925971146730248" y2="6.028856829700274"></line>
</g>
<g>
<line id="hourhand" style="stroke-width: 4px; stroke: #7bc4bd;" x1="45" x2="22.118857664998135" y1="45" y2="54.43481984170262"></line>
<line id="minutehand" style="stroke-width: 4px; stroke:  #7bc4bd;" x1="45" x2="83.2429509886529" y1="45" y2="45.73430217178813"></line>
</g>
</svg>

CSS

line {
  stroke-width: 2px;
  stroke: #413f40;
  }

JavaScript

//=====================================================
//==================================== By Brian Shannon
//================================= CodeMeaSandwich.com
//=====================================================

var CLOCK = (function() {

var logger = console.log;

//++++++++++++++++++++++++++++++++ seconds since epoch
//++++++++++++++++++++++++++++++++++++++++++++++++++++

	var seconds_since_epoch = function(timeObj){ 
		timeObj = timeObj || Date.now(); 
		return Math.floor( Date.now() / 1000 ) 
	}


//=====================================================
//========================================== Draw Clock
//=====================================================

    var drawClock = function() {
	var INITIAL_R = 100;

	var zoom = 0.45;
	
	var r = INITIAL_R * zoom;

	// Draw Circle
	var circle = document.getElementById("circle");
	circle.setAttribute('r', r);
	circle.setAttribute('cx', r);
	circle.setAttribute('cy', r);

	// Draw Hours
	for(var i = 0; i < 12; i++) {
	    var hour = document.getElementById("hour"+i);
	    var degrees = i * 30;
	    hour.setAttribute('x1', getX(degrees, r, 0.9)); // 90% of radio's length.
	    hour.setAttribute('y1', getY(degrees, r, 0.9)); // 90% of radio's length.
	    hour.setAttribute('x2', getX(degrees, r));
	    hour.setAttribute('y2', getY(degrees, r));
	}
	
	drawHands();
    };
	var currentTime = new Date();

//=====================================================
//========================================== Draw handS
//=====================================================

    var drawHands = function() {

	//if(seconds_since_epoch(currentTime) === seconds_since_epoch())
	//return;

	// Constants for hand's sizes.
	var SECONDS_HAND_SIZE = 0.95,
	MINUTES_HAND_SIZE = 0.85,
	HOURS_HAND_SIZE = 0.55;

	var circle = document.getElementById("circle");

	// Clock Circle's Properties
	var r = circle.getAttribute('r'),
	cx = parseInt(circle.getAttribute('cx')),
	cy = parseInt(circle.getAttribute('cy'));


	

	//...