Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
162 lines (144 sloc) 4.41 KB
<title>SVG clock animation</title>
<style>
/* any custom styles live here */
line {
stroke-width: 3px;
stroke: black;
}
</style>
<article>
<p>SVG clock animation by <a href="http://twitter.com/davidbasoko">David Basoko</a>.</p>
<div>
<label for="zoominput">Zoom</label>
<select id="rangeinput" onchange="CLOCK.zoom();">
<option value="1" selected="selected">1x</option>
<option value="2">2x</option>
<option value="3">3x</option>
<option value="4">4x</option>
<option value="5">5x</option>
</select>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" >
<g>
<circle id="circle" style="stroke: black; fill: #f8f8f8;" cx="100" cy="100" r="100"/>
<line id="hour0" x1="100" y1="10" x2="100" y2="0"/>
<line id="hour1" x1="150" y1="13" x2="145" y2="22"/>
<line id="hour2" x1="187" y1="50" x2="178" y2="55"/>
<line id="hour3" x1="190" y1="100" x2="200" y2="100"/>
<line id="hour4" x1="187" y1="150" x2="178" y2="145"/>
<line id="hour5" x1="150" y1="187" x2="145" y2="178"/>
<line id="hour6" x1="100" y1="190" x2="100" y2="200"/>
<line id="hour7" x1="50" y1="187" x2="55" y2="178"/>
<line id="hour8" x1="13" y1="150" x2="22" y2="145"/>
<line id="hour9" x1="0" y1="100" x2="10" y2="100"/>
<line id="hour10" x1="13" y1="50" x2="22" y2="55" />
<line id="hour11" x1="50" y1="13" x2="55" y2="22" />
</g>
<g>
<line x1="100" y1="100" x2="100" y2="45" style="stroke-width: 6px; stroke: green;" id="hourhand"/>
<line x1="100" y1="100" x2="100" y2="15" style="stroke-width: 4px; stroke: blue;" id="minutehand"/>
<line x1="100" y1="100" x2="100" y2="5" style="stroke-width: 2px; stroke: red;" id="secondhand"/>
</g>
</svg>
</div>
</article>
<script>
var CLOCK = (function() {
var drawClock = function() {
var INITIAL_R = 100;
var zoom = document.getElementById("rangeinput").value;
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));
}
// Draw hands
drawHands();
};
var drawHands = function() {
// 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'));
// Current time.
var currentTime = new Date();
// Draw Hands
drawHand(document.getElementById("secondhand"),
currentTime.getSeconds(),
SECONDS_HAND_SIZE,
6);
drawHand(document.getElementById("minutehand"),
currentTime.getMinutes(),
MINUTES_HAND_SIZE,
6);
drawHand(document.getElementById("hourhand"),
currentTime.getHours(),
HOURS_HAND_SIZE,
30);
function drawHand(hand, value, size, degrees) {
var deg = degrees * value;
x2 = getX(deg, r, size, cx),
y2 = getY(deg, r, size, cy);
hand.setAttribute('x1', cx);
hand.setAttribute('y1', cy);
hand.setAttribute('x2', x2);
hand.setAttribute('y2', y2);
}
};
/*
* Get a Point X value.
* degress. Angle's degrees.
* r. Circle's radio.
* adjust. Percent of length.
* x. Start of X point.
*/
function getX(degrees, r, adjust, x) {
var x = x || r,
adj = adjust || 1;
return x + r * adj * Math.cos(getRad(degrees));
}
/*
* Get a Point Y value.
* degress. Angle's degrees.
* r. Circle's radio.
* adjust. Percent of length.
* x. Start of Y point.
*/
function getY(degrees, r, adjust, y) {
var y = y || r,
adj = adjust || 1;
return y + r * adj * Math.sin(getRad(degrees));
}
// Convert from degrees to radians.
function getRad(degrees) {
var adjust = Math.PI / 2;
return (degrees * Math.PI / 180) - adjust;
}
return {
init: function() {
drawClock();
setInterval(drawHands, 1000);
},
zoom: function() {
drawClock();
}
};
})();
CLOCK.init();
</script>