-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
512 lines (488 loc) · 38.4 KB
/
index.html
File metadata and controls
512 lines (488 loc) · 38.4 KB
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
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Isa Kiko</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,900,200italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="main">
<div class="background"></div>
<div class="menu-item" id="notebook">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg3494"
version="1.1"
inkscape:version="0.91 r13725"
width="10em"
height="2em"
viewBox="0 0 2157.8765 273.77005"
sodipodi:docname="20150709_133909.svg">
<metadata
id="metadata3500">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs3498" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1362"
inkscape:window-height="724"
id="namedview3496"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="0.35482517"
inkscape:cx="1104.5"
inkscape:cy="191.83126"
inkscape:window-x="4"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg3494" />
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:31.70000076;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 15.860617,257.69448 9.75202,-241.850129 c 0,0 44.2321,106.389999 79.224643,151.291609 15.34466,19.68991 34.95904,36.22508 55.84594,49.89579 21.99067,14.39314 71.67227,32.86112 71.67227,32.86112 0,0 -22.77012,-92.69199 -33.15687,-193.090029 -3.40374,-32.90045 -27.30566,-37.05768 -27.30566,-37.05768"
id="path3504"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccsscsc" />
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:31.70000076;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 400.09026,43.150011 c -15.26827,-5.57243 -33.28209,-4.96016 -48.7601,0 -15.97763,5.12027 -31.10734,15.67459 -40.95849,29.25607 -14.00465,19.30779 -21.29877,44.412599 -21.45445,68.264149 -0.13291,20.36239 5.9521,41.77748 17.55364,58.51213 11.63107,16.77724 29.41373,30.54036 48.7601,37.05768 19.71565,6.64172 42.45175,5.86264 62.41294,0 20.76377,-6.09836 43.46089,-16.56026 54.61132,-35.10728 12.10116,-20.12841 12.15641,-47.59077 5.85121,-70.21455 -6.24939,-22.42353 -25.11129,-39.510749 -40.95849,-56.561729 -10.99388,-11.829 -21.88744,-25.66982 -37.05768,-31.20647 z"
id="path3506"
inkscape:connector-curvature="0"
sodipodi:nodetypes="sssssssssss" />
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:31.70000076;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 513.21371,29.497181 c 0,0 141.61158,-10.89786 210.64366,1.95041 5.46097,1.0164 15.60324,5.85121 15.60324,5.85121"
id="path3508"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csc" />
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:31.70000076;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 643.8908,251.84327 c 0,0 -11.8974,-21.81986 -13.65284,-35.10728 -8.431,-63.8167 -21.45444,-183.337999 -21.45444,-183.337999"
id="path3510"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csc" />
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:31.70000076;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 967.65789,45.100421 -146.2803,29.25606 -27.30566,74.115359 c 0,0 -16.34953,38.66656 -13.65283,58.51213 1.09686,8.07198 5.11242,16.66572 11.70242,21.45445 8.56167,6.22147 20.62395,5.71251 31.20647,5.85121 53.3303,0.69897 157.9828,-25.35525 157.9828,-25.35525"
id="path3512"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccsssc" />
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:31.70000076;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 797.97274,140.67023 944.25309,109.46376"
id="path3514"
inkscape:connector-curvature="0" />
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:31.70000076;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 1082.7318,47.050821 -5.8512,183.337999 1.9504,13.65283"
id="path3516"
inkscape:connector-curvature="0" />
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:31.70000076;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 1028.1205,54.852441 c 0,0 30.607,-14.68744 46.8097,-19.50404 17.112,-5.0869 34.9842,-12.2479 52.6609,-9.75202 17.2736,2.43896 37.0296,8.95926 46.8097,23.40485 4.389,6.48266 4.359,15.95593 1.9504,23.40485 -3.6883,11.40641 -14.0781,19.77432 -23.4049,27.30566 -13.8061,11.148349 -46.8097,25.355249 -46.8097,25.355249 0,0 51.1368,11.52274 76.0658,19.50405 29.2064,9.35077 64.648,10.96919 85.8178,33.15687 5.6769,5.94986 10.6234,15.6805 7.8016,23.40485 -4.7059,12.88197 -22.4265,16.23062 -35.1073,21.45445 -36.4513,15.01604 -75.8371,23.47709 -115.0738,27.30566 -16.836,1.6428 -50.7105,-1.95041 -50.7105,-1.95041"
id="path3518"
inkscape:connector-curvature="0"
sodipodi:nodetypes="caaaaacsssssc" />
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:31.70000076;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 1418.2013,64.604461 c -16.4473,0 -34.2439,4.99134 -46.8097,15.60323 -16.8881,14.26204 -24.7091,37.384039 -31.2065,58.512129 -5.3814,17.49918 -11.9451,37.34733 -5.8512,54.61132 6.1208,17.34003 21.8672,32.35007 39.0081,39.00809 27.2979,10.6033 59.4708,3.64027 87.7682,-3.90081 21.9154,-5.84034 44.8989,-14.70893 60.4625,-31.20647 8.7878,-9.31516 15.3618,-22.30338 15.6033,-35.10728 0.2641,-14.00185 -6.9722,-27.97965 -15.6033,-39.00808 -15.7903,-20.17624 -39.5992,-33.199589 -62.4129,-44.859299 -12.8147,-6.54938 -26.5672,-13.65283 -40.9585,-13.65283 z"
id="path3520"
inkscape:connector-curvature="0"
sodipodi:nodetypes="sssssssssss" />
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:31.70000076;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 1699.0595,70.455671 c -15.1515,1.43501 -30.6047,6.64596 -42.9089,15.60324 -11.9857,8.72544 -22.7453,21.000729 -27.3056,35.107269 -5.6031,17.33221 -5.3196,37.9096 1.9504,54.61132 6.6052,15.17448 20.2404,27.83613 35.1073,35.10728 23.5428,11.51441 52.1846,14.17677 78.0161,9.75202 22.926,-3.92706 50.1845,-11.42038 62.413,-31.20647 11.2793,-18.25024 8.4206,-44.63047 0,-64.36334 -8.4823,-19.87731 -27.4641,-35.225849 -46.8097,-44.859299 -18.2743,-9.09997 -40.1389,-11.67689 -60.4626,-9.75202 z"
id="path3522"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ssssssssss" />
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:31.70000076;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 1896.0504,45.100421 11.7024,169.685169"
id="path3524"
inkscape:connector-curvature="0" />
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:31.70000076;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 2003.3226,64.604461 c 0,0 2.746,13.61109 0,19.50404 -8.9657,19.240269 -28.6314,34.220099 -48.7601,40.958489 -11.7298,3.92674 -37.0577,-1.9504 -37.0577,-1.9504 0,0 13.6469,27.4013 23.4049,39.00808 20.4659,24.34352 45.2359,45.49285 72.1649,62.41294 17.9986,11.3089 37.7602,20.75091 58.5121,25.35526 22.858,5.07165 70.2146,1.9504 70.2146,1.9504"
id="path3526"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csscsssc" />
</svg>
</div>
<div class="signature-canvas">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg class="filler-img"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg3472"
version="1.1"
inkscape:version="0.91 r13725"
width="706.88611"
height="308.12488"
viewBox="0 0 706.88611 308.12488"
sodipodi:docname="signature.svg">
<metadata
id="metadata3478">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs3476" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1362"
inkscape:window-height="724"
id="namedview3474"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="1.4437038"
inkscape:cx="268.23333"
inkscape:cy="155.59556"
inkscape:window-x="4"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg3472" />
<g style="mask: url(#easyMask);">
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 37.458342,300.3928 c 6.27486,-18.8246 21.17767,-39.21791 21.17767,-39.21791 0,0 110.594468,-135.69396 114.516268,-144.3219 3.9218,-8.62793 16.4716,-28.236889 -5.4905,-39.217899 -21.962,-10.98102 -105.103978,27.452529 -110.594488,31.374319 -5.49051,3.92179 -53.3363502,34.51176 -54.1207102,68.23916 -0.78436,33.7274 40.0022702,56.47379 40.0022702,56.47379 0,0 18.06324,4.04473 9.41229,-9.4123 -7.05922,-10.98101 -28.22638,-23.55482 -28.23689,-36.08048 -0.005,-6.18176 -0.38992,-15.6985 7.0665,-27.63741 7.45641,-11.93891 22.75398,-26.3 54.11343,-42.17046 C 144.14488,88.643421 159.03388,95.675331 159.03388,95.675331 123.71768,162.65147 65.956692,220.64973 19.418102,283.13692 c -0.66541,3.35139 -4.27484,5.72143 0.78436,10.98102 7.674,5.39251 13.08645,6.90106 17.25588,6.27486 z"
id="path3482"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccsssscsssscccc" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 162.51708,187.34824 c -5.8775,14.24072 10.4968,34.82428 10.922,43.50235 0.4447,9.07724 3.9474,24.21584 -12.8365,29.53994 -18.3896,5.83345 -58.8269,-16.47152 -58.8269,-16.47152 0,0 -3.137398,-10.19665 1.5687,-11.76537 26.6806,-1.73425 50.5144,23.56964 49.6254,-3.04045 -0.9931,-18.06682 -13.8524,-18.77437 -8.6658,-50.67965 2.1209,-13.04635 16.3048,-17.8224 29.4356,-16.85079 13.1308,0.97161 23.9643,12.91571 21.8723,22.85999 -2.4131,11.47055 -26.282,-17.97971 -33.0948,2.9055 z"
id="path3488"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csscccsssc" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 254.16048,197.79791 c 3.4832,-5.22484 6.4688,-12.68889 4.976,-21.39695 -1.4928,-8.70806 -8.9568,-12.68889 -15.1769,-10.69848 -6.22,1.99042 -42.0475,14.4305 -52.9948,35.57865 -10.9472,21.14816 -1.4928,28.11461 -1.4928,28.11461 0,0 10.4947,14.32967 45.0331,2.48801 8.7081,-2.98562 -2.8297,6.44771 13.5753,2.1848 6.3085,-1.63929 11.6159,-20.75163 11.9269,-24.57696 0.622,-7.65065 -5.8468,-11.69368 -5.8468,-11.69368 z"
id="path3490"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csssccssc" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 244.95478,203.02275 c -11.9425,-7.71286 -12.1913,-11.69369 -12.1913,-11.69369 0,0 -7.6704,3.39312 -14.1817,8.42816 -10.5993,8.19624 -10.9472,12.84439 -10.4496,16.70082 0.4976,3.85643 11.3204,4.78944 20.0285,0.52871 8.708,-4.26073 16.7941,-13.964 16.7941,-13.964 z"
id="path3492"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccsssc" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 306.63748,227.8078 c 0.8882,-22.76152 106.9651,-166.417879 106.9651,-166.417879 0,0 7.0372,-9.14833 12.6669,-8.44461 5.6298,0.70371 10.2153,16.21955 5.993,21.84929 -4.2223,5.62975 -99.2242,143.649209 -99.2242,143.649209 0,0 -4.7071,14.4819 -6.6967,17.46809 -6.0497,9.08023 -19.7041,-8.1041 -19.7041,-8.1041 z"
id="path3508"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccsscsc" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 390.76578,142.2607 c 1.1859,-4.81981 4.7672,-9.53424 10.7261,-10.32876 5.9589,-0.79452 3.5753,5.56164 8.3424,7.9452 4.7671,2.38356 8.3425,5.16438 13.9041,0.79452 5.5616,-4.36986 56.8082,-47.671199 56.8082,-47.671199 0,0 11.9178,-9.13698 14.6986,-8.34246 2.7808,0.79452 6.3562,15.09588 4.3699,17.876699 -1.9863,2.78082 -63.1644,54.42462 -63.1644,54.42462 0,0 -5.1644,7.15068 -19.0685,2.78082 -5.968,2.77254 2.5609,37.52181 3.5754,38.93148 5.8959,8.19206 23.8356,8.34246 22.6438,15.09588 -1.1918,6.75341 -11.1233,10.32875 -13.1096,9.53423 -1.9863,-0.79452 -20.7346,-2.23814 -30.1918,-21.45203 -4.9082,-9.972 -1.2869,-29.65055 -4.3698,-44.09586 -1.1362,-5.32384 -6.465,-10.20706 -5.1644,-15.49314 z"
id="path3510"
inkscape:connector-curvature="0"
sodipodi:nodetypes="assscssccssssaa" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 495.24518,142.2607 c -10.4113,16.57945 -13.2201,25.24422 -23.4383,45.6849 -3.093,6.18726 10.2293,16.29503 13.5068,11.12328 10.3988,-16.4087 13.7169,-22.03707 25.4247,-41.7123 3.1855,-5.35329 5.0936,-13.97912 1.9862,-19.863 -0.7748,-1.46716 -2.7106,-2.38355 -4.3698,-2.38356 -4.9777,-2e-5 -10.4624,2.93525 -13.1096,7.15068 z"
id="path3512"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ssssaas" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 543.31368,110.87716 c -2.934,5.56647 -17.4795,15.09588 -18.6712,2.78082 -1.1918,-12.31506 11.5205,-17.479439 11.5205,-17.479439 0,0 9.6913,9.878619 7.1507,14.698619 z"
id="path3514"
inkscape:connector-curvature="0"
sodipodi:nodetypes="asca" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 511.13558,194.30176 c 17.4165,-30.31909 61.178,-83.4246 61.178,-83.4246 0,0 13.7072,-19.107679 21.4521,-42.506819 1.0502,-3.17283 5.0459,-5.01156 8.3424,-5.56164 2.5662,-0.42821 5.8395,0.0243 7.548,1.9863 4.3793,5.02899 3.7366,13.33322 2.3835,19.863 -2.6129,12.60958 -19.4657,33.369839 -19.4657,33.369839 l -49.6575,62.76708 14.3014,-3.17808 c 0,0 5.5456,-9.94539 9.5342,-13.9041 9.4104,-9.33984 20.8623,-16.8492 32.9726,-22.24656 6.483,-2.8894 13.7599,-5.63111 20.6575,-5.16438 3.3109,0.22403 4.1199,5.48502 4.7671,8.73972 0.7273,3.65736 0.7071,7.914 -1.1918,11.12328 -6.2479,10.55943 -19.4464,15.1323 -30.1917,21.05478 -2.3908,1.31775 -7.548,3.17808 -7.548,3.17808 0,0 -0.4512,4.61548 1.1918,5.56164 9.9457,5.7274 28.9629,5.8507 25.4247,6.35616 0,0 4.3555,-1.17242 5.9589,0 2.4678,1.80449 3.6374,5.80504 2.7808,8.73972 -0.8694,2.97841 -7.1507,5.9589 -7.1507,5.9589 0,0 -9.8439,0.27694 -14.6986,-0.39726 -7.9847,-1.10887 -16.0862,-2.65281 -23.4384,-5.9589 -4.0866,-1.83765 -6.6585,-7.16848 -11.1232,-7.54794 -7.9714,-0.6775 -14.0631,8.09343 -21.8493,9.9315 -6.9642,1.64402 -14.7177,3.21325 -21.4521,0.79452 -4.5021,-1.61696 -13.1088,-5.38627 -10.726,-9.53424 z"
id="path3516"
inkscape:connector-curvature="0"
sodipodi:nodetypes="scsaaacccaasaaacscaacaaaaas" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 646.99848,159.74014 c 4.2197,-5.87035 8.9495,-9.24353 13.9041,-12.31506 3.9311,-2.43703 8.1475,-4.81619 12.7123,-5.56164 5.9042,-0.96419 12.4261,-0.87672 17.8767,1.58904 3.4988,1.58281 6.9006,4.38598 8.3425,7.9452 2.488,6.14148 1.0443,13.49695 -0.7945,19.863 -1.3993,4.84437 -3.8923,9.63656 -7.548,13.10958 -5.7103,5.425 -13.2576,9.61058 -21.0547,10.72602 -4.9362,0.70617 -10.1129,-0.8224 -14.6987,-2.78082 -4.1903,-1.78953 -8.8761,-3.98137 -11.1232,-7.9452 -2.4242,-4.27627 -1.8404,-9.82597 -1.1918,-14.69862 0.4642,-3.48772 1.5216,-7.07454 3.5753,-9.9315 z"
id="path3518"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ssaaaaaaaaas" />
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 668.05328,172.0552 c -0.2846,-1.75367 1.2174,-3.42687 2.3836,-4.76712 1.6878,-1.93961 3.8102,-4.01038 6.3561,-4.36986 0.8293,-0.1171 2.0527,0.0252 2.3836,0.79452 0.8661,2.01357 -1.4259,4.23584 -2.7808,5.9589 -1.5723,1.99958 -3.4191,4.90778 -5.9589,4.76712 -1.1219,-0.0621 -2.2036,-1.27444 -2.3836,-2.38356 z"
id="path3520"
inkscape:connector-curvature="0"
sodipodi:nodetypes="aaaaaaa" />
<path
style="fill:#000000;stroke:#000000;stroke-opacity:1"
d="m 31.025302,298.8539 c -4.11997,-1.27096 -10.52148,-5.36782 -11.815713,-7.56187 -1.099938,-1.86467 -1.101928,-2.03302 -0.05678,-4.80247 1.713101,-4.53941 15.113064,-21.78644 48.442093,-62.34961 31.488823,-38.32354 45.843948,-56.62455 60.532078,-77.1709 13.99516,-19.577 32.762,-50.597395 31.42461,-51.942861 -0.94222,-0.9479 -9.26819,-0.94291 -14.78285,0.0089 -12.2967,2.122276 -28.2818,7.712931 -47.474209,16.603711 -35.749105,16.56059 -58.12174,33.24459 -68.323489,50.95105 -2.693509,4.67494 -4.661387,11.40474 -5.383304,18.40998 -1.258083,12.20801 0.574627,15.75165 16.001218,30.93923 10.781034,10.61399 14.008076,14.78239 14.008076,18.09435 0,2.55667 -1.28669,3.25728 -5.982089,3.25728 -3.329979,0 -4.009743,-0.25298 -8.428248,-3.13664 C 29.50141,223.83307 19.685303,214.64922 13.80258,206.40491 10.23409,201.40386 6.3594504,193.35339 5.0152617,188.1472 3.6542326,182.87578 3.6488174,173.7518 5.0036947,168.65782 9.5166112,151.69044 25.605121,132.73158 51.056617,114.38859 69.942639,100.77736 123.81704,80.265999 149.01116,77.094801 c 11.56985,-1.456305 18.20757,0.05602 24.39549,5.558222 5.29105,4.704718 7.04068,11.063249 5.15929,18.749917 -1.07606,4.39635 -5.46832,14.02884 -8.29446,18.19023 -5.73293,8.44158 -41.23754,53.24085 -88.65927,111.86922 -12.891903,15.9385 -24.158847,29.94229 -25.037644,31.11954 -5.492272,7.35753 -15.62401,25.71901 -18.283706,33.13509 -1.638522,4.56872 -2.049242,4.74604 -7.265558,3.13688 z"
id="path4322"
inkscape:connector-curvature="0" />
<path
style="fill:#000000;stroke:#000000;stroke-opacity:1"
d="m 147.30567,260.06951 c -9.07739,-1.32472 -22.46129,-5.96095 -36.76776,-12.73649 -8.74867,-4.14336 -8.72437,-4.11687 -8.73886,-9.52498 -0.0123,-4.59796 1.12581,-5.40836 6.83902,-4.86968 6.17337,0.58205 12.71453,2.1959 23.57962,5.81759 9.72027,3.24009 14.952,3.9717 17.73827,2.48053 2.19955,-1.17716 3.66017,-5.23215 3.67533,-10.20348 0.0189,-6.1915 -0.88876,-9.76547 -4.69416,-18.48394 -4.90176,-11.23029 -5.83869,-17.54724 -4.3884,-29.58726 1.11734,-9.27591 4.20323,-14.08442 11.19147,-17.43888 4.99386,-2.39712 9.32258,-3.17167 16.16519,-2.8925 4.97083,0.20281 6.44031,0.52151 9.91102,2.14948 4.93657,2.31556 8.87159,5.81995 11.06937,9.858 2.94986,5.41987 2.75275,11.67916 -0.36779,11.67916 -0.78098,0 -3.6293,-1.06841 -6.32959,-2.37424 -8.30997,-4.01861 -11.96173,-5.13476 -15.76708,-4.81919 -4.08281,0.33857 -6.22431,2.09162 -8.31615,6.80761 -1.08663,2.44979 -1.39087,4.25924 -1.39831,8.31642 -0.0117,6.36833 1.32351,10.96777 6.6396,22.87193 5.45801,12.22199 5.46694,12.25779 5.47449,21.96651 0.005,6.73738 -0.21045,9.00812 -1.02157,10.75468 -2.35929,5.08019 -6.98293,8.61235 -13.18437,10.072 -3.82589,0.90051 -6.00567,0.93072 -11.30934,0.15673 z"
id="path4324"
inkscape:connector-curvature="0" />
<path
style="fill:#000000;stroke:#000000;stroke-opacity:1"
d="m 203.66852,235.30967 c -7.17675,-1.20001 -13.75014,-5.42035 -15.93536,-10.23103 -3.01967,-6.64773 0.7799,-20.31048 8.27156,-29.74352 5.76633,-7.26061 16.57992,-14.89382 30.54055,-21.5583 11.28494,-5.38716 18.4939,-7.83143 21.94898,-7.44199 10.05113,1.13291 13.34911,15.87171 6.35346,28.39389 l -1.8024,3.22627 2.14954,2.02728 c 2.45747,2.3177 3.98792,5.5377 3.98792,8.39047 0,5.42247 -6.29717,21.10431 -9.47994,23.60787 -1.97519,1.55369 -8.08765,2.90531 -9.4056,2.07983 -0.51754,-0.32416 -1.02566,-1.1558 -1.12916,-1.84809 -0.1035,-0.6923 -0.55888,-1.40097 -1.01194,-1.57483 -0.45307,-0.17386 -4.14049,0.61153 -8.19427,1.7453 -10.55478,2.95199 -19.91296,3.9937 -26.29334,2.92685 z m 22.51696,-16.56321 c 1.81528,-0.70075 4.78586,-2.26031 6.60131,-3.4657 3.87452,-2.57254 12.97495,-11.10625 12.97495,-12.16696 0,-0.403 -1.49217,-1.76043 -3.31594,-3.0165 -3.41705,-2.35341 -8.46642,-7.35943 -9.00466,-8.92734 -0.6551,-1.90833 -12.87932,5.32236 -19.55427,11.56645 -4.53812,4.24519 -6.55807,7.78129 -6.55807,11.48048 0,3.44202 0.48766,4.42901 2.68399,5.43221 2.74664,1.25455 11.90929,0.74316 16.17269,-0.90264 z"
id="path4326"
inkscape:connector-curvature="0" />
<path
style="fill:#000000;stroke:#000000;stroke-opacity:1"
d="m 316.83218,235.77864 c -1.67763,-0.97399 -4.49379,-3.24719 -6.25814,-5.05157 l -3.20791,-3.28068 0.92315,-3.10858 c 4.71586,-15.88001 33.09227,-60.58004 81.64573,-128.612688 24.9659,-34.981986 27.34442,-37.991248 32.40964,-41.004023 2.24091,-1.332892 4.58431,-0.931027 6.49438,1.113711 2.38276,2.550747 4.43702,9.360426 4.08685,13.547489 -0.24994,2.98856 -1.1639,4.459293 -16.7493,26.952869 -9.06671,13.085502 -31.53835,45.616242 -49.93698,72.290532 l -33.45205,48.49871 -2.58924,7.10061 c -4.13932,11.3515 -5.39615,13.33942 -8.4278,13.33024 -1.03845,-0.003 -3.2607,-0.80263 -4.93833,-1.77662 z"
id="path4328"
inkscape:connector-curvature="0" />
<path
style="fill:#000000;stroke:#000000;stroke-opacity:1"
d="m 425.2793,221.13557 c -6.94105,-1.98531 -11.70942,-4.77482 -16.67352,-9.75409 -8.73612,-8.7628 -9.65019,-11.65066 -10.3471,-32.69001 -0.28896,-8.72367 -0.83942,-17.49311 -1.22325,-19.48765 -0.38383,-1.99453 -1.80189,-5.82222 -3.15125,-8.50597 -2.07288,-4.12274 -2.40626,-5.29773 -2.14949,-7.57579 0.4063,-3.60465 3.12178,-7.39398 6.54688,-9.13588 4.07601,-2.07293 5.41032,-1.66787 7.59959,2.30705 1.58139,2.87122 2.41167,3.64127 5.75542,5.33791 4.6288,2.34867 7.94172,2.56445 10.97556,0.71489 2.40142,-1.46401 8.29066,-6.32973 37.57593,-31.0454 21.41545,-18.073845 31.8203,-25.847203 34.15047,-25.513468 1.64605,0.235751 3.20913,3.56578 4.38863,9.349642 0.7074,3.468864 0.78567,5.045616 0.30305,6.104846 -1.0991,2.41227 -62.20843,55.03449 -66.73989,57.47079 -2.88005,1.54844 -8.73821,1.86329 -12.9438,0.69569 -2.18882,-0.60768 -2.5156,-0.54424 -3.50777,0.68104 -0.89317,1.10302 -1.09409,2.50033 -1.09409,7.60913 0,10.14025 3.8104,29.45448 6.42361,32.5601 1.73225,2.05867 6.69838,4.76715 13.5872,7.41035 6.3838,2.44942 8.38937,4.06048 7.82988,6.28969 -0.98179,3.91174 -7.1408,8.39646 -11.40952,8.30791 -1.15229,-0.0239 -3.80573,-0.53275 -5.89654,-1.13078 z"
id="path4330"
inkscape:connector-curvature="0" />
<path
style="fill:#000000;stroke:#000000;stroke-opacity:1"
d="m 478.88607,198.4211 c -2.6442,-1.30885 -5.9414,-5.09163 -6.52998,-7.49169 -0.19851,-0.80943 2.30358,-6.73766 7.02617,-16.64721 14.33264,-30.07455 18.60972,-36.29916 26.02944,-37.88163 5.63429,-1.20168 7.8775,1.21113 7.81654,8.40753 -0.0529,6.24059 -1.18531,8.74993 -12.26296,27.17286 -12.95161,21.53945 -17.06069,27.75721 -18.34331,27.75664 -0.59245,-2.6e-4 -2.2736,-0.59269 -3.7359,-1.3165 z"
id="path4332"
inkscape:connector-curvature="0" />
<path
style="fill:#000000;stroke:#000000;stroke-opacity:1"
d="m 526.55726,116.96247 c -1.51586,-2.31349 -1.35151,-7.68961 0.33581,-10.98473 1.44544,-2.82276 5.01667,-6.563219 7.49179,-7.846809 1.44189,-0.747756 1.7178,-0.697655 2.85476,0.518379 2.2453,2.40147 5.61486,8.55151 5.61486,10.24813 0,1.15939 -0.84658,2.48782 -2.83423,4.4474 -5.31096,5.23593 -11.34096,6.85625 -13.46299,3.61763 z"
id="path4334"
inkscape:connector-curvature="0" />
<path
style="fill:#000000;stroke:#000000;stroke-opacity:1"
d="m 598.31925,205.52498 c -12.56591,-1.71538 -21.19917,-4.67412 -25.77239,-8.83256 -3.97923,-3.61833 -5.24013,-4.2749 -8.20961,-4.2749 -3.51336,0 -5.86286,0.98382 -12.54259,5.25202 -5.06721,3.23783 -6.90136,4.04458 -11.73453,5.16143 -7.81305,1.80543 -15.45141,1.48038 -20.66111,-0.87923 -4.68477,-2.12186 -7.65692,-4.4098 -7.65692,-5.89424 0,-4.0675 24.37453,-38.29725 51.98523,-73.00411 5.65958,-7.11415 12.05379,-15.81542 14.20934,-19.33617 4.90012,-8.003556 11.03316,-20.229386 13.95512,-27.818616 1.22723,-3.187494 2.61658,-6.653003 3.08747,-7.70113 1.76195,-3.921922 9.94488,-5.931971 13.32502,-3.273151 4.17914,3.287308 4.99531,13.477754 1.81781,22.696336 -2.01441,5.844174 -7.42772,15.281161 -13.39448,23.350491 -2.21484,2.9953 -15.38994,19.80531 -29.278,37.35557 -13.88807,17.55026 -25.39997,32.2977 -25.58201,32.77209 -0.28349,0.73876 0.17933,0.74725 3.22567,0.0591 1.95616,-0.44187 5.62132,-1.25095 8.14479,-1.79796 l 4.58814,-0.99458 2.92072,-4.87371 c 6.51794,-10.87633 19.14531,-21.3022 35.48665,-29.29978 8.72077,-4.26802 15.03955,-6.42782 20.44424,-6.98797 4.77084,-0.49445 5.68495,0.19129 7.03965,5.28094 3.57263,13.42247 -2.47508,20.35612 -28.71071,32.91657 l -9.42055,4.51014 -0.0142,2.32778 c -0.0201,3.28751 0.73338,4.33425 4.1905,5.82146 5.4575,2.34776 22.22832,5.39889 25.35795,4.6134 3.78672,-0.95041 7.29653,4.99527 5.22913,8.85824 -0.32499,0.60726 -1.92752,1.96181 -3.56117,3.01012 -2.71976,1.74527 -3.3774,1.90073 -7.79725,1.84317 -2.65483,-0.0346 -7.45718,-0.42192 -10.67189,-0.86076 l -10e-6,0 z"
id="path4336"
inkscape:connector-curvature="0" />
<path
style="fill:#000000;stroke:#000000;stroke-opacity:1"
d="m 659.47043,192.69104 c -12.75076,-4.34322 -16.65154,-9.17867 -15.63805,-19.3851 0.23895,-2.40637 0.97352,-6.12829 1.63237,-8.27093 1.06442,-3.46158 1.7872,-4.4817 6.4857,-9.15396 5.65407,-5.62247 12.48151,-10.13007 18.60164,-12.28112 2.57404,-0.9047 5.07907,-1.24714 9.1466,-1.25035 16.65033,-0.0131 23.50884,9.01235 19.31378,25.41598 -1.9077,7.45953 -4.35124,12.09102 -8.45439,16.02445 -9.67397,9.27381 -20.7136,12.43468 -31.08765,8.90103 z m 15.60611,-20.15497 c 4.7444,-4.95154 6.13869,-8.33828 4.12187,-10.01209 -2.07974,-1.72603 -6.98056,0.72152 -10.11851,5.05333 -1.99966,2.76044 -2.25746,4.99554 -0.76627,6.64329 1.72417,1.90519 3.82466,1.38199 6.76291,-1.68453 z"
id="path4338"
inkscape:connector-curvature="0" /></g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg class="path filler-mask"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg3472"
version="1.1"
inkscape:version="0.91 r13725"
width="706.88611"
height="308.12488"
viewBox="0 0 706.88611 308.12488"
sodipodi:docname="mask-black.svg">
<metadata
id="metadata3478">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs3476" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1362"
inkscape:window-height="724"
id="namedview3474"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="1.0741741"
inkscape:cx="369.53229"
inkscape:cy="134.48552"
inkscape:window-x="4"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg3472" />
<mask id="easyMask">
<path
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:24.29999924;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
d="M 48.151139,225.24924 C 28.169111,216.86716 22.515409,198.93285 12.825335,183.68947 l 4.155977,-22.16521 27.01385,-31.86249 29.091844,-17.31658 55.413014,-24.935858 33.24782,-2.07799 11.77526,4.84864 -18.70189,36.018468 -34.63314,45.71575 -42.945094,52.64238 -40.867105,48.4864 -9.69728,15.23858 8.311954,4.15597 126.757295,-169.70239 47.79373,32.55515 -15.93124,20.77989 -20.08723,-7.61929 -20.77988,10.38993 2.07799,18.7019 8.31195,27.70652 c -0.92355,8.77793 0,22.44037 0,22.16521 l -15.93124,5.5413 -28.39918,-11.0826 -18.00922,-7.61929 4.84864,35.3258 c 46.10355,10.72318 91.90063,24.10238 143.3812,-11.77527 l 36.71113,-60.95433 -39.48179,-6.92663 4.84864,-11.0826 c -3.37325,-7.38177 -8.94275,-2.55139 -13.85325,-1.38533 l -29.78451,20.08722 c -17.77223,22.37517 -9.28191,30.53835 -6.23396,25.62853 8.42478,6.51398 17.21586,1.00337 22.85787,-0.69266 l 27.70652,-11.77527 -6.23397,15.23858 24.93586,15.23858 82.42688,-172.473048 72.03694,-17.31657 0,13.85326 c -41.8513,49.481268 -71.49511,91.402808 -102.5141,148.229848 l -4.84865,9.69728 c 0.32011,15.24374 5.66195,2.60841 7.6193,3.11698 11.65211,-37.56029 56.79835,-95.24114 56.79835,-95.24114 l 58.18369,-79.656228 65.1103,17.31657 -4.15598,20.77989 -47.79373,40.867108 -27.01386,20.77988 -18.00923,-14.54592 -11.08261,14.54592 c -8.37474,-0.3043 6.02765,5.9515 11.08261,9.00462 l -0.69266,21.47255 c -1.44687,13.03228 2.24483,17.50027 6.23396,21.47255 5.74506,8.98413 12.73504,13.61104 22.16521,9.69728 l 19.39456,-11.77527 19.39456,-63.03232 35.32581,0.69266 -29.09184,51.94972 1.38532,2.07798 36.01847,-120.523328 82.42688,-3.46332 c 14.34381,-0.60268 -1.21426,15.9808 -4.84863,24.93587 l -33.94049,47.793728 -37.40379,51.94972 5.5413,0.69266 33.24782,-8.31195 9.69728,-22.16521 38.09645,-23.55054 4.84864,11.0826 -35.3258,22.16521 -2.07799,14.54592 c 9.40693,14.78376 23.93762,9.07249 36.71113,10.38995 l 38.78912,-72.7296 23.55054,19.39456 c -3.61572,7.46688 -1.58846,-1.28838 -18.00924,16.62391 -1.90405,7.78295 -13.09451,25.7954 0,18.70189 5.68109,6.73186 11.87489,7.28412 19.39456,-0.69266 l 11.08261,-8.31195 c 4.90913,-8.63997 9.12678,-16.35678 -6.92663,-18.00924 l -5.5413,-6.92663 -17.31657,-133.683928 c 0,0 -114.98204,7.6193 -114.98204,14.54592 0,6.92663 -9.69727,83.812208 -9.69727,83.812208"
id="path4359"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccsccccccccccccccccccccsc" />
</mask>
</svg>
</div>
<div class="gallery-canvas" id="gallery">
<div class="gallery-note">
<div class="gallery-date">
2015/07/10
</div>
<div class="gallery-title">
Animate your signature
</div>
<div class="gallery-subtitle">
SVG path animation with varying stroke width (HTML+CSS)
</div>
<div class="gallery-text">
You might have noticed the animated signature on this homepage. I'll admit, this wasn't my idea, but something I first saw on the 2015 <a href='http://2015.cssconf.com.au'>cssconf</a> homepage and I - naturally - wanted that for myself. <br><br>
I quickly noticed that this isn't as straight forward to create as I thought.<br><br>
In this tutorial I'll attemp to summarise everything that's necessary to to do this: from creating the SVG using <a href ='https://inkscape.org/en/'> Inkscape</a>, over animating a constant-width stroke based on <a href="https://css-tricks.com/svg-line-animation-works/">this amazing tutorial</a>, to a conversation I had with <a href="https://twitter.com/glenmaddern">Glen Maddern<a/> who gave me the final hints of how to make this work.
<br>
<br>
<div class = "gallery-subheading">Preparing the SVG elements</div>
The way to animating any path that doesn't have a constant stroke width starts with creating it first. An easy way of creating an SVG of a signature is to first draw it on a piece of paper, take a photo, and then use a tool to trace over it. A good and free program to create vector graphics is <a href ='https://inkscape.org/en/'> Inkscape</a>. No matter which program you use, you will normally be able to draw Bezier curves that match the outline of your letters. Fill your letters with the colour of your choice. Save the file as an SVG.
<br>
<br><img src="N1.png" style="width:500px; max-width:100%"><br>
<br>
Next, use a simple stroke and trace over the centre of the letter. Crank up the path width until the entire letter is covered. Delete the underlying letter and save the new path as an SVG.
<br>
<br><img src="N2.png" style="width:500px; max-width:100%"><br>
<br>
If you open these two files in a text editor, you should find a section embedded in <font color="009999"><path> ... </path></font>. This is the bit we need to copy into our HTML file.
<div class = "gallery-subheading">Constant-width stroke animation</div>
The trick to animate a path with constant stroke width is to use a dashed line instead of a solid one. The dashes have to be exactly one path length apart (a value that's easiest found by simply trying out different ones). Then, the offset - the location where the first dash is drawn - can be animated.
<br>
It's important to set the style correctly:<br>
fill:none;<br>
fill-rule:evenodd;<br>
stroke:#000000;<br>
stroke-width:40;<br>
stroke-linecap:round;<br>
<br>
...In our case, this will become the animation of our mask.
<br>
<br>
<p data-height="210" data-theme-id="16686" data-slug-hash="yNqLVy" data-default-tab="result" data-user="IsaKiko" class='codepen'>See the Pen <a href='http://codepen.io/IsaKiko/pen/yNqLVy/'>yNqLVy</a> by Isabell Kiral-Kornek (<a href='http://codepen.io/IsaKiko'>@IsaKiko</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
<br>
<br>
<div class = "gallery-subheading">Using the animation as a mask</div>
At the moment, it is impossible to animate a path with variable stroke-width. Technically, the stroke of our signature circumscribes it, which means, if we apply the same method as before, we end up with a dash-array circling around our letter. Instead, what we will do is use the animation we just made in order to mask the real signature.<br>
There are a few things, that are important here:
Especially if we have multiple letters, we want to group all the paths and assign a mask id to them using <br> <font color="009999"><g style="mask: url(#easyMask);"> ... </g></font>.<br> We then need to encapsulate the constant-width path in the according mask environment:<br> <font color="009999"><mask id="easyMask"> ... </mask></font>. <br>In order to make sure we draw the mask on top of the signature, we also need to assign z-values in CSS.
<br>
<br>
<p data-height="210" data-theme-id="16686" data-slug-hash="WvKNMe" data-default-tab="result" data-user="IsaKiko" class='codepen'>See the Pen <a href='http://codepen.io/IsaKiko/pen/WvKNMe/'>WvKNMe</a> by Isabell Kiral-Kornek (<a href='http://codepen.io/IsaKiko'>@IsaKiko</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
<div class = "gallery-subheading">The final version</div>
The actual signature has obviously a much longer path description. When using several letters, you have to make sure that the mask is still only one path. Draw over the letters as you would move a pen without lifting it from the paper. Below is the example from the front page.
<br>
<br>
<p data-height="210" data-theme-id="16686" data-slug-hash="vOjZeb" data-default-tab="result" data-user="IsaKiko" class='codepen'>See the Pen <a href='http://codepen.io/IsaKiko/pen/vOjZeb/'>vOjZeb</a> by Isabell Kiral-Kornek (<a href='http://codepen.io/IsaKiko'>@IsaKiko</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
Click on the rerun button to rewatch the animation.
</div>
</div>
<hr class="divider">
<!--
<div class="gallery-note">
<div class="gallery-date">
2015/07/10
</div>
<div class="gallery-title">
This is a title
</div>
<div class="gallery-subtitle">
This is a subtitle
</div>
<div class="gallery-text">
This is some content <br>
Moar content
</div>
</div>
<hr class="divider">
</div>
</div>
-->
<script type="text/javascript">
var ga = document.getElementById("gallery");
var nb = document.getElementById("notebook");
var gaStatus = 0;
nb.addEventListener("click", function(e) {
if (gaStatus == 0) {
ga.style.top = "calc(-100% + 3em)";
gaStatus = 1;
}
else{
ga.style.top = "0";
gaStatus = 0;
}
})
</script>
</body>
</html>
<!--
<div class="gallery-note">
<div class="gallery-date">
2015/07/10
</div>
<div class="gallery-title">
This is a title
</div>
<div class="gallery-subtitle">
This is a subtitle
</div>
<div class="gallery-text">
This is some content <br>
Moar content
</div>
</div>
<hr class="divider">
-->