-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
434 lines (427 loc) · 53.4 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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Dynamowaves - SVG wave templates</title>
<meta name="description" content="SVG wave templates that shuffle themselves on render.">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#557c7c">
<meta property="og:title" content="Dynamowaves" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://dynamowaves.markzebley.com" />
<meta name="og:description" content="Lightweight, jQuery-based SVG wave templates that shuffle themselves on render.">
<meta name="msapplication-TileColor" content="#e4ecec">
<meta name="theme-color" content="#c5d8d7">
<meta name="viewport"
content="target-densitydpi=device-dpi, width=device-width, user-scalable=no, maximum-scale=1, minimum-scale=1, viewport-fit=cover">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/dark.min.css">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<a href="https://markzebley.com" target="_blank"><svg version="1.0" viewBox="0 0 598.000000 598.000000"
preserveAspectRatio="xMidYMid meet" fill="var(--theme)" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(0.000000,598.000000) scale(0.100000,-0.100000)" fill="inherit" stroke="none">
<path d="M4790 5795 c-19 -9 -44 -24 -55 -34 -23 -22 -155 -109 -251 -166 -59
-36 -273 -180 -299 -202 -5 -4 -44 -33 -85 -63 -41 -30 -77 -57 -80 -60 -3 -3
-36 -30 -75 -60 -89 -69 -84 -64 -159 -135 -65 -62 -236 -267 -236 -284 0 -5
-4 -11 -8 -13 -13 -5 -60 -110 -70 -156 -15 -66 4 -137 51 -184 16 -15 8 -37
-67 -201 -14 -32 -26 -59 -26 -61 0 -3 -15 -37 -33 -78 -41 -88 -47 -103 -104
-243 -25 -60 -53 -128 -63 -150 -10 -22 -44 -98 -75 -170 -32 -71 -77 -172
-101 -223 -24 -52 -44 -95 -44 -97 0 -2 -20 -46 -44 -97 -58 -123 -82 -179
-90 -203 -8 -25 -43 -71 -49 -65 -3 3 -1 28 5 55 5 28 11 59 12 70 2 19 14 88
22 130 2 11 6 31 9 45 7 35 12 58 25 115 6 28 13 59 16 70 2 11 10 47 19 80 8
33 17 71 19 85 2 14 5 25 6 25 1 0 4 11 6 25 3 14 9 43 15 65 6 22 13 49 15
60 2 11 11 52 19 90 8 39 17 81 19 95 2 14 9 45 15 70 5 25 12 56 15 70 2 14
14 69 26 124 24 111 28 129 35 171 3 17 8 37 10 45 12 43 27 191 29 290 5 184
-52 308 -167 364 -65 31 -123 43 -197 40 -143 -5 -202 -38 -285 -154 -22 -30
-42 -57 -46 -60 -3 -3 -8 -10 -10 -15 -6 -15 -123 -209 -129 -215 -3 -3 -19
-30 -34 -60 -16 -30 -33 -61 -39 -69 -6 -7 -12 -20 -13 -28 -2 -8 -9 -22 -17
-31 -8 -10 -36 -68 -62 -129 -27 -62 -51 -113 -54 -113 -3 0 -5 80 -3 179 2
193 -4 228 -54 304 -35 53 -114 88 -210 92 -40 1 -85 0 -99 -3 -41 -7 -83 -56
-163 -187 -40 -66 -78 -127 -83 -135 -64 -104 -240 -511 -326 -755 -13 -38
-31 -84 -39 -102 -8 -17 -14 -33 -14 -36 0 -3 -5 -18 -12 -34 -6 -15 -12 -31
-12 -35 -1 -3 -4 -10 -9 -14 -4 -4 -7 -18 -7 -30 0 -13 -4 -25 -9 -28 -5 -3
-11 -16 -14 -28 -7 -32 -87 -251 -93 -258 -6 -5 1 44 11 85 2 11 9 40 16 65 6
25 12 54 15 65 4 23 28 127 54 240 29 123 49 215 59 275 6 30 12 64 14 75 31
146 37 322 14 377 -33 76 -120 120 -246 124 -110 4 -149 -14 -179 -84 -12 -26
-23 -60 -26 -75 -2 -15 -7 -30 -10 -35 -3 -5 -7 -19 -10 -33 -3 -13 -10 -44
-17 -69 -6 -25 -12 -52 -14 -60 -2 -8 -10 -40 -19 -70 -8 -30 -18 -66 -20 -80
-3 -14 -13 -54 -22 -90 -9 -36 -31 -132 -50 -215 -19 -82 -37 -159 -40 -170
-2 -11 -6 -31 -9 -46 -2 -14 -18 -84 -34 -155 -25 -111 -46 -216 -65 -324 -2
-14 -7 -36 -10 -50 -6 -29 -13 -86 -21 -181 -32 -368 -8 -714 57 -825 57 -97
237 -72 343 49 25 28 45 57 45 65 0 12 116 365 145 442 8 19 39 116 70 215 31
99 62 196 70 215 12 31 69 203 80 240 2 8 18 56 35 105 17 50 33 99 35 110 4
18 9 32 31 90 4 11 8 27 10 36 2 9 13 37 24 63 11 26 20 52 20 57 0 36 179
441 201 455 13 8 11 -35 -5 -96 -16 -60 -62 -275 -71 -330 -3 -19 -7 -46 -10
-60 -8 -41 -20 -125 -30 -210 -3 -19 -8 -62 -12 -95 -10 -76 -10 -358 0 -408
12 -64 46 -149 68 -173 19 -21 72 -47 81 -39 1 1 33 5 70 9 102 9 160 39 209
107 17 25 90 233 104 300 2 8 20 69 40 134 21 65 38 124 40 129 1 6 5 18 8 26
4 8 22 62 41 120 53 161 205 569 226 608 5 9 40 80 78 157 38 77 78 156 90
175 12 19 29 49 37 67 9 18 23 37 31 44 8 6 14 16 14 21 0 5 17 35 38 66 20
31 42 65 47 76 14 27 30 21 29 -12 -1 -32 -51 -269 -95 -451 -16 -69 -32 -142
-35 -161 -3 -19 -7 -43 -10 -52 -5 -18 -8 -30 -18 -98 -3 -19 -8 -46 -10 -60
-3 -14 -7 -43 -11 -65 -3 -22 -7 -53 -10 -70 -8 -49 -13 -96 -20 -160 -3 -33
-8 -69 -10 -80 -2 -11 -7 -56 -10 -100 -4 -44 -8 -96 -11 -115 -22 -183 -22
-370 1 -539 12 -90 72 -203 117 -222 59 -24 190 10 257 68 41 34 121 142 121
162 0 5 3 11 8 13 9 4 101 194 137 283 15 39 34 84 40 100 7 17 41 104 75 195
34 91 65 174 70 185 33 81 53 131 55 140 1 5 7 24 14 40 6 17 16 41 21 55 5
14 15 39 21 55 7 17 13 35 15 40 1 6 8 24 15 40 7 17 13 32 14 35 2 6 7 19 57
140 22 52 41 100 42 105 2 6 7 19 11 30 50 124 78 192 83 200 4 6 7 16 9 24 4
27 21 35 45 19 37 -23 109 -42 150 -39 50 3 64 73 22 112 -14 13 -32 36 -39
50 -13 23 -11 31 12 75 31 60 84 135 132 187 100 111 287 279 441 397 25 19
54 43 64 52 17 16 36 24 36 16 0 -2 -16 -34 -36 -73 -152 -294 -388 -775 -454
-924 -21 -47 -54 -122 -75 -166 -20 -44 -48 -105 -61 -135 -14 -30 -29 -63
-34 -72 -6 -10 -10 -25 -10 -33 0 -8 -5 -15 -10 -15 -6 0 -9 -3 -8 -7 1 -5
-11 -46 -28 -93 -75 -206 -80 -292 -23 -350 28 -27 85 -51 135 -55 44 -4 129
26 170 60 23 19 47 35 53 35 6 0 11 4 11 9 0 5 8 12 18 15 10 3 38 24 62 46
25 22 76 58 113 80 66 39 68 39 86 21 17 -17 45 -117 54 -196 4 -29 -10 -85
-23 -95 -10 -8 -257 -407 -330 -535 -9 -16 -55 -95 -101 -175 -115 -200 -132
-232 -271 -511 -123 -244 -156 -316 -206 -439 -15 -36 -29 -67 -32 -70 -3 -3
-6 -9 -7 -15 -1 -5 -17 -55 -36 -110 -31 -89 -59 -182 -72 -240 -3 -11 -7 -30
-10 -43 -24 -106 -40 -191 -52 -282 -12 -86 -8 -290 6 -333 7 -21 14 -44 15
-50 1 -7 10 -29 19 -51 9 -21 17 -42 17 -47 0 -5 5 -9 10 -9 6 0 10 -6 10 -13
0 -7 19 -31 43 -54 111 -107 247 -99 426 26 36 24 74 52 84 60 48 38 176 171
214 221 24 30 49 62 56 70 40 43 218 371 232 425 3 14 15 45 31 82 40 90 188
519 198 573 2 14 9 36 14 50 5 14 10 27 10 30 0 3 5 25 12 50 7 25 14 52 16
60 36 144 45 179 49 202 3 16 12 56 20 90 8 35 17 79 20 98 3 19 10 53 15 75
5 22 11 56 14 75 3 19 8 46 11 60 22 107 47 270 61 395 11 107 13 138 13 280
0 137 -2 184 -13 235 -3 14 -7 36 -10 50 -3 14 -21 56 -41 93 -19 37 -35 71
-35 76 0 7 279 436 298 456 5 6 11 15 13 20 2 6 35 57 73 115 38 58 113 173
167 255 54 83 103 157 109 165 130 191 213 325 216 347 3 20 -16 16 -51 -11
-26 -20 -130 -152 -234 -296 -14 -19 -27 -37 -30 -40 -4 -3 -10 -13 -16 -22
-5 -9 -98 -142 -205 -294 -107 -152 -222 -316 -254 -363 -33 -47 -62 -88 -65
-91 -4 -3 -29 -38 -56 -78 -27 -41 -53 -76 -58 -79 -4 -2 -22 1 -41 7 -62 20
-81 23 -161 24 -81 1 -146 -7 -192 -25 -13 -5 -26 -9 -28 -9 -9 0 24 71 177
380 91 184 188 382 216 440 27 58 92 191 142 295 168 346 230 475 230 480 0 2
11 28 24 57 26 58 64 172 72 212 22 121 -216 259 -346 201z m-356 -2837 c-1
-74 -5 -134 -20 -305 -15 -184 -23 -265 -30 -296 -2 -12 -7 -40 -10 -62 -2
-22 -6 -51 -9 -65 -12 -81 -18 -117 -21 -135 -10 -51 -24 -134 -30 -170 -3
-22 -15 -78 -25 -125 -11 -47 -22 -96 -25 -110 -3 -14 -7 -33 -10 -42 -3 -9
-6 -25 -8 -35 -10 -49 -95 -353 -106 -378 -4 -11 -22 -63 -39 -115 -125 -394
-284 -688 -366 -677 -38 5 -137 73 -166 115 -71 99 -90 284 -53 502 8 49 66
237 109 355 20 55 38 107 40 115 5 23 122 305 163 395 70 153 316 632 384 748
15 26 28 50 28 53 0 3 36 68 79 144 44 77 77 140 74 140 -3 0 2 9 12 20 10 11
21 18 24 16 4 -3 6 -42 5 -88z"></path>
</g>
</svg></a>
<svg viewBox="34.466 217.838 431.068 64.325" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clip-0">
<path
d="M 213.238 250.328 C 213.238 250.328 219.068 252.487 230.345 242.882 C 239.841 234.793 253.567 250.328 253.567 250.328 L 253.574 270.913 L 213.245 270.913 L 213.24 256.761 L 213.238 250.328 Z"
style="fill: rgb(194, 138, 138);"
transform="matrix(0.408477, -0.912769, 0.912769, 0.408477, -95.357839, 364.316192)"></path>
</clipPath>
<clipPath id="clip-1">
<ellipse style="fill: rgb(216, 216, 216);" cx="229.25" cy="253.544" rx="15.924" ry="15.924"
transform="matrix(0.408142, 0.912919, -0.91274, 0.40854, 368.368895, -57.437096)"></ellipse>
</clipPath>
<clipPath id="clip-2">
<ellipse style="fill: rgb(216, 216, 216);" cx="229.25" cy="253.544" rx="15.924" ry="15.924"
transform="matrix(0.408139, 0.91292, -0.912739, 0.408543, 368.368727, -57.437896)"></ellipse>
</clipPath>
</defs>
<path
d="M 50.402 268.989 C 48.055 268.989 45.922 268.424 44.002 267.293 C 42.082 266.162 40.557 264.594 39.426 262.589 C 38.295 260.584 37.73 258.322 37.73 255.805 C 37.73 253.117 38.306 250.792 39.458 248.829 C 40.61 246.866 42.178 245.352 44.162 244.285 C 46.146 243.218 48.333 242.685 50.722 242.685 C 53.111 242.685 55.383 243.304 57.538 244.541 C 59.693 245.778 61.261 247.4 62.242 249.405 L 61.73 250.813 L 61.73 219.837 L 64.738 219.837 L 64.738 268.477 L 61.666 268.477 L 61.666 260.797 L 62.306 262.205 C 61.239 264.21 59.639 265.842 57.506 267.101 C 55.373 268.36 53.005 268.989 50.402 268.989 Z M 51.17 266.365 C 53.09 266.365 54.818 265.949 56.354 265.117 C 57.89 264.285 59.127 263.154 60.066 261.725 C 61.005 260.296 61.538 258.685 61.666 256.893 L 61.666 253.693 C 61.367 252.072 60.706 250.621 59.682 249.341 C 58.658 248.061 57.421 247.048 55.97 246.301 C 54.519 245.554 52.919 245.181 51.17 245.181 C 49.25 245.181 47.501 245.629 45.922 246.525 C 44.343 247.421 43.085 248.658 42.146 250.237 C 41.207 251.816 40.738 253.65 40.738 255.741 C 40.738 257.704 41.207 259.485 42.146 261.085 C 43.085 262.685 44.354 263.965 45.954 264.925 C 47.554 265.885 49.293 266.365 51.17 266.365 Z M 77.429 280.509 L 93.749 243.453 L 96.693 243.453 L 80.565 280.509 L 77.429 280.509 Z M 83.061 268.733 L 71.221 243.453 L 74.613 243.453 L 85.429 267.133 L 83.061 268.733 Z M 105.807 243.453 L 106.127 251.325 L 105.743 249.789 C 106.468 247.613 107.844 245.896 109.871 244.637 C 111.898 243.378 114.148 242.749 116.623 242.749 C 118.97 242.749 120.868 243.442 122.319 244.829 C 123.77 246.216 124.516 248.018 124.559 250.237 L 124.559 268.477 L 121.487 268.477 L 121.487 251.069 C 121.444 249.448 120.932 248.104 119.951 247.037 C 118.97 245.97 117.54 245.416 115.663 245.373 C 113.999 245.373 112.442 245.778 110.991 246.589 C 109.54 247.4 108.378 248.53 107.503 249.981 C 106.628 251.432 106.191 253.117 106.191 255.037 L 106.191 268.477 L 103.183 268.477 L 103.183 243.453 L 105.807 243.453 Z M 145.318 268.989 C 142.929 268.989 140.763 268.445 138.822 267.357 C 136.881 266.269 135.345 264.744 134.214 262.781 C 133.083 260.818 132.518 258.536 132.518 255.933 C 132.518 253.16 133.115 250.781 134.31 248.797 C 135.505 246.813 137.126 245.298 139.174 244.253 C 141.222 243.208 143.547 242.685 146.15 242.685 C 148.369 242.685 150.47 243.346 152.454 244.669 C 154.438 245.992 155.857 247.656 156.71 249.661 L 156.262 250.557 L 156.646 243.453 L 159.334 243.453 L 159.334 268.477 L 156.326 268.477 L 156.326 260.733 L 156.966 261.885 C 156.667 262.738 156.155 263.581 155.43 264.413 C 154.705 265.245 153.819 266.013 152.774 266.717 C 151.729 267.421 150.577 267.976 149.318 268.381 C 148.059 268.786 146.726 268.989 145.318 268.989 Z M 145.958 266.429 C 147.835 266.429 149.531 266.034 151.046 265.245 C 152.561 264.456 153.787 263.357 154.726 261.949 C 155.665 260.541 156.198 258.92 156.326 257.085 L 156.326 253.501 C 155.985 251.922 155.313 250.514 154.31 249.277 C 153.307 248.04 152.081 247.058 150.63 246.333 C 149.179 245.608 147.601 245.245 145.894 245.245 C 144.017 245.245 142.289 245.682 140.71 246.557 C 139.131 247.432 137.873 248.658 136.934 250.237 C 135.995 251.816 135.526 253.672 135.526 255.805 C 135.526 257.768 135.995 259.549 136.934 261.149 C 137.873 262.749 139.142 264.029 140.742 264.989 C 142.342 265.949 144.081 266.429 145.958 266.429 Z M 172.345 243.453 L 172.665 250.429 L 172.217 249.789 C 173.07 247.613 174.489 245.896 176.473 244.637 C 178.457 243.378 180.622 242.749 182.969 242.749 C 184.377 242.749 185.646 243.016 186.777 243.549 C 187.908 244.082 188.825 244.808 189.529 245.725 C 190.233 246.642 190.649 247.698 190.777 248.893 L 190.393 249.277 C 191.289 247.144 192.697 245.522 194.617 244.413 C 196.537 243.304 198.606 242.749 200.825 242.749 C 203.214 242.749 205.113 243.442 206.521 244.829 C 207.929 246.216 208.654 248.018 208.697 250.237 L 208.697 268.477 L 205.689 268.477 L 205.689 250.877 C 205.646 249.384 205.177 248.114 204.281 247.069 C 203.385 246.024 202.02 245.458 200.185 245.373 C 198.521 245.373 196.985 245.8 195.577 246.653 C 194.169 247.506 193.028 248.637 192.153 250.045 C 191.278 251.453 190.798 253.032 190.713 254.781 L 190.713 268.477 L 187.705 268.477 L 187.705 250.877 C 187.662 249.384 187.182 248.114 186.265 247.069 C 185.348 246.024 183.972 245.458 182.137 245.373 C 180.43 245.373 178.862 245.8 177.433 246.653 C 176.004 247.506 174.862 248.669 174.009 250.141 C 173.156 251.613 172.729 253.245 172.729 255.037 L 172.729 268.477 L 169.721 268.477 L 169.721 243.453 L 172.345 243.453 Z M 216.66 255.805 C 216.66 253.373 217.247 251.154 218.42 249.149 C 219.593 247.144 221.193 245.554 223.22 244.381 C 225.247 243.208 227.519 242.621 230.036 242.621 C 232.596 242.621 234.879 243.208 236.884 244.381 C 238.889 245.554 240.468 247.144 241.62 249.149 C 242.772 251.154 243.348 253.373 243.348 255.805 C 243.348 258.237 242.772 260.456 241.62 262.461 C 240.468 264.466 238.879 266.056 236.852 267.229 C 234.825 268.402 232.553 268.989 230.036 268.989 C 227.476 268.989 225.193 268.424 223.188 267.293 C 221.183 266.162 219.593 264.605 218.42 262.621 C 217.247 260.637 216.66 258.365 216.66 255.805 Z M 219.668 255.869 C 219.668 257.832 220.127 259.613 221.044 261.213 C 221.961 262.813 223.199 264.082 224.756 265.021 C 226.313 265.96 228.052 266.429 229.972 266.429 C 231.892 266.429 233.631 265.96 235.188 265.021 C 236.745 264.082 237.983 262.813 238.9 261.213 C 239.817 259.613 240.276 257.832 240.276 255.869 C 240.276 253.906 239.817 252.125 238.9 250.525 C 237.983 248.925 236.745 247.645 235.188 246.685 C 233.631 245.725 231.892 245.245 229.972 245.245 C 228.009 245.245 226.249 245.746 224.692 246.749 C 223.135 247.752 221.908 249.064 221.012 250.685 C 220.116 252.306 219.668 254.034 219.668 255.869 Z"
style="white-space: pre; fill: rgb(43, 64, 63); stroke: rgb(43, 64, 63);"></path>
<path
d="M 50.402 269.489 C 47.991 269.489 45.726 268.889 43.748 267.724 C 41.771 266.56 40.152 264.896 38.99 262.835 C 37.827 260.771 37.23 258.383 37.23 255.805 C 37.23 253.057 37.839 250.6 39.027 248.576 C 40.213 246.555 41.881 244.943 43.925 243.845 C 45.965 242.748 48.273 242.185 50.722 242.185 C 53.177 242.185 55.578 242.839 57.787 244.107 C 59.649 245.177 60.306 245.849 61.23 246.947 L 61.23 219.337 L 65.238 219.337 L 65.238 268.977 L 61.166 268.977 L 61.166 264.73 C 60.226 265.804 59.548 266.477 57.76 267.532 C 55.569 268.825 53.069 269.489 50.402 269.489 Z M 57.252 266.67 C 58.949 265.669 60.259 264.472 61.252 262.99 L 62.166 261.625 L 62.166 267.977 L 64.238 267.977 L 64.238 220.337 L 62.23 220.337 L 62.23 250.25 L 61.305 248.742 C 60.364 247.208 59.051 245.987 57.289 244.975 C 55.189 243.769 53.046 243.185 50.722 243.185 C 48.392 243.185 46.327 243.688 44.399 244.725 C 42.475 245.76 41.007 247.177 39.889 249.082 C 38.773 250.984 38.23 253.177 38.23 255.805 C 38.23 258.262 38.763 260.396 39.862 262.343 C 40.961 264.293 42.393 265.765 44.256 266.862 C 46.118 267.959 48.119 268.489 50.402 268.489 C 52.94 268.489 55.177 267.895 57.252 266.67 Z M 45.697 265.354 C 44.044 264.362 42.685 262.991 41.715 261.338 C 40.742 259.68 40.238 257.767 40.238 255.741 C 40.238 253.588 40.742 251.621 41.716 249.981 C 42.687 248.348 44.04 247.018 45.675 246.09 C 47.311 245.162 49.188 244.681 51.17 244.681 C 52.976 244.681 54.694 245.082 56.199 245.856 C 57.696 246.627 59.016 247.708 60.072 249.029 C 61.135 250.356 61.841 251.923 62.158 253.602 L 62.166 253.646 L 62.166 253.693 L 62.165 256.929 C 62.025 258.781 61.458 260.516 60.484 261.999 C 59.511 263.48 58.181 264.696 56.592 265.557 C 55 266.419 53.149 266.865 51.17 266.865 C 49.226 266.865 47.354 266.348 45.697 265.354 Z M 51.17 265.865 C 53.031 265.865 54.636 265.479 56.116 264.677 C 57.599 263.874 58.743 262.828 59.648 261.451 C 60.551 260.075 61.048 258.599 61.166 256.876 L 61.166 253.738 C 60.882 252.195 60.277 250.886 59.292 249.653 C 58.3 248.414 57.145 247.468 55.741 246.746 C 54.345 246.027 52.863 245.681 51.17 245.681 C 49.312 245.681 47.69 246.096 46.169 246.96 C 44.646 247.824 43.482 248.969 42.576 250.493 C 41.673 252.011 41.238 253.712 41.238 255.741 C 41.238 257.64 41.673 259.29 42.577 260.832 C 43.485 262.378 44.664 263.568 46.211 264.496 C 47.754 265.422 49.359 265.865 51.17 265.865 Z M 82.282 268.249 L 70.435 242.953 L 74.934 242.953 L 84.347 263.561 L 93.423 242.953 L 97.456 242.953 L 80.893 281.009 L 76.662 281.009 L 82.282 268.249 Z M 80.237 280.009 L 95.93 243.953 L 94.075 243.953 L 84.364 266.004 L 74.292 243.953 L 72.007 243.953 L 83.38 268.236 L 78.196 280.009 L 80.237 280.009 Z M 106.46 247.214 C 107.261 246.033 107.763 245.358 109.607 244.212 C 111.693 242.917 114.081 242.249 116.623 242.249 C 119.055 242.249 121.141 243.012 122.664 244.468 C 124.188 245.924 124.997 247.927 125.059 250.237 L 125.059 268.977 L 120.987 268.977 L 120.987 251.072 C 120.959 249.538 120.502 248.374 119.583 247.376 C 118.676 246.39 117.448 245.9 115.659 245.873 C 114.06 245.866 112.631 246.246 111.235 247.025 C 109.841 247.805 108.773 248.843 107.931 250.239 C 107.093 251.629 106.683 253.18 106.691 255.037 L 106.691 268.977 L 102.683 268.977 L 102.683 242.953 L 106.287 242.953 L 106.46 247.214 Z M 103.683 243.953 L 103.683 267.977 L 105.691 267.977 L 105.691 255.037 C 105.699 253.054 106.163 251.234 107.075 249.723 C 107.982 248.218 109.24 246.995 110.747 246.153 C 112.253 245.311 113.936 244.881 115.663 244.873 C 117.625 244.933 119.263 245.551 120.319 246.698 C 121.363 247.833 121.928 249.352 121.987 251.056 L 121.987 267.977 L 124.059 267.977 L 124.059 250.239 C 124.034 248.115 123.351 246.507 121.974 245.19 C 120.595 243.873 118.884 243.249 116.623 243.249 C 114.216 243.249 112.102 243.84 110.135 245.062 C 108.414 246.13 107.227 247.469 106.493 249.219 L 105.625 251.289 L 105.327 243.953 L 103.683 243.953 Z M 145.318 269.489 C 142.868 269.489 140.576 268.913 138.578 267.793 C 136.578 266.672 134.944 265.05 133.781 263.031 C 132.616 261.008 132.018 258.596 132.018 255.933 C 132.018 253.099 132.649 250.586 133.882 248.539 C 135.112 246.496 136.837 244.884 138.947 243.808 C 141.05 242.734 143.493 242.185 146.15 242.185 C 148.444 242.185 150.689 242.892 152.731 244.253 C 154.509 245.438 155.096 246.139 155.938 247.296 L 156.172 242.953 L 159.834 242.953 L 159.834 268.977 L 155.826 268.977 L 155.826 264.72 C 155.82 264.727 155.813 264.734 155.807 264.742 C 155.059 265.6 154.124 266.411 153.053 267.132 C 151.978 267.856 150.762 268.441 149.471 268.857 C 148.175 269.275 146.764 269.489 145.318 269.489 Z M 149.165 267.905 C 150.391 267.51 151.479 266.986 152.495 266.302 C 153.515 265.615 154.351 264.89 155.053 264.084 C 155.388 263.7 155.663 263.332 155.901 262.946 L 156.826 261.443 L 156.826 267.977 L 158.834 267.977 L 158.834 243.953 L 157.12 243.953 L 156.751 250.77 L 155.908 249.133 C 155.076 247.517 153.856 246.204 152.177 245.085 C 150.251 243.801 148.294 243.185 146.15 243.185 C 143.602 243.185 141.394 243.681 139.401 244.698 C 137.415 245.712 135.898 247.13 134.738 249.055 C 133.581 250.976 133.018 253.221 133.018 255.933 C 133.018 258.476 133.551 260.629 134.647 262.531 C 135.745 264.437 137.184 265.866 139.066 266.921 C 140.951 267.977 142.99 268.489 145.318 268.489 C 146.688 268.489 147.944 268.298 149.165 267.905 Z M 140.485 265.418 C 138.832 264.426 137.473 263.056 136.503 261.402 C 135.53 259.744 135.026 257.831 135.026 255.805 C 135.026 253.61 135.529 251.621 136.504 249.981 C 137.476 248.347 138.831 247.026 140.468 246.12 C 142.102 245.214 143.955 244.745 145.894 244.745 C 147.657 244.745 149.35 245.134 150.854 245.886 C 152.351 246.635 153.662 247.683 154.698 248.962 C 155.738 250.245 156.455 251.762 156.815 253.395 L 156.826 253.447 L 156.826 253.501 L 156.825 257.12 C 156.685 259.015 156.118 260.763 155.142 262.226 C 154.169 263.686 152.847 264.87 151.277 265.688 C 149.707 266.507 147.892 266.929 145.958 266.929 C 144.014 266.929 142.142 266.412 140.485 265.418 Z M 145.958 265.929 C 147.779 265.929 149.355 265.562 150.815 264.802 C 152.275 264.041 153.406 263.028 154.31 261.672 C 155.212 260.319 155.708 258.834 155.826 257.069 L 155.826 253.554 C 155.5 252.053 154.887 250.784 153.922 249.592 C 152.952 248.396 151.81 247.482 150.406 246.78 C 149.008 246.081 147.545 245.745 145.894 245.745 C 144.078 245.745 142.475 246.151 140.952 246.994 C 139.431 247.837 138.269 248.969 137.364 250.493 C 136.461 252.01 136.026 253.733 136.026 255.805 C 136.026 257.704 136.461 259.354 137.365 260.896 C 138.273 262.442 139.452 263.632 140.999 264.56 C 142.542 265.486 144.147 265.929 145.958 265.929 Z M 173.019 247.244 C 173.86 246.052 174.434 245.338 176.205 244.215 C 178.248 242.919 180.553 242.249 182.969 242.249 C 184.428 242.249 185.807 242.539 186.99 243.097 C 188.172 243.654 189.184 244.455 189.926 245.421 C 190.598 246.297 190.677 246.588 190.911 247.247 C 191.803 245.903 192.611 244.995 194.367 243.98 C 196.343 242.838 198.542 242.249 200.825 242.249 C 203.3 242.249 205.39 243.013 206.872 244.473 C 208.351 245.929 209.136 247.93 209.197 250.237 L 209.197 268.977 L 205.189 268.977 L 205.189 250.881 C 205.16 249.472 204.741 248.374 203.901 247.394 C 203.079 246.435 201.918 245.941 200.174 245.873 C 198.582 245.866 197.186 246.262 195.836 247.081 C 194.478 247.904 193.422 248.95 192.578 250.309 C 191.737 251.662 191.29 253.109 191.213 254.792 L 191.213 268.977 L 187.205 268.977 L 187.205 250.881 C 187.177 249.474 186.749 248.378 185.889 247.399 C 185.045 246.437 183.871 245.942 182.126 245.873 C 180.49 245.866 179.061 246.263 177.689 247.082 C 176.314 247.903 175.264 248.973 174.442 250.392 C 173.622 251.806 173.221 253.308 173.229 255.037 L 173.229 268.977 L 169.221 268.977 L 169.221 242.953 L 172.823 242.953 L 173.019 247.244 Z M 170.221 243.953 L 170.221 267.977 L 172.229 267.977 L 172.229 255.037 C 172.237 253.182 172.69 251.42 173.576 249.89 C 174.461 248.365 175.693 247.11 177.177 246.224 C 178.664 245.336 180.365 244.882 182.137 244.873 C 184.055 244.977 185.65 245.61 186.641 246.739 C 187.616 247.851 188.146 249.288 188.205 250.863 L 188.205 267.977 L 190.213 267.977 L 190.213 254.781 C 190.309 252.971 190.82 251.244 191.728 249.781 C 192.634 248.324 193.86 247.109 195.318 246.225 C 196.784 245.337 198.454 244.882 200.185 244.873 C 202.104 244.977 203.691 245.612 204.661 246.744 C 205.613 247.855 206.131 249.29 206.189 250.863 L 206.189 267.977 L 208.197 267.977 L 208.197 250.239 C 208.171 248.113 207.507 246.502 206.17 245.185 C 204.836 243.871 203.129 243.249 200.825 243.249 C 198.671 243.249 196.731 243.769 194.867 244.846 C 193.236 245.789 192.033 247.053 191.177 248.77 L 190.472 250.185 L 190.237 248.623 C 190.087 247.629 189.729 246.807 189.132 246.029 C 188.466 245.161 187.643 244.51 186.564 244.001 C 185.485 243.493 184.326 243.249 182.969 243.249 C 180.692 243.249 178.666 243.838 176.741 245.059 C 175.083 246.111 173.876 247.433 173.045 249.148 L 172.187 250.918 L 171.867 243.953 L 170.221 243.953 Z M 216.16 255.805 C 216.16 253.309 216.781 250.96 217.988 248.896 C 219.194 246.836 220.888 245.153 222.969 243.948 C 225.054 242.741 227.456 242.121 230.036 242.121 C 232.658 242.121 235.072 242.741 237.137 243.949 C 239.197 245.155 240.869 246.839 242.054 248.9 C 243.238 250.963 243.848 253.31 243.848 255.805 C 243.848 258.3 243.238 260.647 242.054 262.71 C 240.869 264.772 239.185 266.456 237.103 267.662 C 235.018 268.869 232.616 269.489 230.036 269.489 C 227.416 269.489 225.006 268.892 222.942 267.729 C 220.881 266.566 219.196 264.915 217.99 262.875 C 216.781 260.832 216.16 258.427 216.16 255.805 Z M 218.85 262.366 C 219.991 264.295 221.485 265.759 223.434 266.857 C 225.381 267.955 227.536 268.489 230.036 268.489 C 232.491 268.489 234.633 267.936 236.601 266.796 C 238.572 265.655 240.067 264.161 241.186 262.212 C 242.306 260.264 242.848 258.174 242.848 255.805 C 242.848 253.436 242.306 251.346 241.186 249.398 C 240.067 247.449 238.581 245.954 236.632 244.813 C 234.685 243.674 232.534 243.121 230.036 243.121 C 227.581 243.121 225.439 243.674 223.471 244.814 C 221.499 245.955 219.993 247.452 218.852 249.401 C 217.712 251.349 217.16 253.437 217.16 255.805 C 217.16 258.302 217.712 260.442 218.85 262.366 Z M 220.574 250.443 C 221.5 248.768 222.813 247.364 224.421 246.329 C 226.04 245.287 227.941 244.745 229.972 244.745 C 231.959 244.745 233.834 245.263 235.45 246.259 C 237.06 247.252 238.386 248.623 239.334 250.276 C 240.284 251.934 240.776 253.844 240.776 255.869 C 240.776 257.894 240.284 259.804 239.334 261.462 C 238.385 263.116 237.058 264.478 235.446 265.449 C 233.83 266.423 231.957 266.929 229.972 266.929 C 227.987 266.929 226.114 266.423 224.498 265.449 C 222.886 264.478 221.559 263.116 220.61 261.462 C 219.66 259.804 219.168 257.894 219.168 255.869 C 219.168 253.972 219.648 252.119 220.574 250.443 Z M 220.168 255.869 C 220.168 257.769 220.593 259.422 221.478 260.964 C 222.364 262.51 223.511 263.687 225.014 264.593 C 226.513 265.496 228.117 265.929 229.972 265.929 C 231.827 265.929 233.431 265.496 234.93 264.593 C 236.433 263.687 237.58 262.51 238.466 260.964 C 239.351 259.422 239.776 257.769 239.776 255.869 C 239.776 253.969 239.351 252.316 238.466 250.774 C 237.579 249.227 236.43 248.038 234.926 247.111 C 233.428 246.187 231.825 245.745 229.972 245.745 C 228.078 245.745 226.459 246.206 224.963 247.169 C 223.457 248.139 222.316 249.359 221.45 250.927 C 220.584 252.494 220.168 254.097 220.168 255.869 Z"
style="fill: none;"></path>
<path
d="M 270.196 240.509 L 276.34 254.909 L 274.676 255.037 L 280.052 240.509 L 288.756 240.509 L 276.148 270.141 L 267.188 251.581 L 258.996 270.141 L 246.26 240.509 L 254.964 240.509 L 261.748 256.061 L 258.676 255.613 L 264.052 243.709 L 262.58 240.509 L 270.196 240.509 Z M 303.489 269.245 C 300.886 269.245 298.529 268.722 296.417 267.677 C 294.305 266.632 292.63 265.021 291.393 262.845 C 290.156 260.669 289.537 257.896 289.537 254.525 C 289.537 251.368 290.177 248.637 291.457 246.333 C 292.737 244.029 294.422 242.248 296.513 240.989 C 298.604 239.73 300.822 239.101 303.169 239.101 C 305.942 239.101 308.044 239.56 309.473 240.477 C 310.902 241.394 312.086 242.408 313.025 243.517 L 312.641 244.605 L 313.473 240.509 L 321.793 240.509 L 321.793 268.477 L 312.833 268.477 L 312.833 262.397 L 313.537 264.317 C 313.452 264.317 313.196 264.562 312.769 265.053 C 312.342 265.544 311.713 266.12 310.881 266.781 C 310.049 267.442 309.025 268.018 307.809 268.509 C 306.593 269 305.153 269.245 303.489 269.245 Z M 306.049 261.949 C 307.116 261.949 308.076 261.789 308.929 261.469 C 309.782 261.149 310.529 260.68 311.169 260.061 C 311.809 259.442 312.364 258.664 312.833 257.725 L 312.833 250.877 C 312.492 249.938 311.98 249.138 311.297 248.477 C 310.614 247.816 309.804 247.304 308.865 246.941 C 307.926 246.578 306.881 246.397 305.729 246.397 C 304.449 246.397 303.265 246.728 302.177 247.389 C 301.089 248.05 300.225 248.957 299.585 250.109 C 298.945 251.261 298.625 252.584 298.625 254.077 C 298.625 255.57 298.966 256.914 299.649 258.109 C 300.332 259.304 301.238 260.242 302.369 260.925 C 303.5 261.608 304.726 261.949 306.049 261.949 Z M 342.812 269.053 L 326.044 240.509 L 336.668 240.509 L 346.204 259.837 L 340.7 259.645 L 348.956 240.509 L 358.94 240.509 L 343.068 269.053 L 342.812 269.053 Z M 375.986 269.245 C 372.573 269.245 369.682 268.605 367.314 267.325 C 364.946 266.045 363.143 264.274 361.906 262.013 C 360.669 259.752 360.05 257.149 360.05 254.205 C 360.05 251.389 360.775 248.85 362.226 246.589 C 363.677 244.328 365.618 242.525 368.05 241.181 C 370.482 239.837 373.191 239.165 376.178 239.165 C 380.189 239.165 383.485 240.328 386.066 242.653 C 388.647 244.978 390.322 248.338 391.09 252.733 L 369.33 259.645 L 367.346 254.781 L 383.09 249.469 L 381.234 250.301 C 380.893 249.192 380.285 248.221 379.41 247.389 C 378.535 246.557 377.223 246.141 375.474 246.141 C 374.151 246.141 372.989 246.45 371.986 247.069 C 370.983 247.688 370.215 248.562 369.682 249.693 C 369.149 250.824 368.882 252.157 368.882 253.693 C 368.882 255.442 369.202 256.904 369.842 258.077 C 370.482 259.25 371.357 260.136 372.466 260.733 C 373.575 261.33 374.813 261.629 376.178 261.629 C 377.159 261.629 378.109 261.458 379.026 261.117 C 379.943 260.776 380.85 260.328 381.746 259.773 L 385.714 266.429 C 384.221 267.282 382.61 267.965 380.882 268.477 C 379.154 268.989 377.522 269.245 375.986 269.245 Z M 405.712 269.053 C 403.408 269.053 401.264 268.648 399.28 267.837 C 397.296 267.026 395.621 265.896 394.256 264.445 L 397.968 259.517 C 399.333 260.754 400.603 261.64 401.776 262.173 C 402.949 262.706 404.005 262.973 404.944 262.973 C 405.669 262.973 406.32 262.898 406.896 262.749 C 407.472 262.6 407.931 262.365 408.272 262.045 C 408.613 261.725 408.784 261.309 408.784 260.797 C 408.784 260.072 408.496 259.496 407.92 259.069 C 407.344 258.642 406.608 258.29 405.712 258.013 C 404.816 257.736 403.856 257.448 402.832 257.149 C 400.272 256.338 398.427 255.154 397.296 253.597 C 396.165 252.04 395.6 250.344 395.6 248.509 C 395.6 247.101 395.973 245.682 396.72 244.253 C 397.467 242.824 398.661 241.629 400.304 240.669 C 401.947 239.709 404.069 239.229 406.672 239.229 C 409.019 239.229 411.003 239.464 412.624 239.933 C 414.245 240.402 415.781 241.17 417.232 242.237 L 413.84 247.485 C 413.029 246.845 412.123 246.301 411.12 245.853 C 410.117 245.405 409.189 245.16 408.336 245.117 C 407.568 245.074 406.917 245.16 406.384 245.373 C 405.851 245.586 405.435 245.864 405.136 246.205 C 404.837 246.546 404.688 246.909 404.688 247.293 C 404.645 248.104 404.955 248.744 405.616 249.213 C 406.277 249.682 407.12 250.045 408.144 250.301 C 409.168 250.557 410.171 250.856 411.152 251.197 C 412.517 251.624 413.691 252.2 414.672 252.925 C 415.653 253.65 416.411 254.514 416.944 255.517 C 417.477 256.52 417.744 257.725 417.744 259.133 C 417.744 260.84 417.307 262.45 416.432 263.965 C 415.557 265.48 414.235 266.706 412.464 267.645 C 410.693 268.584 408.443 269.053 405.712 269.053 Z M 420.576 263.869 C 420.576 262.546 421.056 261.437 422.016 260.541 C 422.976 259.645 424.032 259.197 425.184 259.197 C 426.251 259.197 427.264 259.645 428.224 260.541 C 429.184 261.437 429.664 262.546 429.664 263.869 C 429.664 265.277 429.184 266.397 428.224 267.229 C 427.264 268.061 426.251 268.477 425.184 268.477 C 424.032 268.477 422.976 268.061 422.016 267.229 C 421.056 266.397 420.576 265.277 420.576 263.869 Z"
style="white-space: pre; fill: rgb(43, 64, 63);"></path>
<path
d="M 434.251 280.509 L 432.331 278.653 C 433.44 277.544 434.326 276.157 434.987 274.493 C 435.648 272.829 435.979 270.952 435.979 268.861 L 435.979 243.453 L 439.051 243.453 L 439.051 268.797 C 439.051 271.485 438.656 273.8 437.867 275.741 C 437.078 277.682 435.872 279.272 434.251 280.509 Z M 435.339 234.237 C 435.339 233.64 435.574 233.138 436.043 232.733 C 436.512 232.328 437.024 232.125 437.579 232.125 C 438.176 232.125 438.688 232.328 439.115 232.733 C 439.542 233.138 439.755 233.64 439.755 234.237 C 439.755 234.877 439.542 235.4 439.115 235.805 C 438.688 236.21 438.176 236.413 437.579 236.413 C 437.024 236.413 436.512 236.2 436.043 235.773 C 435.574 235.346 435.339 234.834 435.339 234.237 Z M 454.558 268.989 C 453.107 268.989 451.593 268.722 450.014 268.189 C 448.435 267.656 447.155 266.792 446.174 265.597 L 447.582 263.613 C 448.435 264.509 449.449 265.224 450.622 265.757 C 451.795 266.29 453.043 266.557 454.366 266.557 C 455.347 266.557 456.275 266.418 457.15 266.141 C 458.025 265.864 458.739 265.384 459.294 264.701 C 459.849 264.018 460.126 263.101 460.126 261.949 C 460.126 260.754 459.795 259.837 459.134 259.197 C 458.473 258.557 457.641 258.034 456.638 257.629 C 455.635 257.224 454.579 256.85 453.47 256.509 C 451.635 255.912 450.131 255.101 448.958 254.077 C 447.785 253.053 447.198 251.602 447.198 249.725 C 447.198 248.36 447.529 247.165 448.19 246.141 C 448.851 245.117 449.758 244.317 450.91 243.741 C 452.062 243.165 453.363 242.877 454.814 242.877 C 456.137 242.877 457.449 243.09 458.75 243.517 C 460.051 243.944 461.235 244.669 462.302 245.693 L 460.958 247.805 C 460.275 246.866 459.369 246.226 458.238 245.885 C 457.107 245.544 456.115 245.352 455.262 245.309 C 454.537 245.309 453.779 245.458 452.99 245.757 C 452.201 246.056 451.539 246.493 451.006 247.069 C 450.473 247.645 450.206 248.402 450.206 249.341 C 450.206 250.322 450.483 251.122 451.038 251.741 C 451.593 252.36 452.307 252.861 453.182 253.245 C 454.057 253.629 454.963 253.992 455.902 254.333 C 457.139 254.717 458.302 255.176 459.39 255.709 C 460.478 256.242 461.374 256.946 462.078 257.821 C 462.782 258.696 463.134 259.858 463.134 261.309 C 463.134 262.76 462.814 264.072 462.174 265.245 C 461.534 266.418 460.585 267.336 459.326 267.997 C 458.067 268.658 456.478 268.989 454.558 268.989 Z"
style="white-space: pre; fill: rgb(43, 64, 63); stroke: rgb(43, 64, 63);"></path>
<path
d="M 246.439 255.393 C 246.443 264.187 239.316 271.317 230.522 271.317 C 221.727 271.317 214.595 264.187 214.591 255.393 C 214.587 246.598 221.713 239.469 230.508 239.469 C 239.302 239.469 246.435 246.598 246.439 255.393 Z"
style="fill: rgb(57, 86, 84);"
transform="matrix(0.408137, 0.912921, -0.912921, 0.408137, 369.586896, -59.284229)"></path>
<path
d="M 246.438 255.393 C 246.442 264.187 239.316 271.317 230.521 271.317 C 221.727 271.317 214.594 264.187 214.59 255.393 C 214.586 246.598 221.713 239.469 230.507 239.469 C 239.302 239.469 246.434 246.598 246.438 255.393 Z"
style="clip-path: url(#clip-0); fill: rgb(174, 196, 196);"
transform="matrix(0.408137, 0.912921, -0.912921, 0.408137, 369.586304, -59.283316)"></path>
<path
d="M 211.225 252.806 C 211.225 252.806 217.337 243.795 228.826 253.148 C 237.191 259.958 251.547 252.806 251.547 252.806 L 251.547 273.393 L 211.225 273.393 L 211.225 259.24 L 211.225 252.806 Z"
style="clip-path: url(#clip-2); fill: rgb(240, 245, 245);"></path>
<path
d="M 211.225 252.806 C 211.225 252.806 226.149 267.513 237.427 257.907 C 246.924 249.817 251.547 252.806 251.547 252.806 L 251.547 273.393 L 211.225 273.393 L 211.225 259.24 L 211.225 252.806 Z"
style="clip-path: url(#clip-1); fill: rgb(106, 154, 153);"></path>
</svg>
<p style="opacity:.75;color:var(--theme-dark);font-size:1.425rem;margin:1rem 0 2rem;max-width:none"><strong>HTML</strong> templates
that <strong id="shuffle">shuffle</strong> themselves on render.<br><span style="font-size:1rem;opacity:.75;margin-top:.75rem;display:inline-block"><em>5.1 KB minified!</em></span></p>
</header>
<div class="wave-wrapper reveal">
<dynamo-wave data-face="bottom" style="fill:var(--theme-light);height:4rem;margin-top:-1px;width:100%"
id="header_wave">
</dynamo-wave>
</div>
<div class="box" style="margin:3rem 0">
<button onclick="regenHeader()"><i data-feather="refresh-cw"></i>Regen Header</button>
</div>
<div class="box">
<div>
<h1>Installation</h1>
<p>
To make render times functionally instant, <strong>Dynamowaves</strong> intentionally forgoes using a library such as <b>SVG.js</b> to build a new SVG on execution.<br><br>
Instead, it selects at random from a curated collection of potential <strong><code><paths></code></strong> and leverages <strong>jQuery</strong> to allow it to easily grab its reference element's applied attributes and then fully replaces the reference with a slick lil' wave. I've found that leaving the custom element wrapper around the rendered SVG can cause complications downstream when positioning the wave in relation to other elements.<br><br>
So -> first, jQuery. Then:<br><br>
<strong class="list-indicator">a)</strong> Grab the file from <a class="link" href="https://github.com/mzebley/dynamowaves" target="_blank">Github</a>, place it in your project, and reference it with a <strong><code><script></code></strong> tag.<br><br>
<strong class="list-indicator">b)</strong> Or, load the script from a CDN provider.</p>
<pre>
<code class="html"><!-- jQuery is required, reference it if you're not already -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Download and add to your project locally -->
<script src="path/to/dynamowaves.js"></script>
<!-- Or, reference the CDN -->
<script src="https://cdn.jsdelivr.net/gh/mzebley/dynamowaves/dynamowaves.min.js" crossorigin="anonymous"></script>
</code>
</pre>
</div>
</div>
<div class="box" style="margin:2rem 0 0">
<div>
<h1>Usage</h1>
<p>
Since <strong>Dynamowaves</strong> use HTML templating syntax, all it takes to call one is to add the custom element to your HTML!</p>
<pre>
<code class="html"><!-- Without any added attributes you get a top facing wave filled with the current color of its parent -->
<dynamo-wave></dynamo-wave>
</code>
</pre>
<dynamo-wave></dynamo-wave>
<p style="margin-top:3rem">
A <strong>dynamo-wave</strong> will inherit any <strong><code>class</code></strong>, <strong><code>id</code></strong>, or <strong><code>style</code></strong> applied to its invoking element.</p>
<pre>
<code class="html"><!-- Example 1 -->
<dynamo-wave style="fill:slateblue"></dynamo-wave>
</code>
</pre>
<dynamo-wave style="fill:slateblue"></dynamo-wave>
<pre style="margin:1rem 0 -6rem -1rem;white-space: pre;">
<code class="css">.fill-theme {
fill: var(--theme);
}</code>
</pre>
<pre>
<code class="html"><!-- Example 2 -->
<dynamo-wave class="fill-theme"></dynamo-wave>
</code>
</pre>
<dynamo-wave class="fill-theme"></dynamo-wave>
<pre style="margin:1rem 0 -6rem -1rem;white-space: pre;">
<code class="css">#special_wave {
height: 3rem;
width:80%;
transform: translateX(10%);
}</code>
</pre>
<pre>
<code class="html"><!-- Example 2 -->
<dynamo-wave id="special_wave" class="fill-theme fill-light"></dynamo-wave>
</code>
</pre>
<dynamo-wave id="special_wave" class="fill-theme fill-light"></dynamo-wave>
</div>
</div>
<div class="box" style="margin:3rem 0 0">
<div>
<h1>Wave Direction</h1>
<p>
Need more than a just a wave that faces up? Leverage the <strong><code>data-face</code></strong> attribute.<br><br>
Available options:<br><br>
<strong class="list-indicator">a)</strong> <strong><code>"top"</code></strong><br><br>
<strong class="list-indicator">b)</strong> <strong><code>"bottom"</code></strong><br><br>
<strong class="list-indicator">c)</strong> <strong><code>"right"</code></strong><br><br>
<strong class="list-indicator">d)</strong> <strong><code>"left"</code></strong>
</p>
<pre>
<code class="html"><!-- Bottom facing wave -->
<dynamo-wave class="fill-theme" data-face="bottom"></dynamo-wave>
</code>
</pre>
<dynamo-wave class="fill-theme" data-face="bottom"></dynamo-wave>
<div style="display:grid;grid-template-columns: 70% 30%;margin-top:1rem;">
<div style="align-self: center;">
<pre>
<code class="html"><!-- Left facing wave -->
<dynamo-wave class="fill-theme" data-face="left"></dynamo-wave>
<!-- Right facing wave -->
<dynamo-wave class="fill-theme" data-face="right"></dynamo-wave>
</code>
</pre>
</div>
<div style="margin:1.5rem 0 0;padding-left: 2rem;">
<dynamo-wave class="fill-theme" data-face="left" style="width:45%;height:300px"></dynamo-wave>
<dynamo-wave class="fill-theme" data-face="right" style="width:45%;height:300px"></dynamo-wave>
</div>
</div>
</div>
</div>
<div class="box" style="margin:3rem 0 0">
<div>
<h1>Practical Application</h1>
<p>
<strong>Dynamowaves</strong> come out of the box entirely style agnostic. The onus is on the developer to add the necessary attributes to get them to fit their intended platform, but at the same time this provides nearly endless possibilities for customization.<br><br>
Make use of <strong><code>position:sticky</code></strong> and create a neat little header!
</p>
<pre style="white-space: pre;"><code class="html"><!-- Widget classes not, uh, provided out-of-the-box -->
<div class="widget">
<div class="header">
<h3>I'm the heading!</h3>
<dynamo-wave data-face="bottom"></dynamo-wave>
</div>
<div class="content">...</div>
</div></code></pre>
<div class="widget" id="widget_example_1">
<div class="header">
<h3>I'm the heading!</h3>
<dynamo-wave class="fill-theme" data-face="bottom"></dynamo-wave>
</div>
<div class="content">Lorem ipsum dolor sit amet, ea sea regione concludaturque. Te eam pericula prodesset constituto. In forensibus voluptatum nam. Ius ne modus laboramus, quo illud altera mandamus eu. Persius oportere molestiae vel ut. Ei vel nusquam forensibus eloquentiam.
<br><br>
Mei in posse error incorrupte. Ex rebum vidisse sea. Per sumo quando mucius cu, no persius signiferumque eos, et has deserunt pertinacia. Ea malis everti nostrud sed.
<br><br>
Id regione prompta denique est, mei at veri essent instructior, mei id congue instructior. Nec ne legere tritani sadipscing. Oblique propriae theophrastus id quo, vero persequeris vix cu. Qui singulis pertinacia ex, ad agam doctus graecis eos, vis et erat accumsan.
<br><br>
Cum esse quot essent te, in delicata conceptam cum, dicam iuvaret inimicus mei ad. Est ex cetero commune eleifend. Vim in aeque constituam, timeam debitis argumentum sed ea. His epicurei evertitur et, ea sanctus saperet sed. An harum referrentur nec, te sed errem patrioque, mei et tempor blandit sapientem. Vim te aeterno sapientem.
<br><br>
In eam putant labores accusam. Ne sed evertitur torquatos. Dolor option regione nam ei, summo constituto usu at. Postea accusata et has, his te prima porro verterem.</div>
</div>
<p style="margin-top:3rem">
Stack multiple <strong>dynamowaves</strong> with differing heights and colors to provide some visual interest when transitioning between content sections.
</p>
<pre style="white-space: pre;"><code class="html"><!-- Probably, you know, use classes for this in real life -->
<div style="position:relative;height:4rem">
<dynamo-wave style="
position:absolute;
height:4rem;
bottom:0;
fill:lightsteelblue;
width:100%">
</dynamo-wave>
<dynamo-wave style="
position:absolute;
height:3rem;
bottom:0;
fill:cadetblue;
width:100%">
</dynamo-wave>
<dynamo-wave style="
position:absolute;
height:2rem;
bottom:0;
fill:steelblue;
width:100%">
</dynamo-wave>
</div>
<div style="padding:3rem;backgroundt:steelblue">...</div>
<div style="position:relative;height:4rem">
<dynamo-wave style="
position:absolute;
height:4rem;
top:0;
fill:lightsteelblue;
width:100%">
</dynamo-wave>
<dynamo-wave style="
position:absolute;
height:3rem;
bottom:0;
fill:cadetblue;
width:100%">
</dynamo-wave>
<dynamo-wave style="
position:absolute;
height:2rem;
top:0;
fill:steelblue;
width:100%">
</dynamo-wave>
</div></code></pre>
</div>
</div>
<div style="position:relative;height:4rem">
<dynamo-wave style="position:absolute;height:4rem;bottom:0;fill:lightsteelblue;width:100%"></dynamo-wave>
<dynamo-wave style="position:absolute;height:3rem;bottom:0;fill:cadetblue;width:100%"></dynamo-wave>
<dynamo-wave style="position:absolute;height:2rem;bottom:0;fill:steelblue;width:100%"></dynamo-wave>
</div>
<div class="box" style="padding:3rem 0;color:white;background:steelblue;"><p style="text-align:center">Content content content....</p></div>
<div style="position:relative;height:4rem">
<dynamo-wave data-face="bottom" style="position:absolute;height:4rem;top:0;fill:lightsteelblue;width:100%"></dynamo-wave>
<dynamo-wave data-face="bottom" style="position:absolute;height:3rem;top:0;fill:cadetblue;width:100%"></dynamo-wave>
<dynamo-wave data-face="bottom" style="position:absolute;height:2rem;top:0;fill:steelblue;width:100%"></dynamo-wave>
</div>
</div>
<div class="box" style="margin:1rem 0 0">
<div>
<p>
Slap one of these bad boys along the edge of a photo to create an always fresh, </strong> <strong><code>mask-image</code></strong> effect without having to actually create multiple clip paths or image masks!
</p>
<pre style="white-space: pre;"><code class="html"><div class="widget horizontal">
<div class="image-wrapper">
<img src="./img/image_path.jpeg" />
<!-- When covering an image, I find it helps the browser render
to set the far edge with a bit of a negative overlap
It keeps the image from peeking through from behind the wave -->
<dynamo-wave data-face="left" style="fill:white;position:absolute;right:-1px"></dynamo-wave>
</div>
<div class="content">...</div>
</div></code></pre>
<div class="widget horizontal">
<div class="image-wrapper">
<dynamo-wave data-face="left" style="position:absolute;right:-1px;height:100%;width:1.5rem;fill:white"></dynamo-wave>
</div>
<div class="content" style="align-self: center;padding:0 1rem">
<h2 style="font-family:'Merriweather',serif;color:var(--theme);margin:0">Eye-catching headline.</h2>
<p style="font-size:1rem">Further information to draw interest.</p>
<a>Explore This <i data-feather="arrow-right" style="width:20px;height:20px"></i></a>
</div>
</div>
</div>
</div>
<dynamo-wave class="fill-theme fill-light" style="margin-bottom:-1px;height:4rem;width:100%;margin-top:6rem"></dynamo-wave>
<footer>
<div style="align-self: center;">
<a href="https://github.com/mzebley/dynamowaves" target="_blank"><i style="color:var(--theme);margin: -2px 0.5rem 0 0;;" data-feather="github"></i></a>
</div>
<div style="align-self: center;">
<a href="https://github.com/mzebley/dynamowaves" target="_blank"><p style="font-size:.75rem;color:var(--theme-dark);opacity:.75;line-height: .85rem;"><em><strong>Dynamowaves</strong></em><br>on <strong>Github</strong></p></a>
</div>
<div style="align-self: center;">
<a href="https://markzebley.com" target="_blank"><p style="text-align:right;font-size:.75rem;color:var(--theme-dark);opacity:.75;line-height: .85rem;"><em>Handcoded in<br>Northwest Arkansas</em></p></a>
</div>
<div style="align-self: center;">
<a href="https://markzebley.com" target="_blank">
<svg style="width:56px;fill:var(--theme);cursor:pointer" viewBox="0 0 40 32">
<path d="M19 2.76c-0.44 0.013-2.333 0.133-4.2 0.24s-4.44 0.253-5.707 0.32c-1.28 0.067-2.333 0.147-2.36 0.173-0.013 0.027 0.187 1.533 0.44 3.373l0.48 3.333 0.013 7.147c0 6.52 0.027 7.173 0.24 7.493 0.24 0.373 0.76 0.52 1.627 0.467l0.533-0.040 0.080 1.333c0.040 0.733 0.147 1.547 0.24 1.813l0.16 0.493 3.227 0.093c4.027 0.12 14.96 0.040 15.12-0.107 0.173-0.187 0.12-1.853-0.080-2.36-0.107-0.253-0.28-0.693-0.387-0.973-0.16-0.4-0.173-0.587-0.053-1.013 0.093-0.28 0.16-0.84 0.16-1.227 0-0.493 0.080-0.853 0.267-1.12 0.147-0.213 0.293-0.667 0.333-1 0.147-1.107 0.213-1.227 1.267-2.333 0.573-0.6 1.080-1.24 1.107-1.413 0.040-0.173 0.16-0.867 0.28-1.52 0.173-1.027 0.267-1.253 0.587-1.533 0.56-0.48 0.653-0.733 1.027-2.613 0.293-1.453 0.4-1.747 0.733-2.093 0.4-0.413 1.2-2.373 1.2-2.947 0-0.28-0.080-0.32-0.693-0.4-0.387-0.040-1.107-0.080-1.6-0.080-1.067 0-1.093-0.053-0.507-1.16 0.427-0.787 0.48-1.227 0.267-1.867l-0.147-0.4-1.813-0.080c-1.72-0.093-10.133-0.093-11.84 0zM15.214 9.541c0.272-0.67 0.654-1.283 1.036-1.897 0.084-0.119 0.167-0.238 0.251-0.357 0.149-0.201 0.361-0.301 0.564-0.336 0.286-0.062 0.571-0.032 0.818 0.071 0.349 0.131 0.512 0.446 0.582 0.851 0.025 0.359-0.006 0.736-0.064 1.122-0.116 0.68-0.295 1.35-0.411 2.030-0.19 0.826-0.427 1.699-0.553 2.535-0.028 0.101-0.048 0.23-0.039 0.349 0.093-0.091 0.149-0.201 0.177-0.302 0.411-0.898 0.823-1.797 1.207-2.686 0.27-0.693 0.578-1.349 0.875-2.042-0.039-0.041-0.077-0.085-0.114-0.132-0.146-0.167-0.144-0.443-0.041-0.69 0.066-0.174 0.159-0.358 0.298-0.495 0.289-0.43 0.631-0.786 1.020-1.096 0.731-0.574 1.443-1.111 2.22-1.547 0.148-0.109 0.305-0.191 0.444-0.328 0.176-0.118 0.342-0.172 0.544-0.116s0.413 0.141 0.559 0.308c0.137 0.139 0.191 0.305 0.107 0.516-0.151 0.477-0.347 0.908-0.571 1.348-0.421 0.871-0.841 1.742-1.262 2.612-0.253 0.541-0.514 1.054-0.794 1.604-0.046 0.046-0.056 0.11-0.084 0.211 0.138-0.045 0.249-0.081 0.369-0.089 0.313-0.071 0.598-0.041 0.846 0.062 0.138 0.047 0.165 0.038 0.24-0.109 0.4-0.558 0.772-1.107 1.172-1.665 0.623-0.906 1.479-2.102 1.581-2.166 0.046-0.046 0.174-0.175 0.22-0.129s-0.087 0.223-0.106 0.26c-0.084 0.119-0.052 0.125-0.266 0.408-0.345 0.54-0.698 1.053-1.042 1.593-0.41 0.623-0.819 1.245-1.229 1.867-0.195 0.247-0.14 0.229-0.049 0.414 0.173 0.25 0.216 0.572 0.232 0.903 0.039 0.874-0.096 1.775-0.269 2.656-0.26 1.461-0.648 2.902-1.229 4.315-0.282 0.734-0.673 1.412-1.193 1.978-0.297 0.311-0.612 0.566-0.944 0.765-0.73 0.39-1.187 0.019-1.376-0.47-0.154-0.378-0.205-0.82-0.138-1.271 0.098-0.735 0.259-1.461 0.541-2.195 0.525-1.302 1.188-2.558 1.896-3.767 0.354-0.604 0.708-1.209 1.099-1.795 0.084-0.119 0.112-0.22 0.104-0.339-0.035-0.203-0.070-0.405-0.124-0.571-0.064-0.102-0.073-0.129-0.202-0.057-0.157 0.081-0.286 0.154-0.407 0.255-0.185 0.183-0.398 0.282-0.564 0.428-0.324 0.228-0.636 0.207-0.911 0.021-0.165-0.13-0.19-0.397-0.115-0.636 0.066-0.266 0.161-0.542 0.264-0.789 0.206-0.495 0.449-0.972 0.655-1.467 0.412-0.899 0.86-1.778 1.308-2.658 0.075-0.146 0.149-0.293 0.224-0.44-0.055 0.018-0.055 0.018-0.055 0.018-0.611 0.474-1.221 0.948-1.732 1.542-0.158 0.174-0.26 0.329-0.354 0.513-0.121 0.192-0.094 0.275 0.034 0.387 0.037 0.019 0.073 0.037 0.091 0.093 0.045 0.046 0.045 0.138 0.008 0.212s-0.093 0.091-0.185 0.091c0 0-0.028 0.009-0.064-0.010-0.172-0.026-0.319-0.086-0.452-0.176-0.346 0.839-0.699 1.7-1.011 2.548-0.3 0.77-0.573 1.532-0.882 2.275-0.149 0.293-0.271 0.578-0.457 0.852-0.242 0.385-0.565 0.52-0.924 0.545-0.12 0.008-0.23-0.048-0.293-0.149-0.118-0.176-0.218-0.388-0.244-0.655-0.052-0.442-0.076-0.893-0.017-1.371 0.1-1.103 0.22-2.243 0.495-3.372 0.123-0.468 0.21-0.955 0.305-1.415-0.009-0.028 0.010-0.064-0.027-0.083-0.064-0.010-0.074 0.055-0.111 0.128-0.596 0.897-1.081 1.85-1.42 2.878-0.366 0.945-0.659 1.927-0.933 2.872-0.085 0.303-0.261 0.513-0.538 0.603-0.147 0.017-0.313 0.071-0.47 0.061-0.184-0.001-0.312-0.113-0.366-0.279-0.082-0.157-0.108-0.332-0.134-0.507-0.061-0.47-0.011-0.975 0.048-1.453 0.079-0.699 0.222-1.387 0.393-2.085 0.010-0.064 0.028-0.101 0.001-0.184-0.055 0.018-0.065 0.082-0.084 0.119-0.262 0.513-0.468 1.008-0.637 1.522-0.358 1.064-0.715 2.129-1.045 3.184-0.169 0.514-0.367 1.037-0.527 1.578-0.075 0.239-0.233 0.412-0.446 0.512-0.074 0.055-0.157 0.082-0.277 0.090-0.369 0.089-0.533-0.041-0.631-0.437-0.187-0.857-0.143-1.758-0.044-2.677 0.060-0.662 0.802-3.839 1.076-4.785 0.085-0.303 0.178-0.394 0.445-0.42 0.295-0.034 0.589 0.023 0.835 0.218 0.082 0.065 0.146 0.167 0.163 0.314 0.016 0.331 0.004 0.672-0.072 1.002-0.125 0.744-0.315 1.479-0.477 2.204-0.038 0.165-0.085 0.303-0.087 0.487 0.113-0.312 0.225-0.624 0.338-0.936 0.291-0.798 0.583-1.596 0.91-2.376 0.262-0.605 0.589-1.201 0.961-1.75 0.102-0.156 0.204-0.219 0.351-0.237 0.267-0.026 0.524 0.013 0.781 0.144 0.165 0.13 0.255 0.315 0.3 0.545 0.025 0.359 0.013 0.699 0.001 1.040-0.019 0.037-0.028 0.101 0.008 0.12 0.046-0.046 0.084-0.119 0.093-0.183zM22.37 13.395c-0.41 0.714-0.811 1.457-1.185 2.19-0.588 1.109-1.075 2.246-1.452 3.439-0.179 0.578-0.294 1.166-0.142 1.728 0.062 0.378 0.281 0.582 0.537 0.712 0.192 0.121 0.266 0.066 0.443-0.144 0.232-0.32 0.401-0.65 0.532-0.999 0.441-1.091 0.753-2.202 0.991-3.35 0.163-0.91 0.327-1.819 0.361-2.748 0.049-0.322 0.060-0.662 0.044-0.993-0.083 0.027-0.12 0.1-0.13 0.165z"></path></svg>
</a></div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>
function regenHeader() {
$(".wave-wrapper").removeClass("reveal");
setTimeout(() => {
$("#header_wave").replaceWith($(
`<dynamo-wave data-face="bottom" style="fill:var(--theme-light);height:4rem;margin-top:-1px;width:100%" id="header_wave"></dynamo-wave>`
));
$(".wave-wrapper").addClass("reveal");
}, 225)
};
feather.replace({
'stroke-width': ".175rem"
});
hljs.highlightAll();
</script>
<script src="dynamowaves.min.js"></script>
</body>
</html>