-
Notifications
You must be signed in to change notification settings - Fork 19
/
light-bulb.html
executable file
·85 lines (76 loc) · 4.23 KB
/
light-bulb.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Light Bulb</title>
<link rel="stylesheet" href="style.css">
<script src="snap.svg-min.js"></script>
<script>
window.onload = function () {
var bulb = Snap.select("#bulb");
var left_line = bulb.select("#left-line");
var middle_line = bulb.select("#middle-line");
var right_line = bulb.select("#right-line");
function revert() {
left_line.animate({
points: "14,16 14,16 14,16 16,14"
, opacity: "0"
}, 200, mina.easeout);
middle_line.animate({
points: "32,10 35,10 35,10 32,10"
, opacity: "0"
}, 200, mina.easeout);
right_line.animate({
points: "54,16 52,14 54,16 52,14"
, opacity: "0"
}, 200, mina.easeout);
}
function open() {
clearTimeout(revert);
left_line.animate({
points: "6,4 4,6 14,16 16,14"
, opacity: "1"
}, 800, mina.elastic, function() { setTimeout(revert, 800); });
middle_line.animate({
points: "32,0 35,0 35,10 32,10"
, opacity: "1"
}, 800, mina.elastic);
right_line.animate({
points: "60,4 62,6 54,16 52,14"
, opacity: "1"
}, 800, mina.elastic);
}
bulb.click(open);
}
</script>
</head>
<body>
<svg version="1.1" id="bulb" 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 66 66" enable-background="new 0 0 66 66" xml:space="preserve">
<path fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M40,57.602c0,0.967-0.561,1.75-1.254,1.75H26.753
c-0.691,0-1.253-0.783-1.253-1.75l0,0c0-0.967,0.562-1.75,1.253-1.75h11.993C39.439,55.852,40,56.635,40,57.602L40,57.602z"/>
<path fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M38.127,63.727c0,0.693-0.396,1.254-0.887,1.254h-8.481
c-0.49,0-0.886-0.561-0.886-1.254l0,0c0-0.691,0.396-1.252,0.886-1.252h8.481C37.73,62.475,38.127,63.035,38.127,63.727
L38.127,63.727z"/>
<circle fill="#FFFFFF" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" cx="33" cy="33.727" r="16.917"/>
<path fill="#FFFFFF" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" d="M41.417,46.113c0,3.168-0.905,5.738-2.021,5.738
H26.104c-1.116,0-2.021-2.57-2.021-5.738l0,0c0-3.166,0.905-5.738,2.021-5.738h13.291C40.512,40.375,41.417,42.947,41.417,46.113
L41.417,46.113z"/>
<g>
<g>
<path fill="tomato" d="M31.853,53.327c1.331-3.844,4.061-8.327,1.159-12.088c-1.407-1.822-5.2-2.421-5.55,0.67
c-0.28,2.469,3.194,3.949,5.21,4.104c4.252,0.326,7.673-3.559,10.036-6.564c0.787-1.002-0.617-2.428-1.414-1.414
c-2.484,3.161-6.059,7.346-10.454,5.354c-0.161-0.087-0.322-0.174-0.483-0.261c-0.958-0.379-0.849-0.826,0.33-1.341
c1.378,0.616,1.659,2.412,1.64,3.685c-0.038,2.478-1.607,5.029-2.401,7.325C29.501,54.018,31.434,54.538,31.853,53.327
L31.853,53.327z"/>
</g>
<!-- <polygon id="left-line" points="6,4 4,6 14,16 16,14" /> -->
<!-- <polygon id="right-line" points="60,4 62,6 54,16 52,14" /> -->
<!-- <polygon id="middle-line" points="32,0 35,0 35,10 32,10" /> -->
<polygon opacity="0" fill="#FFFFFF" stroke="#FFFFFF" id="left-line" points="14,16 14,16 14,16 16,14" />
<polygon opacity="0" fill="#FFFFFF" stroke="#FFFFFF" id="middle-line" points="32,10 35,10 35,10 32,10" />
<polygon opacity="0" fill="#FFFFFF" stroke="#FFFFFF" id="right-line" points="54,16 52,14 54,16 52,14" />
</g>
</svg>
</body>
</html>