-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
214 lines (214 loc) · 7.61 KB
/
index.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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>
Techinfo - Tuggable Light Bulb! 💡(GSAP Draggable && MorphSVG)
</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
/>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!-- partial:index.partial.html -->
<svg
class="toggle-scene"
xmlns="http://www.w3.org/2000/svg"
preserveaspectratio="xMinYMin"
viewBox="0 0 197.451 481.081"
>
<defs>
<marker id="e" orient="auto" overflow="visible" refx="0" refy="0">
<path
class="toggle-scene__cord-end"
fill-rule="evenodd"
stroke-width=".2666"
d="M.98 0a1 1 0 11-2 0 1 1 0 012 0z"
></path>
</marker>
<marker id="d" orient="auto" overflow="visible" refx="0" refy="0">
<path
class="toggle-scene__cord-end"
fill-rule="evenodd"
stroke-width=".2666"
d="M.98 0a1 1 0 11-2 0 1 1 0 012 0z"
></path>
</marker>
<marker id="c" orient="auto" overflow="visible" refx="0" refy="0">
<path
class="toggle-scene__cord-end"
fill-rule="evenodd"
stroke-width=".2666"
d="M.98 0a1 1 0 11-2 0 1 1 0 012 0z"
></path>
</marker>
<marker id="b" orient="auto" overflow="visible" refx="0" refy="0">
<path
class="toggle-scene__cord-end"
fill-rule="evenodd"
stroke-width=".2666"
d="M.98 0a1 1 0 11-2 0 1 1 0 012 0z"
></path>
</marker>
<marker id="a" orient="auto" overflow="visible" refx="0" refy="0">
<path
class="toggle-scene__cord-end"
fill-rule="evenodd"
stroke-width=".2666"
d="M.98 0a1 1 0 11-2 0 1 1 0 012 0z"
></path>
</marker>
<clippath id="g" clippathunits="userSpaceOnUse">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="4.677"
d="M-774.546 827.629s12.917-13.473 29.203-13.412c16.53.062 29.203 13.412 29.203 13.412v53.6s-8.825 16-29.203 16c-21.674 0-29.203-16-29.203-16z"
></path>
</clippath>
<clippath id="f" clippathunits="userSpaceOnUse">
<path
d="M-868.418 945.051c-4.188 73.011 78.255 53.244 150.216 52.941 82.387-.346 98.921-19.444 98.921-47.058 0-27.615-4.788-42.55-73.823-42.55-69.036 0-171.436-30.937-175.314 36.667z"
></path>
</clippath>
</defs>
<g class="toggle-scene__cords">
<path
class="toggle-scene__cord"
marker-end="url(#a)"
fill="none"
stroke-linecap="square"
stroke-width="6"
d="M123.228-28.56v150.493"
transform="translate(-24.503 256.106)"
></path>
<path
class="toggle-scene__cord"
marker-end="url(#a)"
fill="none"
stroke-linecap="square"
stroke-width="6"
d="M123.228-28.59s28 8.131 28 19.506-18.667 13.005-28 19.507c-9.333 6.502-28 8.131-28 19.506s28 19.507 28 19.507"
transform="translate(-24.503 256.106)"
></path>
<path
class="toggle-scene__cord"
marker-end="url(#a)"
fill="none"
stroke-linecap="square"
stroke-width="6"
d="M123.228-28.575s-20 16.871-20 28.468c0 11.597 13.333 18.978 20 28.468 6.667 9.489 20 16.87 20 28.467 0 11.597-20 28.468-20 28.468"
transform="translate(-24.503 256.106)"
></path>
<path
class="toggle-scene__cord"
marker-end="url(#a)"
fill="none"
stroke-linecap="square"
stroke-width="6"
d="M123.228-28.569s16 20.623 16 32.782c0 12.16-10.667 21.855-16 32.782-5.333 10.928-16 20.623-16 32.782 0 12.16 16 32.782 16 32.782"
transform="translate(-24.503 256.106)"
></path>
<path
class="toggle-scene__cord"
marker-end="url(#a)"
fill="none"
stroke-linecap="square"
stroke-width="6"
d="M123.228-28.563s-10 24.647-10 37.623c0 12.977 6.667 25.082 10 37.623 3.333 12.541 10 24.647 10 37.623 0 12.977-10 37.623-10 37.623"
transform="translate(-24.503 256.106)"
></path>
<g class="line toggle-scene__dummy-cord">
<line
marker-end="url(#a)"
x1="98.7255"
x2="98.7255"
y1="240.5405"
y2="380.5405"
></line>
</g>
<circle
class="toggle-scene__hit-spot"
cx="98.7255"
cy="380.5405"
r="60"
fill="transparent"
></circle>
</g>
<g
class="toggle-scene__bulb bulb"
transform="translate(844.069 -645.213)"
>
<path
class="bulb__cap"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="4.677"
d="M-774.546 827.629s12.917-13.473 29.203-13.412c16.53.062 29.203 13.412 29.203 13.412v53.6s-8.825 16-29.203 16c-21.674 0-29.203-16-29.203-16z"
></path>
<path
class="bulb__cap-shine"
d="M-778.379 802.873h25.512v118.409h-25.512z"
clip-path="url(#g)"
transform="matrix(.52452 0 0 .90177 -368.282 82.976)"
></path>
<path
class="bulb__cap"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="4"
d="M-774.546 827.629s12.917-13.473 29.203-13.412c16.53.062 29.203 13.412 29.203 13.412v0s-8.439 10.115-28.817 10.115c-21.673 0-29.59-10.115-29.59-10.115z"
></path>
<path
class="bulb__cap-outline"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="4.677"
d="M-774.546 827.629s12.917-13.473 29.203-13.412c16.53.062 29.203 13.412 29.203 13.412v53.6s-8.825 16-29.203 16c-21.674 0-29.203-16-29.203-16z"
></path>
<g
class="bulb__filament"
fill="none"
stroke-linecap="round"
stroke-width="5"
>
<path d="M-752.914 823.875l-8.858-33.06"></path>
<path d="M-737.772 823.875l8.858-33.06"></path>
</g>
<path
class="bulb__bulb"
stroke-linecap="round"
stroke-width="5"
d="M-783.192 803.855c5.251 8.815 5.295 21.32 13.272 27.774 12.299 8.045 36.46 8.115 49.127 0 7.976-6.454 8.022-18.96 13.273-27.774 3.992-6.7 14.408-19.811 14.408-19.811 8.276-11.539 12.769-24.594 12.769-38.699 0-35.898-29.102-65-65-65-35.899 0-65 29.102-65 65 0 13.667 4.217 26.348 12.405 38.2 0 0 10.754 13.61 14.746 20.31z"
></path>
<circle
class="bulb__flash"
cx="-745.343"
cy="743.939"
r="83.725"
fill="none"
stroke-dasharray="10,30"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="10"
></circle>
<path
class="bulb__shine"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="12"
d="M-789.19 757.501a45.897 45.897 0 013.915-36.189 45.897 45.897 0 0129.031-21.957"
></path>
</g>
</svg>
<!-- partial -->
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://assets.codepen.io/16327/MorphSVGPlugin3.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/Draggable.min.js"></script>
<script src="./script.js"></script>
</body>
</html>