-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
216 lines (212 loc) · 17 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
215
216
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="SVG animation Geek Zone" />
<meta name="keywords" content="shane boland, portfolio, svg, animation, geek zone, blog, @shanetheboland" />
<meta name="author" content="Shane Boland" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<title>Geek Zone SVG Animation</title>
<link rel="stylesheet" href="css/style.min.css">
</head>
<body>
<a href="javascript:void(0);" id="js-refresh-link" class="refresh-link">Do It Again</a>
<div id="container" class="container">
<div id="main" class="main">
<img class="illustration" id="js-illustration" src="img/illustration.svg" alt="Geek Zone Illustration" width="600px" height="600px" />
<svg class="line-drawing" id="js-line-drawing" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
<g id="i2">
<path fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M495.658,218.907c-4.635,0-9.27,0-13.902,0
c-11.353,0-22.705,0-34.06,0c-14.249,0-28.495,0-42.744,0c-13.322,0-26.645,0-39.967,0c-8.57,0-17.143,0-25.716,0
c-1.308,0-2.618,0-3.93,0c-0.005,0-0.002-5.45-0.002-5.747c0-11.896,0-23.791,0-35.687c0-13.25,0-26.5,0-39.75
c0-3.606,0-7.211,0-10.818c0-0.077-0.012-1.311,0.01-1.311c0.383,0,0.765,0,1.146,0c6.864,0,13.728,0,20.59,0
c12.531,0,25.06,0,37.589,0c14.378,0,28.752,0,43.128,0c12.395,0,24.791,0,37.188,0c6.597,0,13.19,0,19.786,0
c0.044,0,0.884-0.003,0.884,0.002c0,0.578,0,1.156,0,1.734c0,3.826,0,7.652,0,11.478c0,13.393,0,26.786,0,40.179
c0,11.644,0,23.288,0,34.932C495.658,215.582,495.658,217.244,495.658,218.907z" />
</g>
<g id="i5">
<path fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M311.159,295.742
c0,2.814-4.927,1.962-6.651,1.962c-3.227,0-6.452,0-9.678,0c-1.037,0-2.158,0.121-2.818-0.894
c-0.418-0.644-0.316-1.478-0.316-2.211c0-2.928,0-5.855,0-8.784c0-3.27,0-6.54,0-9.809c0-1.752-0.42-4.477,2.154-4.477
c2.78,0,5.56,0,8.339,0c2.315,0,4.696-0.164,7.008,0c2.324,0,1.963,2.648,1.963,4.194c0,2.566,0,5.131,0,7.696
C311.159,287.527,311.159,291.635,311.159,295.742z" />
</g>
<g id="i8">
<path fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M185.961,316.844
c13.66,15.914,23.987,34.557,30.627,54.432c6.604,19.769,9.595,40.716,8.983,61.542c-0.613,20.824-4.834,41.563-12.662,60.883
c-6.537,16.135-15.602,31.245-26.948,44.461c7.246,0,14.492,0,21.738,0c1.739,0,3.479,0,5.217,0
c0.741-1.207,1.469-2.424,2.181-3.646c1.372-2.357,2.689-4.744,3.954-7.16c5.082-9.712,9.292-19.874,12.649-30.307
c6.792-21.103,10.114-43.299,10.108-65.458c-0.007-22.157-3.202-44.396-10.146-65.451c-4.265-12.935-18.53-48.896-24.173-49.295
C203.976,316.596,193.138,316.844,185.961,316.844z" />
</g>
<g id="i9">
<path id="Desk_top_4_" fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M402.126,302.667
c-2.657,0-5.314,0-7.971,0c-7.23,0-14.463,0-21.692,0c-10.693,0-21.387,0-32.081,0c-13.043,0-26.09,0-39.137,0
c-14.287,0-28.573,0-42.859,0c-14.418,0-28.835,0-43.253,0c-13.437,0-26.874,0-40.311,0c-11.346,0-22.692,0-34.038,0
c-8.145,0-16.289,0-24.433,0c-3.832,0-7.664,0-11.495,0c-0.104,0-0.463,0.064-0.463-0.061c0-2.758,0-5.517,0-8.275
c0-0.479-0.041-0.412,0.37-0.412c0.46,0,0.92,0,1.379,0c4.899,0,9.798,0,14.697,0c8.962,0,17.923,0,26.885,0
c11.914,0,23.826,0,35.74,0c13.754,0,27.509,0,41.264,0c14.484,0,28.97,0,43.454,0c14.104,0,28.209,0,42.313,0
c12.612,0,25.225,0,37.84,0c10.011,0,20.022,0,30.032,0c6.299,0,12.598,0,18.896,0c1.408,0,2.818,0,4.23,0c0.209,0,0.417,0,0.626,0
c0.012,0,0.006,6.689,0.006,7.258C402.126,301.673,402.126,302.17,402.126,302.667z" />
</g>
<g id="i14">
<path fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M262.091,293.941
c0.983-0.714,2.133-1.673,2.526-2.869c0.433-1.32-0.542-2.684-1.481-3.505c-0.12-0.046-0.323-0.02-0.45-0.027
c-1.119-0.069-2.239-0.137-3.358-0.205c-4.785-0.292-9.57-0.583-14.356-0.875c-13.881-0.847-27.763-1.693-41.645-2.539
c-8.447-0.515-16.892-1.029-25.339-1.544c-4.723-0.288-9.483-0.274-14.212-0.41c-3.55-0.101-7.196-0.087-10.441,1.575
c-1.551,0.794-3.279,2.21-3.078,4.152c0.208,1.995,2.22,3.318,3.874,4.082c3.004,1.387,6.25,1.552,9.494,1.644
c3.247,0.092,6.493,0.185,9.74,0.277c3.207,0.091,6.417,0.245,9.625,0.245c10.229,0,20.458,0,30.688,0c13.182,0,26.362,0,39.542,0
C256.177,293.941,259.134,293.941,262.091,293.941z" />
</g>
<g id="i15">
<path fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M145.677,179.333
c-0.916-0.961-2.194-1.752-3.571-1.463c-0.599,0.125-1.137,0.443-1.585,0.852c-0.188,0.171-0.911,0.8-0.892,1.066
c0.014,0.185,0.026,0.371,0.04,0.555c0.085,1.179,0.17,2.359,0.254,3.539c0.349,4.866,0.698,9.732,1.048,14.598
c0.997,13.89,1.995,27.78,2.991,41.67c0.593,8.256,1.186,16.513,1.778,24.77c0.348,4.842,1.009,9.681,1.513,14.51
c0.378,3.626,0.984,7.462,3.383,10.364c1.102,1.334,2.83,2.467,4.584,1.672c1.893-0.858,2.78-3.194,3.228-5.07
c0.729-3.053,0.409-6.106,0.089-9.176c-0.345-3.3-0.689-6.6-1.035-9.899c-0.317-3.031-0.574-6.073-0.988-9.092
c-1.405-10.232-2.811-20.465-4.217-30.698c-1.794-13.064-3.588-26.129-5.383-39.194C146.5,185.334,146.089,182.334,145.677,179.333
z" />
</g>
<g id="i18">
<path fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M475.413,308.256c0,19.316,0,38.632,0,57.948
c0,0.839,0,1.774,0,2.569c0-19.419,0-38.838,0-58.258C475.413,309.762,475.413,309.009,475.413,308.256z" />
</g>
<g id="i19">
<path fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M474.538,308.256c2.716,0,0.915,3.35,0.91,5.02
c-0.008,1.662-0.012,3.325-0.019,4.987c-0.022,6.361-0.046,12.724-0.07,19.085c-0.023,6.633-0.047,13.266-0.07,19.901
c-0.008,2.002-0.015,4.004-0.021,6.007c-0.002,0.426-0.004,0.85-0.006,1.274c-0.002,1.12,0.687,2.085,0.748,3.188
c0.071,1.221-1.4,1.07-2.256,1.07c-1.379,0-2.763,0-4.144,0c-2.95,0-5.903,0-8.852,0c-2.214,0-5.449-0.693-5.449-3.424
c0-1.45,0-2.902,0-4.355c0-12.979,0-25.957,0-38.937c0-3.569,0-7.138,0-10.707c0-3.065,4.414-3.109,6.637-3.109
c3.264,0,6.528,0,9.794,0C472.673,308.256,473.606,308.256,474.538,308.256z" />
</g>
<g id="i20">
<path fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M411.918,537.157
c0,4.161-3.521,7.567-7.656,7.567c-4.135,0-7.656-3.406-7.656-7.567c0-4.16,3.523-7.563,7.656-7.563
C408.396,529.593,411.918,532.997,411.918,537.157C411.918,541.337,411.918,532.98,411.918,537.157z" />
</g>
<g id="i21">
<path fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M453.597,533.788
c0,4.161-3.52,7.567-7.653,7.567c-4.137,0-7.656-3.406-7.656-7.567s3.521-7.567,7.656-7.567
C450.077,526.22,453.597,529.628,453.597,533.788C453.597,537.968,453.597,529.61,453.597,533.788z" />
</g>
<g id="i23">
<path fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M453.597,518.614c-18.16,0-36.322,0-54.483,0
c-14.718,0-29.489,0-44.18,0c18.441,0,36.883,0,55.323,0C424.703,518.614,439.149,518.614,453.597,518.614z" />
</g>
<g id="i24">
<path fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M434.887,451.235
c0,0.192-52.887,0.08-58.031,0.047c-0.158,0-3.215-0.009-3.215-0.047c0-0.188,52.889-0.076,58.029-0.045
C431.833,451.192,434.887,451.201,434.887,451.235z" />
</g>
<g id="i28">
<path fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M370.236,533.788
c0,4.161-3.519,7.567-7.652,7.567c-4.136,0-7.655-3.404-7.655-7.567c0-4.161,3.52-7.567,7.655-7.567
C366.718,526.22,370.236,529.628,370.236,533.788z" />
</g>
<g id="i29">
<path fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M411.918,518.614c-5.058,0-10.113,0-15.17,0
c-0.313,0-0.143-3.831-0.143-4.218c0-10.013,0-20.024,0-30.037c0-14.207,0-28.413,0-42.621c0-11.896,0-23.796,0-35.693
c0-3.053,0-6.102,0-9.153c0-0.445,0-0.891,0-1.336c0-0.004,6.175-0.002,6.576-0.002c2.829,0,5.658,0,8.489,0
c0.434,0,0.247,0.496,0.247,0.88c0,2.785,0,5.572,0,8.357c0,11.613,0,23.224,0,34.834c0,14.248,0,28.495,0,42.74
c0,10.377,0,20.752,0,31.129C411.918,515.201,411.918,516.908,411.918,518.614z" />
</g>
<g id="i30">
<path fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M453.608,397.699
c0,3.007-5.655,0.945-7.303,0.943c-0.879-0.001-1.753-0.003-2.632-0.005c-4.471-0.012-8.943-0.021-13.414-0.033
c-13.827-0.031-27.653-0.063-41.48-0.095c-8.935-0.021-17.871-0.04-26.806-0.063c-0.525-0.002-1.048,0.034-1.569,0.117
c-1.198,0.191-4.558,1.542-5.311-0.035c-0.316-0.668-0.158-1.744-0.158-2.458c0-1.562,0-3.124,0-4.687c0-2.716,0-5.434,0-8.149
c0-2.949,2.193-5.379,5.187-5.379c8.497,0,16.992,0,25.487,0c13.998,0,27.995,0,41.996,0c5.154,0,10.309,0,15.461,0
c1.434,0,2.866,0,4.298,0c1.098,0,2.159-0.051,3.2,0.413c3.832,1.719,3.044,6.5,3.044,9.906
C453.608,391.351,453.608,394.524,453.608,397.699z" />
</g>
<g id="i31">
<path fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M446.568,391.936
c12.312,0,22.273-11.386,22.273-25.456" />
</g>
<g id="i32">
<path id="Desk_top_3_" fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M402.126,316.844
c-2.657,0-5.314,0-7.971,0c-7.23,0-14.463,0-21.692,0c-10.693,0-21.387,0-32.081,0c-13.043,0-26.09,0-39.137,0
c-14.287,0-28.573,0-42.859,0c-14.418,0-28.835,0-43.253,0c-13.437,0-26.874,0-40.311,0c-11.346,0-22.692,0-34.038,0
c-8.145,0-16.289,0-24.433,0c-3.832,0-7.664,0-11.495,0c-0.053,0-0.463,0.03-0.463-0.024c0-1.992,0-3.985,0-5.978
c0-5.611,0-11.222,0-16.834c0-0.144,7.13-0.066,7.59-0.066c7.13,0,14.26,0,21.39,0c10.62,0,21.24,0,31.861,0c13,0,26,0,39.001,0
c14.269,0,28.538,0,42.808,0c14.427,0,28.854,0,43.282,0c13.476,0,26.951,0,40.426,0c11.411,0,22.824,0,34.236,0
c8.236,0,16.474,0,24.712,0c3.955,0,7.907,0,11.861,0c0.187,0,0.376,0,0.563,0c0.002,0,0.002,4.777,0.002,5.057
c0,5.861,0,11.721,0,17.583C402.126,316.668,402.126,316.756,402.126,316.844z" />
</g>
<g id="i33">
<path id="desk_bottom_1_" fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M326.271,538.904
c-29.053,0-58.106,0-87.159,0c-22.37,0-44.741,0-67.111,0c13.684-15.618,24.062-33.99,30.802-53.612
c6.716-19.546,9.858-40.294,9.45-60.95c-0.409-20.652-4.371-41.258-11.905-60.504c-6.696-17.104-16.235-33.1-28.347-46.925
c29.053,0.001,58.104,0.001,87.157,0c22.37,0,44.74,0,67.112,0c-13.685,15.619-24.064,33.993-30.804,53.612
c-6.717,19.549-9.859,40.295-9.449,60.951c0.409,20.653,4.37,41.258,11.904,60.504
C304.619,509.083,314.158,525.078,326.271,538.904C274.846,538.904,326.271,538.904,326.271,538.904z" />
</g>
<g id="i34">
<path display="none" fill="none" stroke="#95A5A6" stroke-width="0.179" stroke-miterlimit="10" d="M340.876,291.403
c0,1.159,0.939,2.099,2.099,2.099h14.695c1.159,0,2.099-0.94,2.099-2.099v-4.199c0-1.159-0.939-2.099-2.099-2.099h-14.695
c-1.159,0-2.099,0.94-2.099,2.099V291.403z" />
</g>
<g id="i35">
<path fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M344.621,291.218c0,3.07,4.5,2.291,6.445,2.291
c3.318,0,6.636,0,9.954,0c0.722,0,1.488,0.072,2.212-0.019c2.104-0.263,2-2.34,2-3.926c0-1.311,0.373-3.379-0.577-4.448
c-0.765-0.862-1.812-0.77-2.84-0.77c-4.325,0-8.654,0-12.98,0c-1.486,0-3.388-0.273-4.059,1.462
c-0.309,0.797-0.155,1.86-0.155,2.692C344.621,289.406,344.621,290.312,344.621,291.218z" />
</g>
<g id="i36">
<path fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M292.991,291.979
c0,2.814-4.927,1.963-6.652,1.963c-3.227,0-6.454,0-9.681,0c-1.037,0-2.159,0.12-2.818-0.895c-0.418-0.644-0.316-1.478-0.316-2.21
c0-2.929,0-5.856,0-8.785c0-3.269,0-6.539,0-9.808c0-1.753-0.421-4.477,2.154-4.477c2.78,0,5.561,0,8.341,0
c2.315,0,4.697-0.165,7.009,0c2.324,0,1.963,2.648,1.963,4.194c0,2.566,0,5.13,0,7.696
C292.991,283.764,292.991,287.871,292.991,291.979z" />
</g>
<g id="i41">
<path fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M286.152,289.366
c0.494,0.659,1.747,1.046,2.234,0.157c0.299-0.543,0.242-1.372,0.311-1.975c0.108-0.953,0.216-1.905,0.325-2.857
c0.407-3.586,0.816-7.172,1.222-10.758c0.411-3.614,0.821-7.226,1.232-10.839c0.181-1.59,0.31-3.177,0.43-4.773
c0.116-1.523,0.425-3.128-0.072-4.617c-0.394-1.181-1.528-2.252-2.735-1.32c-0.979,0.756-1.268,2.125-1.398,3.284
c-0.385,3.426-0.504,6.909-0.65,10.352c-0.307,7.203-0.554,14.41-0.831,21.615C286.196,288.21,286.174,288.789,286.152,289.366
C286.869,290.323,286.369,283.732,286.152,289.366z" />
</g>
<g id="i44">
<path fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M284.545,282.443
c-1.306,0.302-2.611,0.604-3.917,0.905c-0.622,0.143-0.536,0.175-0.667-0.393c-0.451-1.953-0.903-3.906-1.354-5.859
c-1.545-6.685-3.09-13.371-4.635-20.056c-0.726-3.141-1.452-6.281-2.178-9.422c1.305-0.301,2.61-0.603,3.916-0.905
c0.621-0.144,0.536-0.175,0.667,0.393c0.451,1.953,0.903,3.906,1.354,5.859c1.545,6.685,3.09,13.37,4.634,20.056
C283.093,276.162,283.819,279.302,284.545,282.443z" />
</g>
<g id="i46">
<path fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M423.936,583.345
c-21.183,7.166-43.293,11.553-65.455,14.315c-26.043,3.248-52.389,4.188-78.607,3.127c-24.575-0.998-49.153-3.779-73.19-9.052
c-19.191-4.211-38.365-9.938-55.914-18.904c-11.948-6.104-24.488-14.176-31.417-26.049c-2.634-4.514-4.265-9.606-4.265-14.859
c0-5.254,1.631-10.348,4.265-14.861c6.929-11.876,19.468-19.945,31.417-26.053c17.549-8.967,36.723-14.692,55.914-18.902
c24.038-5.274,48.616-8.054,73.19-9.053c26.218-1.063,52.564-0.121,78.607,3.125c22.162,2.766,44.272,7.15,65.455,14.316
c15.722,5.318,31.66,12.167,44.57,22.815c8.617,7.112,16.458,16.899,16.458,28.612
C484.964,570.176,439.657,578.027,423.936,583.345z" />
</g>
<g id="i47">
<path fill="none" stroke="#231F20" stroke-width="1.091" stroke-miterlimit="10" d="M594.036,360.089
c-3.896,19.167-9.683,37.945-17.255,55.982c-7.442,17.732-16.607,34.739-27.311,50.716c-10.625,15.86-22.759,30.704-36.188,44.271
c-13.424,13.565-28.136,25.854-43.881,36.641c-15.854,10.864-32.753,20.203-50.392,27.83
c-17.933,7.755-36.624,13.738-55.726,17.838c-19.668,4.222-39.756,6.439-59.87,6.664c-20.195,0.224-40.411-1.559-60.247-5.361
c-19.234-3.691-38.1-9.281-56.238-16.666c-17.823-7.259-34.938-16.248-51.038-26.788c-15.973-10.461-30.945-22.443-44.655-35.731
c-13.703-13.281-26.141-27.861-37.091-43.488c-11.023-15.729-20.533-32.519-28.346-50.066c-7.936-17.825-14.115-36.43-18.417-55.46
c-4.427-19.582-6.864-39.605-7.308-59.675c-0.448-20.227,1.112-40.496,4.706-60.407c3.483-19.298,8.874-38.249,16.075-56.489
c7.071-17.913,15.884-35.133,26.262-51.354c10.292-16.085,22.121-31.186,35.269-45.037c13.135-13.838,27.583-26.426,43.092-37.537
c15.605-11.182,32.282-20.863,49.734-28.857c17.719-8.117,36.233-14.489,55.195-18.995c19.494-4.632,39.449-7.285,59.473-7.95
c20.25-0.672,40.568,0.668,60.545,4.048c19.363,3.275,38.397,8.465,56.739,15.479c17.999,6.884,35.324,15.519,51.666,25.733
c16.2,10.125,31.425,21.798,45.415,34.804c13.973,12.988,26.711,27.303,37.983,42.693c11.336,15.478,21.189,32.042,29.364,49.399
c8.296,17.612,14.861,36.035,19.569,54.925c4.834,19.405,7.702,39.291,8.59,59.268C599.95,291.018,598.051,340.334,594.036,360.089
z" />
</g>
</svg>
</div>
</div>
<script src="js/script.min.js"></script>
</body>
</html>