-
Notifications
You must be signed in to change notification settings - Fork 19
/
gear.html
40 lines (32 loc) · 1.71 KB
/
gear.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<script src="snap.svg-min.js"></script>
<svg version="1.1" id="gear" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="100px" viewBox="0 0 124.182 124.346" enable-background="new 0 0 124.182 124.346"
xml:space="preserve">
<polygon fill="#FFFFFF" stroke="#FFFFFF" id="poly" stroke-miterlimit="10" points="25.003,12.504 38.836,22.171 50.836,17.004 54.003,0.504
70.169,0.671 73.336,17.171 84.669,21.838 98.669,12.338 110.669,23.838 101.169,36.838 106.836,49.004 123.169,52.338
123.669,68.505 107.336,71.171 102.669,85.005 112.503,98.505 101.504,109.671 88.337,100.671 74.004,107.171 70.837,123.504
55.337,123.837 52.67,107.67 38.17,102.004 24.17,111.337 13.004,100.17 22.671,86.337 16.837,72.337 0.671,69.504 0.505,53.67
17.172,50.837 22.672,37.671 13.505,23.504 "/>
<circle fill="tomato" stroke="#FFFFFF" stroke-miterlimit="10" cx="62.422" cy="61.753" r="16.917"/>
</svg>
<script>
window.onload = function () {
var gear = Snap.select("#gear");
var poly = gear.select("#poly");
var timer;
function revert() {
poly.animate({
transform: "r" + 0 + ","+String(gear.getBBox().width/2)+","+String(gear.getBBox().height/2)
}, 1000, mina.bounce);
}
function open() {
clearTimeout(timer);
poly.animate({
transform: "r" + 180 + ","+String(gear.getBBox().width/2)+","+String(gear.getBBox().height/2)
}, 1000,mina.bounce, function () { setTimeout(revert, 1000); });
}
gear.click(open);
}
</script>
</html>