Skip to content

Commit 62e6551

Browse files
basokobasoko
committed
Added a SVG clock animation demo.
1 parent cc93513 commit 62e6551

File tree

1 file changed

+161
-0
lines changed

1 file changed

+161
-0
lines changed

‎demos/svg-clock.html

+161
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
<title>SVG clock animation</title>
2+
<style>
3+
/* any custom styles live here */
4+
line {
5+
stroke-width: 3px;
6+
stroke: black;
7+
}
8+
</style>
9+
<article>
10+
<p>SVG clock animation by <a href="http://twitter.com/davidbasoko">David Basoko</a>.</p>
11+
<div>
12+
<label for="zoominput">Zoom</label>
13+
<select id="rangeinput" onchange="CLOCK.zoom();">
14+
<option value="1" selected="selected">1x</option>
15+
<option value="2">2x</option>
16+
<option value="3">3x</option>
17+
<option value="4">4x</option>
18+
<option value="5">5x</option>
19+
</select>
20+
</div>
21+
<div>
22+
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" >
23+
<g>
24+
<circle id="circle" style="stroke: black; fill: #f8f8f8;" cx="100" cy="100" r="100"/>
25+
<line id="hour0" x1="100" y1="10" x2="100" y2="0"/>
26+
<line id="hour1" x1="150" y1="13" x2="145" y2="22"/>
27+
<line id="hour2" x1="187" y1="50" x2="178" y2="55"/>
28+
<line id="hour3" x1="190" y1="100" x2="200" y2="100"/>
29+
<line id="hour4" x1="187" y1="150" x2="178" y2="145"/>
30+
<line id="hour5" x1="150" y1="187" x2="145" y2="178"/>
31+
<line id="hour6" x1="100" y1="190" x2="100" y2="200"/>
32+
<line id="hour7" x1="50" y1="187" x2="55" y2="178"/>
33+
<line id="hour8" x1="13" y1="150" x2="22" y2="145"/>
34+
<line id="hour9" x1="0" y1="100" x2="10" y2="100"/>
35+
<line id="hour10" x1="13" y1="50" x2="22" y2="55" />
36+
<line id="hour11" x1="50" y1="13" x2="55" y2="22" />
37+
</g>
38+
<g>
39+
<line x1="100" y1="100" x2="100" y2="45" style="stroke-width: 6px; stroke: green;" id="hourhand"/>
40+
<line x1="100" y1="100" x2="100" y2="15" style="stroke-width: 4px; stroke: blue;" id="minutehand"/>
41+
<line x1="100" y1="100" x2="100" y2="5" style="stroke-width: 2px; stroke: red;" id="secondhand"/>
42+
</g>
43+
</svg>
44+
</div>
45+
46+
</article>
47+
<script>
48+
var CLOCK = (function() {
49+
var drawClock = function() {
50+
var INITIAL_R = 100;
51+
52+
var zoom = document.getElementById("rangeinput").value;
53+
54+
var r = INITIAL_R * zoom;
55+
56+
// Draw Circle
57+
var circle = document.getElementById("circle");
58+
circle.setAttribute('r', r);
59+
circle.setAttribute('cx', r);
60+
circle.setAttribute('cy', r);
61+
62+
// Draw Hours
63+
for(var i = 0; i < 12; i++) {
64+
var hour = document.getElementById("hour"+i);
65+
var degrees = i * 30;
66+
hour.setAttribute('x1', getX(degrees, r, 0.9)); // 90% of radio's length.
67+
hour.setAttribute('y1', getY(degrees, r, 0.9)); // 90% of radio's length.
68+
hour.setAttribute('x2', getX(degrees, r));
69+
hour.setAttribute('y2', getY(degrees, r));
70+
}
71+
72+
// Draw hands
73+
drawHands();
74+
};
75+
76+
var drawHands = function() {
77+
// Constants for hand's sizes.
78+
var SECONDS_HAND_SIZE = 0.95,
79+
MINUTES_HAND_SIZE = 0.85,
80+
HOURS_HAND_SIZE = 0.55;
81+
82+
var circle = document.getElementById("circle");
83+
84+
// Clock Circle's Properties
85+
var r = circle.getAttribute('r'),
86+
cx = parseInt(circle.getAttribute('cx')),
87+
cy = parseInt(circle.getAttribute('cy'));
88+
89+
// Current time.
90+
var currentTime = new Date();
91+
92+
// Draw Hands
93+
drawHand(document.getElementById("secondhand"),
94+
currentTime.getSeconds(),
95+
SECONDS_HAND_SIZE,
96+
6);
97+
drawHand(document.getElementById("minutehand"),
98+
currentTime.getMinutes(),
99+
MINUTES_HAND_SIZE,
100+
6);
101+
drawHand(document.getElementById("hourhand"),
102+
currentTime.getHours(),
103+
HOURS_HAND_SIZE,
104+
30);
105+
106+
function drawHand(hand, value, size, degrees) {
107+
var deg = degrees * value;
108+
x2 = getX(deg, r, size, cx),
109+
y2 = getY(deg, r, size, cy);
110+
111+
hand.setAttribute('x1', cx);
112+
hand.setAttribute('y1', cy);
113+
hand.setAttribute('x2', x2);
114+
hand.setAttribute('y2', y2);
115+
}
116+
};
117+
118+
/*
119+
* Get a Point X value.
120+
* degress. Angle's degrees.
121+
* r. Circle's radio.
122+
* adjust. Percent of length.
123+
* x. Start of X point.
124+
*/
125+
function getX(degrees, r, adjust, x) {
126+
var x = x || r,
127+
adj = adjust || 1;
128+
return x + r * adj * Math.cos(getRad(degrees));
129+
}
130+
131+
/*
132+
* Get a Point Y value.
133+
* degress. Angle's degrees.
134+
* r. Circle's radio.
135+
* adjust. Percent of length.
136+
* x. Start of Y point.
137+
*/
138+
function getY(degrees, r, adjust, y) {
139+
var y = y || r,
140+
adj = adjust || 1;
141+
return y + r * adj * Math.sin(getRad(degrees));
142+
}
143+
144+
// Convert from degrees to radians.
145+
function getRad(degrees) {
146+
var adjust = Math.PI / 2;
147+
return (degrees * Math.PI / 180) - adjust;
148+
}
149+
150+
return {
151+
init: function() {
152+
drawClock();
153+
setInterval(drawHands, 1000);
154+
},
155+
zoom: function() {
156+
drawClock();
157+
}
158+
};
159+
})();
160+
CLOCK.init();
161+
</script>

0 commit comments

Comments
 (0)