Skip to content

Instantly share code, notes, and snippets.

Created March 15, 2014 22:08
Show Gist options
  • Save anonymous/9574646 to your computer and use it in GitHub Desktop.
Save anonymous/9574646 to your computer and use it in GitHub Desktop.
body{
background-color: #2C3E50;
}
#clock{
display: block;
width: 600px;
height: 600px;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://raphaeljs.com/raphael.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="clock"></div>
</body>
</html>
window.onload = function() {
var r = Raphael("clock", 600, 600),
init = true;
var drawArc = function(pa, x, y, r, max, val){
var s = {
x: x,
y: y - r
},
deg = 360 / max * val;
deg = deg === 360 ? 359.99 : deg;
var rad = (90 - deg) * Math.PI / 180,
e = {
x: x + r * Math.cos(rad),
y: y - r * Math.sin(rad)
};
if(val === 0){
pa.attr({path: [["M", s.x, s.y]], "stroke-opacity": 0});
}else{
pa.animate({ path: [["M", s.x, s.y], ["A", r, r, 1, deg > 180 ? 1 : 0, 1, e.x, e.y]], "stroke-opacity": 100}, 300, "bounce");
}
};
var inner = r.path().attr({ stroke: "#e74c3c", "stroke-width": 20, "stroke-linecap" : "round"}),
outer = r.path().attr({ stroke: "#1abc9c", "stroke-width": 20, "stroke-linecap" : "round" });
drawArc(inner, 200, 200, 100, 60, 0);
drawArc(outer, 200, 200, 51, 50, 0);
init = false;
var txt = r.text(200, 200, "").attr({ "font-size": 60, fill: "#1abc9c", "font-family": "Lato,Helvetica Neue,Helvetica,Arial,sans-serif" });
var msec = 0,
sec = 0;
setInterval(function(){
msec++;
if(msec > 10){
sec = ++sec > 10 ? 0: sec;
msec = 0;
}
drawArc(inner, 200, 200, 69, 10, sec);
drawArc(outer, 200, 200, 50, 10, msec);
txt.attr({text: 10-msec});
},1000);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment