Is there a more efficient way of implementing this clock in Raphael JS?

Can someone let me know if this is a proper (and efficient) way of doing it? It works, but I wanted to understand if there's a way it be made better (I can use a for loop for the clones, but my browser gets stuck if I do it).

Here's the fiddle

window.onload = function() {
  rot();
}
var rot = function(){
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var c1 = paper.circle(250,250,150).attr({"stroke-width":2});
var c2 = paper.circle(250, 250, 5).attr({"fill":"black"});
var lMark = paper.path("M 250 250 m 0 -130 l 0 -20").attr({"stroke-wid th":2}); 
lMark.clone().attr({transform:"r90 250 250"});
lMark.clone().attr({transform:"r180 250 250"});
lMark.clone().attr({transform:"r270 250 250"});
lMark.clone().attr({transform:"r360 250 250"});
var d = new Date();
var hourAngle = (d.getHours() * 60 + d.getMinutes())/2, minAngle = (d.getMinutes() * 6), secAngle = (d.getSeconds() * 6);
var secHand = paper.path("M 250 250, l 0 -110, M 250 250, l 0 15").attr({"stroke":"red", "stroke-width":2});
var minHand = paper.path("M 250 250, l 0 -120").attr({'stroke-width':2}).transform("r" + minAngle + " 250 250");
var hourHand = paper.path("M 250 250, l 0 -80").attr({'stroke-width':3, 'stroke-linecap':'round'}).transform("r" + hourAngle + " 250 250");
var secAnim = Raphael.animation({transform: "r360 250 250"}, 60000).repeat(Infinity);
var minAnim = Raphael.animation({transform: "r360 250 250"}, 3600000).repeat(Infinity);
var hourAnim = Raphael.animation({transform: "r360 250 250"}, 43200000).repeat(Infinity);
secHand.animate(secAnim); 
minHand.animate(minAnim);
hourHand.animate(hourAnim);
}

I think not, this is how it is meant to be.

That being said, you

• Have a few missing semicolons

• Capture c1 & c2 for no good reason

• Calculate secAngle for no good reason

• Have a veritable legion of hard coded mystical constants

• Have a few weirdly named variables

After some thought, it appears that the biggest problem with this code is that you count on the animation to take 0 (milli)seconds and the execution/scheduling of the animations is instantaneous. Have you tried keeping this clock up for an hour or more? I would expect there to be discrepancies between the real time and the animated clock.

StackExchange Code Review Q#55092, answer score: 3