-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
696 lines (582 loc) · 143 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
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
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
<!DOCTYPE html>
<html class="sl-root decks export offline loaded">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>The SVG Files</title>
<meta name="description" content="The SVG Files Slides for CSSConf Colombia 2021">
<link rel="stylesheet" type="text/css" href="lib/offline-v2.css">
<!-- User CSS -->
<style id="user-css-output" type="text/css">
.reveal {
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
background: radial-gradient(#222, #000);
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 100;
src: url(https://fonts.gstatic.com/s/lato/v17/S6u8w4BMUTPHh30AUi-qNiXg7eU0.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 100;
src: url(https://fonts.gstatic.com/s/lato/v17/S6u8w4BMUTPHh30AXC-qNiXg7Q.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh7USSwaPGQ3q5d0N7w.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh7USSwiPGQ3q5d0.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 900;
src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh50XSwaPGQ3q5d0N7w.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 900;
src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh50XSwiPGQ3q5d0.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptug8zYS_SKggPNyCAIT4ttDfCmxA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptug8zYS_SKggPNyCkIT4ttDfCmxA.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptug8zYS_SKggPNyCIIT4ttDfCmxA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptug8zYS_SKggPNyCAIT4ttDfCmxA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptug8zYS_SKggPNyCkIT4ttDfCmxA.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptug8zYS_SKggPNyCIIT4ttDfCmxA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptug8zYS_SKggPNyCAIT4ttDfCmxA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptug8zYS_SKggPNyCkIT4ttDfCmxA.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptug8zYS_SKggPNyCIIT4ttDfCmxA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.reveal .hljs {
background-color: transparent;
}
.reveal .controls button {
color: #dc0028;
}
.reveal .progress span {
background: #dc0028;
}
.reveal .slides a {
color: #666;
text-decoration: underline;
}
.reveal .slide-number {
font-size: 20px;
}
.reveal body {
color: #666;
}
.reveal .slides h1,
.reveal .slides h2,
.reveal .slides h3,
.reveal .slides p,
.reveal .slides ul,
.reveal .slides li {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
}
.reveal .slides h1 {
font-size: 3.77em;
line-height: 1;
}
.reveal .slides h2 {
font-size: 63px;
}
.reveal .slides h3,
.reveal .slides p,
.reveal .slides li {
font-size: 30px;
line-height: 1.3;
}
.reveal .slides pre {
line-height: 1.1;
font-size: 26px;
background-color: #000;
}
.reveal .slides pre code {
padding: 15px;
}
.reveal .slides a:hover,
.reveal .slides a:hover .underline {
color: #666;
}
.reveal ul.small-text li {
font-size: 26px !important;
}
.reveal .primary {
color: #dc0028 !important;
}
.reveal .secondary {
color: #111 !important;
}
.reveal .tertiary {
color: #666 !important;
}
.reveal .thin {
font-family: 'Lato';
font-style: normal;
font-weight: 100;
}
.reveal .light {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
}
.reveal .regular {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
}
.reveal .bold {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
}
.reveal .black {
font-family: 'Raleway';
font-style: normal;
font-weight: 900;
}
.reveal p.code-title,
.reveal span.code-title {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
font-size: 20px;
}
.reveal .underline {
text-decoration: none;
border-bottom: 1px solid #666 !important;
}
.reveal a.link {
font-size: 20px;
}
.reveal .slides .special {
margin-bottom: 20px;
}
.reveal div.controls-arrow {
color: #dc0028 !important;
}
.reveal div.progress span {
background-color: #dc0028 !important;
}
.reveal .circle {
border-radius: 50%;
}
</style>
</head>
<body class="reveal-viewport theme-font-montserrat theme-color-grey-blue">
<div class="reveal">
<div class="slides">
<section class="stack" data-id="11173e961232649ebe8c42b4b297b60f"><section data-id="6c59c7373708fe4911b8a0cf85e4e91a" data-background-image="thesvgfiles/062222a80ce682718730b66e32792f9a.jpg"><div class="sl-block" data-block-type="image" data-name="image-238c52" data-block-id="021fc0336a93d21ab8f1f7745a6a4804" style="width: 327.839px; height: 319px; left: 290.161px; top: 128.5px; min-width: 1px; min-height: 1px;"><div class="sl-block-style" style="z-index: 11; opacity: 0.06;"><div class="sl-block-content" style="z-index: 11; --svg-color:rgb(255, 255, 255);" data-inline-svg="true">
<img style="" data-natural-width="408" data-natural-height="397" data-lazy-loaded="" data-src="thesvgfiles/244b8a2f95c74d3436fef8a30627385f.svg"><svg xmlns="http://www.w3.org/2000/svg" width="408" height="397" fill="none" viewbox="0 0 408 397" preserveaspectratio="xMidYMid meet"><path fill="#8EA4CE" d="M188.562 277.448C189.63 277.515 190.698 277.582 191.833 277.582C193.835 277.381 189.63 277.381 188.562 277.448Z" style="fill: var(--svg-color, rgb(142, 164, 206));"></path><path fill="#8EA4CE" d="M405.011 208.19C402.942 194.512 399.404 181.1 395.934 167.756C393.264 157.347 392.73 142.201 387.858 132.793C380.85 119.248 366.366 127.388 354.753 128.723C340.937 130.258 327.055 131.592 313.172 131.725C297.087 131.859 262.047 133.26 260.512 110.641C259.577 97.4967 269.255 86.6876 274.327 75.4114C278.933 65.0026 279.533 52.5255 276.93 41.5829C270.924 16.295 252.769 6.48672 228.608 2.14974C198.908 -3.18809 172.811 2.08302 144.445 10.6235C131.363 14.5602 118.215 18.2967 104.599 19.7646C95.5224 20.6987 97.4579 19.2308 95.9228 26.4368C95.0552 30.3735 97.4579 32.5086 101.129 32.909C116.146 34.3101 131.097 35.9782 146.047 37.5796C158.928 38.914 159.729 29.4394 168.806 21.833C183.757 9.15564 212.256 7.08723 229.81 14.6936C279.2 36.0449 245.428 115.979 195.837 108.306C183.757 106.438 171.81 98.8978 166.003 88.022C163 82.4173 156.659 71.3413 149.184 71.0744C136.569 70.5406 123.888 70.0736 111.274 69.6065C107.536 69.4731 100.795 67.805 97.5914 70.6741C93.8538 73.9435 96.924 77.5465 100.728 77.9469C121.352 80.1487 150.586 87.6217 151.053 113.31C151.653 143.202 113.61 133.794 94.855 131.659C70.6939 128.923 35.9207 119.649 12.1601 127.188C-6.12749 132.926 3.08307 179.499 3.2833 194.378C3.68376 194.378 3.95073 243.019 3.95073 247.623C4.01747 255.563 18.434 256.23 18.5675 245.421C18.6342 236.414 17.5663 227.539 16.8989 218.599C15.4973 200.917 13.4283 178.231 19.5019 161.217C24.8413 146.138 45.3315 147.539 58.6134 146.538C70.3602 145.604 82.1737 145.404 93.9205 145.871C98.7928 146.071 112.942 144.67 116.747 148.006C120.284 151.209 111.474 166.088 110.473 169.958C108.471 177.831 108.003 185.904 108.003 193.978C108.07 212.86 110.206 234.812 119.149 251.76C125.49 263.77 140.374 270.642 143.11 284.387C145.847 298.399 136.236 319.484 131.097 332.228C128.627 338.299 109.538 375.731 130.629 374.73C140.107 374.33 147.449 331.494 149.718 323.554C151.32 317.949 156.592 284.521 164.535 285.255C177.883 286.456 166.537 318.283 165.002 327.157C161.865 345.572 157.06 363.587 153.722 381.936C151.987 391.544 153.055 392.345 162.199 393.746C169.874 394.88 170.475 383.537 171.142 378.667C173.478 360.985 175.481 343.237 179.552 325.822C180.086 323.554 187.561 294.93 190.097 296.531C198.107 301.669 194.169 318.216 193.435 326.022C192.233 338.633 189.897 351.11 189.03 363.788C188.629 369.993 185.492 387.608 189.163 392.812C192.3 397.216 202.645 396.415 206.583 394.547C209.453 393.212 207.251 383.004 207.184 380.735C206.783 368.124 207.117 355.38 207.384 342.77C207.651 329.092 208.452 315.413 209.386 301.735C210.387 287.99 219.531 284.12 222.268 299.667C227.14 327.157 227.207 355.514 229.743 383.271C230.878 395.614 244.493 376.732 245.428 373.396C248.431 361.919 245.494 348.241 244.56 336.631C243.158 320.017 241.356 303.337 242.825 286.656C244.093 272.844 254.104 292.127 254.905 294.996C258.443 307.674 261.446 320.484 263.115 333.562C264.516 344.638 263.782 356.848 268.521 367.257C273.326 377.666 284.472 376.598 287.943 365.522C291.28 354.847 285.34 343.704 281.602 334.096C276.53 321.152 273.326 307.54 269.856 294.129C267.453 284.721 258.443 266.839 265.317 258.365C282.403 237.214 288.944 215.062 289.078 187.906C289.144 176.63 285.006 165.354 285.273 154.478C285.54 142.134 304.295 145.204 312.304 144.87C325.987 144.269 377.112 136.396 380.449 154.345C385.455 181.834 384.32 210.125 384.787 237.948C384.921 247.089 385.188 251.827 395.8 250.559C399.671 250.092 403.275 248.357 405.278 244.887C410.55 235.213 406.612 218.532 405.011 208.19ZM271.991 212.527C264.783 252.027 229.609 274.779 191.766 277.515C188.295 277.448 187.895 277.448 188.496 277.381C143.444 274.846 119.283 233.945 121.886 191.109C124.422 148.94 158.194 124.519 200.176 123.785C254.972 122.851 280.601 165.754 271.991 212.527Z" style="fill: var(--svg-color, rgb(142, 164, 206));"></path><path fill="#8EA4CE" d="M202.311 90.7576C223.135 90.3573 244.627 74.2771 239.688 51.4579C235.883 33.9765 219.932 20.7654 201.978 21.099C154.924 22.0999 160.864 91.5583 202.311 90.7576ZM206.316 30.0399C238.82 33.1091 233.347 80.8827 203.046 79.6817C164.068 78.0803 169.541 26.5036 206.316 30.0399Z" style="fill: var(--svg-color, rgb(142, 164, 206));"></path><path fill="#8EA4CE" d="M50.6042 208.523C50.6042 201.584 52.9403 161.284 47.4006 161.817C30.8483 163.552 33.9184 194.445 34.1187 207.856C34.2522 218.665 32.4501 258.766 48.7354 257.164C56.5444 256.364 51.6721 242.419 51.2717 236.48C50.671 227.206 50.6042 217.865 50.6042 208.523Z" style="fill: var(--svg-color, rgb(142, 164, 206));"></path><path fill="#8EA4CE" d="M335.264 154.144C322.449 151.742 324.251 160.616 325.253 169.224C326.454 179.566 327.388 189.974 327.522 200.383C327.722 214.462 327.188 228.54 326.854 242.686C326.721 248.624 342.272 251.026 342.272 249.291C342.539 228.407 340.003 207.656 339.068 186.839C338.868 178.431 344.141 155.812 335.264 154.144Z" style="fill: var(--svg-color, rgb(142, 164, 206));"></path><path fill="#8EA4CE" d="M366.3 155.812C365.165 150.141 355.354 149.874 355.487 155.946C355.821 168.156 356.755 180.433 357.356 192.643C357.69 200.45 355.287 250.959 365.832 250.959C379.715 250.892 369.503 215.062 369.036 207.523C367.968 190.708 369.57 172.226 366.3 155.812Z" style="fill: var(--svg-color, rgb(142, 164, 206));"></path><path fill="#8EA4CE" d="M76.7008 193.978C76.3004 183.169 76.7008 172.159 75.5662 161.417C75.099 157.214 71.6951 155.412 67.7572 157.48C64.954 158.948 65.488 164.219 65.1543 166.955C63.3522 184.236 64.4201 201.718 65.8884 218.999C66.5559 227.139 67.0231 235.279 68.1577 243.419C69.4926 252.961 76.1001 252.093 76.5673 242.886C77.3015 226.605 77.3682 210.258 76.7008 193.978C76.7008 193.177 76.6341 192.443 76.7008 193.978Z" style="fill: var(--svg-color, rgb(142, 164, 206));"></path><path fill="#8EA4CE" d="M76.7008 193.978C76.7675 195.646 76.7675 194.779 76.7008 193.978V193.978Z" style="fill: var(--svg-color, rgb(142, 164, 206));"></path><path fill="#8EA4CE" d="M308.9 172.426C308.9 172.827 308.9 173.16 308.9 173.227C308.9 173.16 308.9 172.96 308.9 172.426C308.9 171.959 308.9 171.692 308.9 171.626C308.9 171.759 308.9 172.026 308.9 172.36C308.9 166.488 309.835 156.346 301.559 158.481C295.218 160.083 296.753 167.022 297.02 172.093C298.021 190.642 299.022 209.124 300.024 227.673C300.29 232.877 298.488 242.085 305.43 241.885C315.174 241.618 311.904 228.54 311.637 222.535C310.769 205.855 308.9 189.107 308.9 172.426Z" style="fill: var(--svg-color, rgb(142, 164, 206));"></path><path fill="#8EA4CE" d="M93.8538 161.084C85.4442 158.415 86.1784 244.754 94.855 245.555C104.666 246.422 104.533 164.486 93.8538 161.084Z" style="fill: var(--svg-color, rgb(142, 164, 206));"></path><path fill="#8EA4CE" d="M143.911 60.9326C153.722 60.3321 155.725 59.9317 154.523 50.8574C153.923 46.3203 100.929 35.5112 95.8561 48.5888C90.7169 62.0001 141.442 61.066 143.911 60.9326Z" style="fill: var(--svg-color, rgb(142, 164, 206));"></path><path fill="#8EA4CE" d="M157.727 150.875C129.762 173.694 121.285 212.994 146.781 241.218C171.943 269.108 216.861 266.639 246.629 236.881C256.373 227.139 259.978 204.453 260.178 199.182C260.912 182.835 254.838 166.488 244.226 154.078C220.799 126.988 184.358 129.123 157.727 150.875ZM231.945 234.612C215.593 248.09 179.485 255.83 158.261 233.344C139.239 213.194 140.774 183.903 159.996 164.553C207.784 116.446 291.881 184.97 231.945 234.612Z" style="fill: var(--svg-color, rgb(142, 164, 206));"></path><path fill="#8EA4CE" d="M206.983 69.1395C227.54 65.2028 221 39.1142 201.377 39.7147C178.15 40.4487 184.491 73.4097 206.983 69.1395ZM203.913 48.1885C213.992 48.1885 212.99 61.7332 203.98 63.0677C194.169 64.4689 199.175 48.1885 203.913 48.1885Z" style="fill: var(--svg-color, rgb(142, 164, 206));"></path><path fill="#8EA4CE" d="M203.58 160.95C152.454 158.415 140.507 225.471 188.629 237.348C239.955 250.092 261.646 167.956 203.58 160.95ZM190.231 228.874C156.259 215.93 172.277 161.284 208.252 169.491C244.426 179.699 224.737 242.018 190.231 228.874Z" style="fill: var(--svg-color, rgb(142, 164, 206));"></path><path fill="#8EA4CE" d="M203.046 179.699C181.688 180.099 174.613 213.261 195.504 217.264C219.398 221.868 229.009 179.432 203.046 179.699ZM192.901 200.183C192.901 200.383 192.901 200.517 192.901 200.65C192.901 200.517 192.901 200.383 192.901 200.183C192.967 199.316 192.967 198.448 192.901 200.183C193.168 192.577 205.582 192.377 205.382 199.649C205.115 207.322 192.634 207.923 192.901 200.183Z" style="fill: var(--svg-color, rgb(142, 164, 206));"></path></svg>
</div></div></div></section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="720f102ed92fa60a9aae436b22973c13">
<div class="sl-block" data-block-type="iframe" data-name="iframe-e73899" style="width: 1024px; height: 576px; left: 0px; top: 0px;" data-block-id="2ae077200b296e4a4a97d74f6a034c20"><div class="sl-block-content" style="z-index: 10;"><iframe webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" sandbox="allow-forms allow-scripts allow-popups allow-same-origin allow-pointer-lock allow-presentation" data-src="https://codepen.io/carmenansio/embed/XWbgeKW?height=265&theme-id=dark&default-tab=result&editable=true"></iframe></div></div>
</section></section><section data-id="37c92f97d75c9ab3b17c24ba1514d289" data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-auto-animate="">
<div class="sl-block" data-block-type="text" data-name="text-f94cdf" data-block-id="17a715869023cff0e1d59f511abc1676" style="height: auto; width: 79px; left: 925px; top: 527px;"><a class="sl-block-style" style="z-index: 10;" href="https://storyset.com/space" target="_blank"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 10;">
<p><span style="font-size:0.5em">Storyset</span></p>
</div></a></div>
<div class="sl-block" data-block-type="image" data-name="image-e1ca6c" data-block-id="d1ced9f388070aeeaa96ab11574c93e9" style="width: 639.36px; height: 426.24px; left: 192.32px; top: 74.88px; min-width: 1px; min-height: 1px;"><div class="sl-block-content" style="z-index: 12;"><img style="" data-natural-width="750" data-natural-height="500" data-crop-x="0" data-crop-y="0" data-crop-width="1" data-crop-height="1" data-lazy-loaded="" data-src="thesvgfiles/203565c857393c46d06009781e475df3.svg"></div></div></section><section class="stack" data-id="604fca36ec682673b6d82197f5b622ce"><section data-id="08296a23ad07783359981a8bcd888771" data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg"><div class="sl-block" data-block-type="text" style="width: 138.86px; left: 442.57px; top: 525.06px; height: auto;" data-block-id="7ca5b92e336979389542f3d49a1d8aea" data-name="twitter-handler">
<div class="sl-block-content" data-placeholder-tag="h2" data-placeholder-text="Subtitle" style="z-index: 11; text-align: center; color: rgb(255, 255, 255); transition-duration: 0.6s; transition-delay: 0.6s;" data-animation-type="fade-in">
<h3><strong><span style="font-size:0.7em"><a href="https://twitter.com/carmenansio" target="_blank"><span style="color:#FFFFFF"><span class="u-dir username"><span class="u-linkComplex-target">@carmenansio</span> </span> </span></a></span></strong></h3>
</div>
</div>
<div class="sl-block" data-block-type="image" data-name="image-674ea9" data-block-id="89950e09fade4564ba68d95ec0d63a5b" style="width: 544.56px; height: 544.56px; left: 239.72px; top: 0px; min-width: 1px; min-height: 1px;"><div class="sl-block-content" style="z-index: 10;"><img data-natural-width="500" data-natural-height="500" style="" data-lazy-loaded="" data-src="thesvgfiles/b8aa26ff4d7edaf1fc83cccffc9b2d61.svg"></div></div>
<div class="sl-block" data-block-type="text" data-name="text-f94cdf" style="height: auto; width: 79px; left: 925px; top: 527px;" data-block-id="e0f4c588b252ba40c3afa64e7d528076"><a class="sl-block-style" style="z-index: 12;" href="https://storyset.com/space" target="_blank"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 12;">
<p><span style="font-size:0.5em">Storyset</span></p>
</div></a></div>
<div class="sl-block" data-block-type="image" data-name="image-c26a69" style="width: 49.276px; height: 49.7344px; left: 345.724px; top: 128.134px; min-width: 1px; min-height: 1px;" data-block-id="b2994afc27d56afeb0877f1cdac779e3"><div class="sl-block-content" style="z-index: 13;"><img data-natural-width="215" data-natural-height="217" style="" data-lazy-loaded="" data-src="thesvgfiles/744462100ed98addc8dc3a9443669a37.svg"></div></div></section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="29c5c6985f6b1eef1a56229c5daeaeef">
<div class="sl-block" data-block-type="iframe" data-name="iframe-e73899" style="width: 975px; height: 509px; left: 24.5px; top: 18px;" data-block-id="665690009e808f61e412073866f46b1d"><div class="sl-block-content" style="z-index: 10;"><iframe webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" sandbox="allow-forms allow-scripts allow-popups allow-same-origin allow-pointer-lock allow-presentation" data-src="https://codepen.io/carmenansio/embed/927ee8d0da414c7f3a0cad7c3466b37f?height=265&theme-id=dark&default-tab=result&editable=true"></iframe></div></div>
<div class="sl-block" data-block-type="text" data-name="text-f94cdf" style="height: auto; width: 79px; left: 925px; top: 527px;" data-block-id="201f843b25f15cdc84a0205c2766f7f4"><a class="sl-block-style" style="z-index: 11;" href="https://storyset.com/space" target="_blank"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 11;">
<p><span style="font-size:0.5em">Storyset</span></p>
</div></a></div></section><section data-id="559b10d1065ad99327fcc8b525b4e45b" data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg">
<div class="sl-block" data-block-type="text" data-name="text-f94cdf" style="height: auto; width: 79px; left: 926px; top: 526px;" data-block-id="f35dcc8ad72f4b300cc26c8c52444ef4"><a class="sl-block-style" style="z-index: 10;" href="https://jakearchibald.github.io/svgomg/" target="_blank"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 10;">
<p><span style="font-size:0.5em">SVGOMG</span></p>
</div></a></div>
<div class="sl-block" data-block-type="image" data-name="image-0a7d01" data-block-id="03a31e51a15016cfe6225a5805721ffd" style="width: 874.981px; height: 484.5px; left: 74.5095px; top: 45.75px; min-width: 1px; min-height: 1px;"><div class="sl-block-content" style="z-index: 11;"><img data-natural-width="2308" data-natural-height="1278" style="" data-lazy-loaded="" data-src="thesvgfiles/9abd763c4399a000a5cca1dc30b18a98.png"></div></div></section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="810729458726a8f9172a4d65e24ff1b2">
<div class="sl-block" data-block-type="iframe" data-name="iframe-f4665c" style="width: 964.613px; height: 492.032px; left: 29.6935px; top: 41.984px;" data-block-id="d2d376884eb7684a5d88cb4dc581129f"><div class="sl-block-content" style="z-index: 10;"><iframe webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" sandbox="allow-forms allow-scripts allow-popups allow-same-origin allow-pointer-lock allow-presentation" data-preload="true" data-lazy-loaded="" data-src="https://codepen.io/carmenansio/embed/4be350bc3bc0b0d9d1fd4309455f3580?height=265&theme-id=dark&default-tab=result&editable=true"></iframe></div></div>
<div class="sl-block" data-block-type="text" data-name="text-f94cdf" style="height: auto; width: 79px; left: 925px; top: 527px;" data-block-id="acc7bea5526d130bc19d022e3439ca22"><a class="sl-block-style" style="z-index: 11;" href="https://storyset.com/science" target="_blank"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 11;">
<p><span style="font-size:0.5em">Storyset</span></p>
</div></a></div></section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="7c8467d701dd14a3e7cee9aac42a3356">
<div class="sl-block" data-block-type="iframe" style="width: 1024px; height: 576px; left: 0px; top: 0px;" data-block-id="26c23c6758ace50320c992c1f6b82063" data-name="iframe-bdd946">
<div class="sl-block-content" style="z-index: 10; transition-duration: 0.6s; transition-delay: 0.6s;" data-animation-type="fade-in">
<iframe webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" sandbox="allow-forms allow-scripts allow-popups allow-same-origin allow-pointer-lock allow-presentation" data-src="https://wattenberger.com/guide/scaling-svg"></iframe>
</div>
</div></section></section><section class="stack" data-id="c6c7e437bb94cd0b115732dc4df40440"><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="4da1a114fba879c0391b476204cd85d8"><div class="sl-block" data-block-type="text" style="width: 693.5px; left: 127.25px; top: 210px; height: auto;" data-block-id="7a813385cc3c784f12b1d6b65c375628">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10; transition-duration: 0.6s; transition-delay: 0.6s;" data-animation-type="slide-down">
<blockquote>
<h3>
<span style="font-size:2.0em"><strong>Which is the best option to animate a</strong></span><span style="font-size:2.0em"><strong> <span class="primary">SVG </span>?</strong></span>
</h3>
</blockquote>
</div>
</div></section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="5c67ec3cb43a318f21d54576a7f1ff6c">
<div class="sl-block" data-block-type="image" data-name="image-e2a68f" style="width: 309px; height: 57px; left: 398.5px; top: 187.5px; min-width: 1px; min-height: 1px;" data-block-id="5b88e61817bf1fe55be4f2d4b88a1fea"><a class="sl-block-content fragment" style="z-index: 14;" data-inline-svg="false" href="https://www.svgator.com/" target="_blank" data-fragment-index="0"><img style="" data-natural-width="103" data-natural-height="19" data-lazy-loaded="" data-src="thesvgfiles/7b5d2ff33e3a1b3056fa8000f1bebb27.svg"></a></div>
<div class="sl-block" data-block-type="image" data-name="image-bf4f1e" style="width: 287.244px; height: 123.25px; left: 160.334px; top: 307.644px; min-width: 1px; min-height: 1px;" data-block-id="e08ce04de11fa40d46c28df4dcba7f35"><a class="sl-block-content fragment" style="z-index: 15; --svg-color:rgb(255, 255, 255);" data-inline-svg="true" href="https://svgartista.net/" target="_blank" data-fragment-index="1"><img data-natural-width="564" data-natural-height="242" style="" data-lazy-loaded="" data-src="thesvgfiles/079af2f9a8bcd143d6b0dfd6260a7107.svg"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 564 242" version="1.1" width="564" height="242" preserveaspectratio="xMidYMid meet">
<g stroke-width="2" stroke="none" fill="none" fill-rule="evenodd">
<path d="M284.896413 1.77679122c.882345.50911399 1.614955 1.2417713 2.124036 2.124173l21.099094 36.57152808-23.135682 15.8357502c4.105694 3.2404436 6.948421 5.8686448 8.528184 7.8846038 1.579762 2.0159589 3.442094 5.5716267 5.586996 10.6670034l18.980455-17.1235485 38.506082 66.7434478c1.599912 2.773164.648949 6.318327-2.124036 7.918342-.880865.50826-1.879934.775822-2.896898.775822h-1.922491c-20.321792-10.300399-43.304909-16.104436-67.642638-16.104436-24.337728 0-47.320846 5.804037-67.642638 16.104436h-1.92249c-3.201432 0-5.796706-2.595441-5.796706-5.79708 0-1.01703.267545-2.016163.775772-2.897084L276.978581 3.90096422c1.599913-2.77316415 5.144847-3.7241888 7.917832-2.124173zm-22.79159 66.41506168c-11.912588 9.3077337-11.944524 23.5356033-27.180843 31.0058222 21.073897 5.2094339 33.551253 4.4950599 46.817544-5.8703705 13.266291-10.3654307 12.78672-21.586947 8.366252-27.2452528-4.420468-5.6583057-16.090365-7.1979325-28.002953 2.1098011z" stroke="#00CCAE" fill="#00CCAE" class="svg-elem-1" style="fill: var(--svg-color, rgb(0, 204, 174)); stroke: var(--svg-color, rgb(0, 204, 174));"></path>
<path d="M20.7357156 241c-3.6819127 0-7.2356044-.568639-10.66118144-1.705935C6.64895709 238.15677 3.95747261 236.68295 2 234.872561l2.58664731-5.431139c1.86425963 1.671128 4.25280646 3.028899 7.16571213 4.073354 2.91290566 1.044455 5.90732776 1.566675 8.98335616 1.566675 4.0547647 0 7.0841412-.684688 9.0882203-2.054085 2.0040791-1.369396 3.0061036-3.191363 3.0061036-5.465954 0-1.671128-.547618-3.028899-1.6428706-4.073354-1.0952525-1.044455-2.4468205-1.845192-4.0547444-2.402235-1.6079239-.557043-3.8799563-1.183706-6.8161652-1.88001-3.6819128-.881984-6.653032-1.763955-8.91344679-2.645939-2.26041481-.881985-4.19455516-2.239756-5.8024791-4.073355-1.60792393-1.833599-2.41187384-4.305438-2.41187384-7.415594 0-2.599532.68743543-4.943718 2.06232691-7.032629 1.37489148-2.08891 3.46050066-3.760013 6.25689011-5.013359 2.79638941-1.253346 6.26852091-1.880009 10.41649861-1.880009 2.8896024 0 5.7325557.371356 8.5289452 1.114079 2.7963894.742724 5.1965877 1.810373 7.2006668 3.20298l-2.3070098 5.570399c-2.0506855-1.299766-4.2411578-2.286181-6.5714823-2.959275-2.3303245-.673093-4.6140083-1.009634-6.8511199-1.009634-3.9615517 0-6.9326709.719502-8.9134468 2.158529-1.98077586 1.439027-2.97114893 3.295808-2.97114893 5.570399 0 1.671129.5592695 3.0289 1.67782528 4.073355 1.11855575 1.044455 2.50507805 1.856797 4.15960855 2.437049 1.6545304.580253 3.9032598 1.195312 6.7462558 1.845195 3.6819127.881984 6.6413805 1.763956 8.8784921 2.64594 2.2371115.88198 4.1596004 2.22815 5.7675244 4.038539 1.6079239 1.810389 2.4118738 4.247414 2.4118738 7.311149 0 2.553112-.6990869 4.885694-2.0972816 6.997814-1.3981947 2.11212-3.5187582 3.783223-6.3617542 5.013359C28.3791277 240.384941 24.8836933 241 20.7357156 241z" stroke="#1D1B1D" fill="#1D1B1D" class="svg-elem-2" style="fill: var(--svg-color, rgb(29, 27, 29)); stroke: var(--svg-color, rgb(29, 27, 29));"></path>
<path stroke="#1D1B1D" fill="#1D1B1D" d="M102.289855 191.724638L80.8535704 240.42029h-6.9126781l-21.5061097-48.695652h7.5411034l17.5959079 40 17.735558-40z" class="svg-elem-3" style="fill: var(--svg-color, rgb(29, 27, 29)); stroke: var(--svg-color, rgb(29, 27, 29));"></path>
<path d="M152.031506 215.793944h6.654064v19.008987c-2.402868 1.99607-5.198472 3.527914-8.386893 4.595579C147.110255 240.46617 143.783256 241 140.31758 241c-4.898155 0-9.311049-1.079254-13.238815-3.237795-3.927766-2.15854-7.012171-5.12939-9.253308-8.912638-2.241137-3.783249-3.361689-8.04224-3.361689-12.777103 0-4.734863 1.120552-9.00546 3.361689-12.811918 2.241137-3.806459 5.337094-6.777309 9.287965-8.912639 3.95087-2.13533 8.398421-3.202979 13.342785-3.202979 3.881557 0 7.404941.638268 10.570258 1.914824 3.165317 1.276556 5.856952 3.144942 8.074984 5.605214l-4.297416 4.31706c-3.881557-3.760038-8.571701-5.640029-14.070574-5.640029-3.69672 0-7.012167.800736-9.946439 2.402234-2.934273 1.601498-5.233136 3.829635-6.896661 6.684479-1.663524 2.854844-2.495274 6.069396-2.495274 9.643754 0 3.527937.83175 6.719279 2.495274 9.574123 1.663525 2.854844 3.962388 5.094586 6.896661 6.719294 2.934272 1.624708 6.226614 2.43705 9.877126 2.43705 4.343647 0 8.132729-1.044439 11.36736-3.13335v-15.875637z" stroke="#1D1B1D" fill="#1D1B1D" class="svg-elem-4" style="fill: var(--svg-color, rgb(29, 27, 29)); stroke: var(--svg-color, rgb(29, 27, 29));"></path>
<path d="M233.231687 191.724638l22.101646 48.695652h-7.297713l-5.351657-12.173913h-25.854756l-5.351657 12.173913h-7.158709l22.032144-48.695652h6.880702zm-3.475102 7.095652l-10.494807 23.860869h20.989614l-10.494807-23.860869z" stroke="#1D1B1D" fill="#1D1B1D" class="svg-elem-5" style="fill: var(--svg-color, rgb(29, 27, 29)); stroke: var(--svg-color, rgb(29, 27, 29));"></path>
<path d="M292.229824 191.724638c6.285416 0 11.230485 1.507231 14.835356 4.521739 3.60487 3.014508 5.407279 7.165191 5.407279 12.452174 0 3.75654-.924312 6.956508-2.772964 9.6-1.848652 2.643491-4.482941 4.56811-7.902946 5.773913l11.507799 16.347826h-7.556326l-10.467938-14.956522c-1.294056.092754-2.310799.139131-3.05026.139131h-11.993067v14.817391h-6.932409v-48.695652h18.925476zm-.207972 6.052174h-11.785095v21.913043h11.785095c4.390548 0 7.741179-.950715 10.051993-2.852174 2.310815-1.901459 3.466205-4.614475 3.466205-8.13913 0-3.524656-1.15539-6.226078-3.466205-8.104348-2.310814-1.87827-5.661445-2.817391-10.051993-2.817391z" stroke="#1D1B1D" fill="#1D1B1D" class="svg-elem-6" style="fill: var(--svg-color, rgb(29, 27, 29)); stroke: var(--svg-color, rgb(29, 27, 29));"></path>
<path stroke="#1D1B1D" fill="#1D1B1D" d="M343.217992 197.776812h-16.580311v-6.052174h40v6.052174H350.05737v42.643478h-6.839378z" class="svg-elem-7" style="fill: var(--svg-color, rgb(29, 27, 29)); stroke: var(--svg-color, rgb(29, 27, 29));"></path>
<path stroke="#1D1B1D" fill="#1D1B1D" d="M384.608696 191.724638h6.956521v48.695652h-6.956521z" class="svg-elem-8" style="fill: var(--svg-color, rgb(29, 27, 29)); stroke: var(--svg-color, rgb(29, 27, 29));"></path>
<path d="M431.170498 241c-3.681913 0-7.235604-.568639-10.661181-1.705935-3.425577-1.137295-6.117062-2.611115-8.074534-4.421504l2.586647-5.431139c1.86426 1.671128 4.252806 3.028899 7.165712 4.073354 2.912906 1.044455 5.907328 1.566675 8.983356 1.566675 4.054765 0 7.084141-.684688 9.088221-2.054085 2.004079-1.369396 3.006103-3.191363 3.006103-5.465954 0-1.671128-.547618-3.028899-1.64287-4.073354-1.095253-1.044455-2.446821-1.845192-4.054745-2.402235-1.607924-.557043-3.879956-1.183706-6.816165-1.88001-3.681913-.881984-6.653032-1.763955-8.913447-2.645939-2.260415-.881985-4.194555-2.239756-5.802479-4.073355-1.607924-1.833599-2.411874-4.305438-2.411874-7.415594 0-2.599532.687436-4.943718 2.062327-7.032629 1.374892-2.08891 3.460501-3.760013 6.25689-5.013359 2.79639-1.253346 6.268521-1.880009 10.416499-1.880009 2.889602 0 5.732556.371356 8.528945 1.114079 2.796389.742724 5.196588 1.810373 7.200667 3.20298l-2.30701 5.570399c-2.050686-1.299766-4.241158-2.286181-6.571482-2.959275-2.330325-.673093-4.614009-1.009634-6.85112-1.009634-3.961552 0-6.932671.719502-8.913447 2.158529-1.980776 1.439027-2.971149 3.295808-2.971149 5.570399 0 1.671129.55927 3.0289 1.677825 4.073355 1.118556 1.044455 2.505078 1.856797 4.159609 2.437049 1.65453.580253 3.90326 1.195312 6.746256 1.845195 3.681912.881984 6.64138 1.763956 8.878492 2.64594 2.237111.88198 4.1596 2.22815 5.767524 4.038539 1.607924 1.810389 2.411874 4.247414 2.411874 7.311149 0 2.553112-.699087 4.885694-2.097282 6.997814-1.398194 2.11212-3.518758 3.783223-6.361754 5.013359C438.81391 240.384941 435.318476 241 431.170498 241z" stroke="#1D1B1D" fill="#1D1B1D" class="svg-elem-9" style="fill: var(--svg-color, rgb(29, 27, 29)); stroke: var(--svg-color, rgb(29, 27, 29));"></path>
<path stroke="#1D1B1D" fill="#1D1B1D" d="M479.449876 197.776812h-16.580311v-6.052174h40v6.052174h-16.580311v42.643478h-6.839378z" class="svg-elem-10" style="fill: var(--svg-color, rgb(29, 27, 29)); stroke: var(--svg-color, rgb(29, 27, 29));"></path>
<path d="M539.898353 191.724638L562 240.42029h-7.297714l-5.351656-12.173913h-25.854757l-5.351656 12.173913h-7.15871l22.032145-48.695652h6.880701zm-3.475101 7.095652l-10.494808 23.860869h20.989615l-10.494807-23.860869z" stroke="#1D1B1D" fill="#1D1B1D" class="svg-elem-11" style="fill: var(--svg-color, rgb(29, 27, 29)); stroke: var(--svg-color, rgb(29, 27, 29));"></path>
</g>
</svg></a></div>
<div class="sl-block" data-block-type="image" data-name="image-6b6c58" style="width: 79.495px; height: 79.495px; left: 750.253px; top: 320.252px; min-width: 1px; min-height: 1px;" data-block-id="5a23dd507efb9dc2c7a63bee32b925ad"><a class="sl-block-content fragment" style="z-index: 18;" href="https://shapeshifter.design/" target="_blank" data-fragment-index="2"><img style="" data-natural-width="100" data-natural-height="100" data-lazy-loaded="" data-src="thesvgfiles/13de6a0f95ff509c74b71c98669b3f43.svg"></a></div></section></section><section class="stack" data-id="09ca8f6aeca63b4df8c34a48e53d9e87"><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="54a0948fd1aa733c4355baf0202a44a1">
<div class="sl-block" data-block-type="image" data-name="image-f65d95" data-block-id="4c068edb80b8741748cd7438f31fb129" style="width: 274.29px; height: 213.119px; left: 374.855px; top: 74.881px; min-width: 1px; min-height: 1px;">
<a class="sl-block-content fragment" style="z-index: 10;" href="https://undraw.co/illustrations" target="_blank" data-fragment-index="0"><img style="" data-natural-width="982" data-natural-height="763" data-lazy-loaded="" data-src="thesvgfiles/2785766b78bab4e66e52274376d3a79e.svg"></a>
</div>
<div class="sl-block" data-block-type="image" data-name="image-95a41a" data-block-id="7cb9f3de60e0a6d133bd56ede9cd54f7" style="width: 216.06px; height: 216.06px; left: 79px; top: 176.039px; min-width: 1px; min-height: 1px;">
<a class="sl-block-content fragment" style="z-index: 11; --svg-color:rgb(74, 134, 232);" data-inline-svg="true" href="https://www.freepik.com/" target="_blank" data-fragment-index="1">
<img style="" data-natural-width="512" data-natural-height="512" data-lazy-loaded="" data-src="thesvgfiles/0e65024c7c07d8d4e6b08dcf30112531.svg"><svg xmlns="http://www.w3.org/2000/svg" id="Capa_1" enable-background="new 0 0 512 512" height="512" viewbox="0 0 512 512" width="512" preserveaspectratio="xMidYMid meet"><g fill="#1273eb"><path id="XMLID_3728_" d="m22.168 220.963c-3.474 3.593-6.491 7.555-8.868 11.793l-3.748-1.935c-.549-2.396-2.834-4.054-5.302-3.778-2.651.276-4.571 2.764-4.205 5.436.274 2.672 2.743 4.607 5.394 4.238.549-.092 1.006-.184 1.463-.461l3.657 1.935c-2.011 4.515-3.474 9.213-4.297 14.097l6.034 1.106c1.828-10.596 6.857-20.27 14.353-28.101z" style="fill: var(--svg-color, rgb(18, 115, 235));"></path><path id="XMLID_3727_" d="m66.233 202.352c-1.371 0-2.743.092-4.114.092l-.549-5.067c1.463-1.198 2.377-3.133 2.103-5.252-.366-3.225-3.2-5.436-6.399-5.067-3.2.369-5.394 3.225-5.028 6.449.274 2.027 1.554 3.778 3.291 4.515l.549 5.067c-5.759.921-11.245 2.672-16.547 5.252l2.651 5.528c7.496-3.593 15.633-5.436 24.044-5.436 4.023 0 7.954.461 11.885 1.29l1.28-5.989c-4.298-.922-8.778-1.382-13.166-1.382z" style="fill: var(--svg-color, rgb(18, 115, 235));"></path><path id="XMLID_3726_" d="m119.257 222.898c2.651-.369 4.571-2.764 4.205-5.436s-2.743-4.607-5.394-4.238c-2.468.276-4.297 2.488-4.297 4.883l-3.383 2.948c-3.383-3.501-7.131-6.542-11.336-9.213l-3.2 5.16c9.142 5.804 16.181 14.004 20.57 23.679l5.577-2.488c-2.011-4.515-4.571-8.661-7.588-12.53l3.2-2.856c.549.183 1.098.183 1.646.091z" style="fill: var(--svg-color, rgb(18, 115, 235));"></path><path id="XMLID_3725_" d="m61.845 284.904c-3.108.184-6.217.276-9.325.276-7.039 0-13.896-.461-19.93-1.474-3.108-.461-6.765-1.29-10.239-2.396 8.411 15.018 24.684 25.245 43.242 25.245 22.947 0 42.236-15.479 47.813-36.485-5.485 3.593-12.068 6.634-19.747 9.121-9.416 3.134-20.386 5.068-31.814 5.713z" style="fill: var(--svg-color, rgb(18, 115, 235));"></path><path id="XMLID_3702_" d="m66.233 214.605c-26.878 0-48.819 21.56-48.819 48.094 0 3.409.366 6.91 1.097 10.227 5.394 3.87 21.758 7.186 42.968 5.897 23.129-1.382 42.511-7.739 53.572-17.506 0-1.566-.183-3.133-.366-4.699-3.107-23.954-23.86-42.013-48.452-42.013zm-17.37 52.702c-8.228 0-14.81-6.726-14.81-14.926 0-8.292 6.674-14.926 14.81-14.926 8.228 0 14.81 6.726 14.81 14.926.092 8.2-6.582 14.926-14.81 14.926zm38.031-7.371c-6.034 0-10.879-4.975-10.879-10.964 0-6.081 4.937-10.964 10.879-10.964 6.034 0 10.879 4.975 10.879 10.964.092 6.081-4.845 10.964-10.879 10.964z" style="fill: var(--svg-color, rgb(18, 115, 235));"></path><path id="XMLID_3699_" d="m194.679 229.716c-2.377-.921-6.491-2.488-11.062-1.935-4.388.553-6.765 2.764-6.765 8.108v7.002h17.918v13.912h-17.918v44.133h-15.542v-44.133h-10.788v-13.82h10.788v-7.187c0-13.636 7.222-22.481 20.661-22.481 5.12 0 9.325 1.013 12.799 2.488z" style="fill: var(--svg-color, rgb(18, 115, 235));"></path><path id="XMLID_3697_" d="m232.527 256.711c-1.463-.276-2.834-.369-4.205-.369-7.222 0-12.159 4.422-12.159 13.083v31.602h-15.542v-58.045h14.993v6.357c3.657-5.436 9.142-7.924 16.181-7.924 3.291 0 6.765 1.013 8.776 2.764z" style="fill: var(--svg-color, rgb(18, 115, 235));"></path><path id="XMLID_3694_" d="m294.053 271.913c0 1.751-.091 3.962-.274 5.252h-40.865c1.646 8.384 7.496 12.07 14.81 12.07 5.028 0 10.422-2.027 14.536-5.528l9.051 10.043c-6.582 6.081-14.902 8.845-24.501 8.845-17.644 0-29.895-12.07-29.895-30.404 0-18.243 11.885-30.681 29.163-30.681 16.548-.093 27.884 12.253 27.975 30.403zm-41.048-5.436h25.506c-1.463-7.463-5.851-11.609-12.525-11.609-7.404 0-11.609 4.423-12.981 11.609z" style="fill: var(--svg-color, rgb(18, 115, 235));"></path><path id="XMLID_3682_" d="m355.488 271.913c0 1.751-.091 3.962-.274 5.252h-40.865c1.646 8.384 7.496 12.07 14.81 12.07 5.028 0 10.422-2.027 14.536-5.528l9.051 10.043c-6.582 6.081-14.902 8.845-24.501 8.845-17.644 0-29.895-12.07-29.895-30.404 0-18.243 11.885-30.681 29.163-30.681 16.547-.093 27.884 12.253 27.975 30.403zm-41.048-5.436h25.506c-1.463-7.463-5.851-11.609-12.525-11.609-7.313 0-11.61 4.423-12.981 11.609z" style="fill: var(--svg-color, rgb(18, 115, 235));"></path><path id="XMLID_3679_" d="m422.499 271.913c0 17.413-11.976 30.589-27.883 30.589-7.771 0-13.165-3.04-16.913-7.555v30.036h-15.45v-82h15.176v6.449c3.748-4.699 9.233-7.924 17.187-7.924 15.907-.091 27.883 12.992 27.883 30.405zm-45.619 0c0 9.121 6.034 16.031 14.81 16.031 9.142 0 14.902-7.094 14.902-16.031s-5.668-16.031-14.902-16.031c-8.776.092-14.81 6.91-14.81 16.031z" style="fill: var(--svg-color, rgb(18, 115, 235));"></path><path id="XMLID_3648_" d="m447.457 223.911c0 5.62-4.297 9.951-9.965 9.951-5.577 0-9.873-4.33-9.873-9.951s4.297-10.043 9.873-10.043c5.577 0 9.965 4.423 9.965 10.043zm-2.103 77.025h-15.542v-58.045h15.542z" style="fill: var(--svg-color, rgb(18, 115, 235));"></path><path id="XMLID_3583_" d="m471.226 263.621 21.667-20.638h19.016l-27.975 27.272 28.066 30.681h-19.107l-21.849-23.495v23.495h-15.542v-86.238h15.542v48.923z" style="fill: var(--svg-color, rgb(18, 115, 235));"></path></g></svg>
</a>
</div>
<div class="sl-block" data-block-type="image" data-name="image-8e14de" data-block-id="37ec22ff2e09f35bd5057ea6e8b85367" style="width: 237.734px; height: 237.734px; left: 710.266px; top: 165.202px; min-width: 1px; min-height: 1px;"><a class="sl-block-content fragment" style="z-index: 12; --svg-color:rgb(255, 153, 0);" data-inline-svg="true" href="https://www.vecteezy.com/" target="_blank" data-fragment-index="2">
<img style="" data-natural-width="100" data-natural-height="100" data-lazy-loaded="" data-src="thesvgfiles/dc048ae688f6460a4fe9c3826222f151.svg"><svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewbox="0 0 267 65" role="img" aria-labelledby="ah8k4ia8byml0m8ac0wlp2xx516rw9ed" preserveaspectratio="xMidYMid meet"><desc id="ah8k4ia8byml0m8ac0wlp2xx516rw9ed">Vecteezy logo</desc>
<path d="M41.7748 29.9081C41.8438 28.3903 41.8438 26.976 41.8438 25.5616C41.8438 22.388 41.0159 19.2143 38.9116 19.2143C37.3248 19.2143 36.4969 20.5597 36.4969 22.9054C36.4969 26.7345 39.1186 29.0802 41.7748 29.9081ZM32.2539 53.8829C22.4915 53.8829 21.5601 45.1209 21.5601 36.0829C21.5601 27.3899 20.9046 25.4581 17.869 25.4581H13.4535V19.7318H17.869C26.3205 19.7318 27.3899 26.7345 27.3899 36.1174C27.3899 45.0519 28.0453 48.0531 32.1504 48.0531C36.4969 48.0531 39.498 41.0504 40.9124 35.3585C34.5996 33.8407 30.667 29.3217 30.667 22.8019C30.667 17.6275 34.0132 13.35 39.0151 13.35C44.5345 13.35 47.6046 18.6279 47.6046 25.5616C47.6046 27.3209 47.5356 28.9767 47.4321 30.2531H53.9519V36.0139H46.5008C44.7759 44.7759 39.9465 53.8829 32.2539 53.8829ZM32.0814 64.3352C54.6418 64.3352 64.1628 50.0539 64.1628 32.4263C64.1628 8.10659 53.124 0 38.6011 0C19.8698 0 0 15.3853 0 32.4263C0 50.0539 14.3849 64.3352 32.0814 64.3352Z" style="fill: var(--svg-color, rgb(0, 0, 0));"></path>
<path d="M90.5177 35.117C90.8627 36.1519 91.2766 37.5318 91.4491 38.7046H91.5871C91.8285 37.5318 92.208 36.1864 92.5185 35.1515L98.2103 16.5236H105.041L95.0712 45.3969H87.827L77.7886 16.5581H84.6189L90.5177 35.117Z" style="fill: var(--svg-color, rgb(0, 0, 0));"></path>
<path d="M123.669 38.2217L126.739 41.7748C125.221 43.7756 121.944 45.7073 117.114 45.7073C109.594 45.7073 105.075 40.9814 105.075 34.2201C105.075 27.5279 109.594 22.7329 116.493 22.7329C123.048 22.7329 126.773 27.1829 126.773 33.2887C126.773 34.7031 126.566 35.669 126.566 35.669H111.491C112.043 38.6701 114.148 40.7399 117.839 40.7399C121.047 40.7744 122.703 39.2566 123.669 38.2217ZM111.526 32.3229H120.874C120.84 29.6667 119.218 27.6659 116.528 27.6659C113.941 27.7004 112.009 29.3562 111.526 32.3229Z" style="fill: var(--svg-color, rgb(0, 0, 0));"></path>
<path d="M150.886 30.6325C150.886 31.6329 150.748 32.2883 150.748 32.2883L145.022 32.6333C145.056 32.5298 145.125 32.1159 145.125 31.6329C145.125 29.7356 143.883 28.0798 141.434 28.0798C138.502 28.0798 136.501 30.4946 136.501 34.1166C136.501 37.9112 138.433 40.4294 142.297 40.4294C145.815 40.4294 147.747 38.6356 148.402 37.8077L151.576 41.8783C150.162 43.6721 146.885 45.7073 141.848 45.7073C134.362 45.7073 129.912 40.9814 129.912 34.3236C129.912 27.4589 134.638 22.7674 141.538 22.7674C147.436 22.7674 150.886 26.2515 150.886 30.6325Z" style="fill: var(--svg-color, rgb(0, 0, 0));"></path>
<path d="M171.894 44.086C171.894 44.086 169.514 45.7073 165.202 45.7073C159.337 45.7073 156.233 42.5337 156.233 36.1864V27.9763H152.818V23.0434H156.509V16.5581H162.753V23.0434H170.618V27.9763H162.753V35.8759C162.753 38.8771 163.891 40.188 166.409 40.188C168.686 40.188 169.997 39.0151 169.997 39.0151L171.894 44.086Z" style="fill: var(--svg-color, rgb(0, 0, 0));"></path>
<path d="M191.143 38.2217L194.213 41.7748C192.695 43.7756 189.418 45.7073 184.589 45.7073C177.034 45.7073 172.549 40.9814 172.549 34.2201C172.549 27.5279 177.068 22.7329 183.968 22.7329C190.522 22.7329 194.247 27.1829 194.247 33.2887C194.247 34.7031 194.041 35.669 194.041 35.669H178.966C179.518 38.6701 181.622 40.7399 185.313 40.7399C188.521 40.7744 190.211 39.2566 191.143 38.2217ZM179 32.3229H188.349C188.314 29.6667 186.693 27.6659 184.002 27.6659C181.415 27.7004 179.483 29.3562 179 32.3229Z" style="fill: var(--svg-color, rgb(0, 0, 0));"></path>
<path d="M215.98 38.2217L219.05 41.7748C217.532 43.7756 214.255 45.7073 209.426 45.7073C201.906 45.7073 197.387 40.9814 197.387 34.2201C197.387 27.5279 201.906 22.7329 208.805 22.7329C215.359 22.7329 219.085 27.1829 219.085 33.2887C219.085 34.7031 218.878 35.669 218.878 35.669H203.803C204.355 38.6701 206.459 40.7399 210.15 40.7399C213.358 40.7744 215.049 39.2566 215.98 38.2217ZM203.838 32.3229H213.186C213.151 29.6667 211.53 27.6659 208.839 27.6659C206.252 27.7004 204.32 29.3562 203.838 32.3229Z" style="fill: var(--svg-color, rgb(0, 0, 0));"></path>
<path d="M221.775 40.7399L232.642 29.1837C233.194 28.5628 233.435 28.3213 233.815 28.0108L233.78 27.8728C233.263 27.9763 232.4 28.0108 231.158 28.0108H222.12V23.0434H241.128V27.7349L230.779 38.9806C230.02 39.843 229.675 40.1535 229.365 40.4984L229.468 40.6364C229.882 40.5329 230.606 40.4984 231.917 40.4984H241.438V45.4314H221.775V40.7399Z" style="fill: var(--svg-color, rgb(0, 0, 0));"></path>
<path d="M248.338 55.3662C245.785 55.3662 244.164 54.4693 244.164 54.4693L245.095 49.5019C245.095 49.5019 246.337 50.1573 247.786 50.1573C249.821 50.1573 250.925 49.1569 251.684 47.5011L252.098 46.3973L242.853 23.0434H249.821L254.409 36.3244C254.788 37.4973 254.926 38.0837 255.133 39.2566H255.237C255.478 38.0147 255.616 37.3938 255.961 36.3244L260.446 23.0434H267L257.479 48.398C255.996 52.2961 253.236 55.3662 248.338 55.3662Z" style="fill: var(--svg-color, rgb(0, 0, 0));"></path>
</svg>
</a></div>
<div class="sl-block" data-block-type="image" data-name="image-c25c2b" data-block-id="08d4db0aa1b27b9ef83324f3ff2e5ff8" style="width: 317.167px; height: 68.9494px; left: 353.417px; top: 397.525px; min-width: 1px; min-height: 1px;"><a class="sl-block-content fragment" style="z-index: 13;" href="https://storyset.com/" target="_blank" data-fragment-index="3"><img data-natural-width="299" data-natural-height="65" style="" data-lazy-loaded="" data-src="thesvgfiles/8aae3f790c91e58f0690c099f2244433.svg"></a></div>
</section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="e92a171adcbb565a0039087e705b8254">
<div class="sl-block" data-block-type="video" data-name="video-14ce38" data-block-id="0f0c65d044e796913a89812eb367aae4" style="min-width: 30px; min-height: 30px; width: 921.6px; height: 576px; left: 51.2px; top: 0px;"><div class="sl-block-content" style="z-index: 10;" data-media-id="8441095" data-video-thumb="thesvgfiles/2d230380bc506c86cbd99ade7362cf71.jpg"><video playsinline="" controls="controls" poster="thesvgfiles/2d230380bc506c86cbd99ade7362cf71.jpg" data-paused-by-reveal="" data-lazy-loaded="" data-src="thesvgfiles/e3db9edf61b97a2e824a11ae48f92647.mp4"></video></div></div></section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="3ee90f02e0ccfd583aa9b463b5be1693">
<div class="sl-block" data-block-type="image" style="width: 144px; height: 144px; left: 675.749px; top: 216px; min-width: 1px; min-height: 1px;" data-block-id="7349b612d7c634fe46099aed81b8affa">
<a class="sl-block-content" style="z-index: 10; transition-duration: 0.6s; transition-delay: 0.6s;" href="https://inkscape.org/es/" target="_blank" data-animation-type="slide-up">
<img style="visibility: visible;" data-natural-width="256" data-natural-height="256" data-lazy-loaded="" data-src="thesvgfiles/fca1d545cb778b4cfd31c4ea3331890e.png">
</a>
</div>
<div class="sl-block" data-block-type="image" style="width: 144px; height: 144px; left: 204.25px; top: 216px; min-width: 1px; min-height: 1px;" data-block-id="18281c5f710bc2d8a98360b85ccb21d3">
<a class="sl-block-content" style="z-index: 11; transition-duration: 0.6s; transition-delay: 0.6s;" data-animation-type="slide-up" href="https://www.adobe.com/es/products/illustrator.html" target="_blank">
<img data-natural-width="514" data-natural-height="514" style="" data-lazy-loaded="" data-src="thesvgfiles/0526abe2ce45af638be49408265402e6.svg">
</a>
</div>
<div class="sl-block" data-block-type="image" style="width: 132.064px; height: 198.056px; left: 445.968px; top: 188.972px; min-width: 1px; min-height: 1px;" data-block-id="fc4c528912f773395618464c0a656fc9">
<a class="sl-block-content" style="z-index: 17; transition-duration: 0.6s; transition-delay: 0.6s;" data-animation-type="slide-up" href="https://www.figma.com/" target="_blank"><img data-natural-width="1667" data-natural-height="2500" style="" data-lazy-loaded="" data-src="thesvgfiles/b4d0409326f47ef4e703e9911c783689.svg"></a>
</div></section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="2d22977a33e277de7ec55dd755a9115b">
<div class="sl-block" data-block-type="image" data-name="image-1f9a03" style="width: 869px; height: 457.789px; left: 77.5px; top: 59.1055px; min-width: 1px; min-height: 1px;" data-block-id="2f818a13b121d13c971ae633ff3b34c2"><div class="sl-block-content" style="z-index: 10;"><img style="" data-natural-width="2500" data-natural-height="1317" data-lazy-loaded="" data-src="thesvgfiles/aea63d57aa0523176e92bfa99ba2bd58.png"></div></div></section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="f1ba5c5e43d5c415d78cdbb265cde40b">
<div class="sl-block" data-block-type="image" data-name="image-e5b07d" data-block-id="a1962900e66f18821efb52959c9745c6" style="width: 808.64px; height: 504px; left: 107.68px; top: 36px; min-width: 1px; min-height: 1px;"><div class="sl-block-content" style="z-index: 10;"><img style="" data-natural-width="2166" data-natural-height="1350" data-lazy-loaded="" data-src="thesvgfiles/f8682e250c110321634d0be95e6e35f1.png"></div></div></section></section><section class="stack" data-id="8dc18609470b65a698d7fa767f5a9d49"><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="75b35e6f19ddac1142c0926ebe7fa3ac"><div class="sl-block" data-block-type="text" style="width: 855.595px; left: 84.2025px; top: 249px; height: auto;" data-block-id="94353ca5d8941bcf82bc4032725f5050">
<div class="sl-block-content" data-placeholder-tag="h1" data-placeholder-text="Title Text" style="z-index: 10; transition-duration: 0.6s; transition-delay: 0.6s;" data-animation-type="slide-down">
<h3><strong><span style="font-size:2.0em">So, why <span class="primary">animate?</span></span></strong></h3>
</div>
</div></section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="49ffc98c6cad180bb9c7a43d04300526"><div class="sl-block" data-block-type="image" data-name="image-de80d4" data-block-id="25462f05f572db4aa85f1e7faacd228e" style="width: 1001.23px; height: 382px; left: 11.385px; top: 97px; min-width: 1px; min-height: 1px;"><div class="sl-block-content" style="z-index: 10;"><img style="left: 0px; top: 0px; width: 1001px; height: 424px;" data-natural-width="1627" data-natural-height="689" data-lazy-loaded="" data-crop-x="0" data-crop-y="0" data-crop-width="1" data-crop-height="0.900943" data-src="thesvgfiles/33e8d1f72b78f84efb662b14b54ebcf5.gif"></div></div>
<div class="sl-block" data-block-type="text" data-name="text-f94cdf" style="height: auto; width: 105px; left: 899px; top: 527px;" data-block-id="919975bdceb68a221e95566acd7332bf"><a class="sl-block-style" style="z-index: 11;" href="https://uxinmotion.net/principles/" target="_blank"><div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 11;">
<p><span style="font-size:0.5em">UX in Motion</span></p>
</div></a></div></section><section data-id="63c6d7cfe243420b81350629012a1738"><div class="sl-block" data-block-type="iframe" style="width: 1024px; height: 576px; left: 0px; top: 0px;" data-block-id="3bd4dedd831abe6286aed11beeedde63">
<div class="sl-block-content" style="z-index: 10; transition-duration: 0.6s; transition-delay: 0.6s;" data-animation-type="fade-in">
<iframe webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" sandbox="allow-forms allow-scripts allow-popups allow-same-origin allow-pointer-lock allow-presentation" data-src="https://codepen.io/carmenansio/embed/OJWzymy?height=265&theme-id=dark&default-tab=html,result&editable=true"></iframe>
</div>
</div>
</section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="96dd8792214591b73cdcdb9800edfd22"><div class="sl-block" data-block-type="iframe" data-name="iframe-78375b" data-block-id="689e221eef6d5edbdef815c3a1f4fcdf" style="width: 948px; height: 576px; left: 38px; top: 0px;"><div class="sl-block-content" style="z-index: 11;"><iframe webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" sandbox="allow-forms allow-scripts allow-popups allow-same-origin allow-pointer-lock allow-presentation" data-src="https://codepen.io/carmenansio/embed/441725f19a20485852ff7f17221c0dd6?height=546&theme-id=dark&default-tab=result&editable=true"></iframe></div></div></section><section data-id="6d0079fd7fea4fcf2795dcbc4318ef34"><div class="sl-block" data-block-type="iframe" style="width: 1024px; height: 576px; left: 0px; top: 0px;" data-block-id="b99d3c15de36360f0eeb847da1e467ba">
<div class="sl-block-content" style="z-index: 10; transition-duration: 0.6s; transition-delay: 0.6s;" data-animation-type="fade-in">
<iframe webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" sandbox="allow-forms allow-scripts allow-popups allow-same-origin allow-pointer-lock allow-presentation" data-src="https://codepen.io/carmenansio/embed/OJWzymy?height=265&theme-id=dark&default-tab=html,result&editable=true"></iframe>
</div>
</div>
</section><section data-id="3f0314a24f2688b922aa62db7adaff22"><div class="sl-block" data-block-type="iframe" style="width: 1024px; height: 576px; left: 0px; top: 0px;" data-block-id="54833bb780d9b804eda263cd0416a6a9">
<div class="sl-block-content" style="z-index: 10; transition-duration: 0.6s; transition-delay: 0.6s;" data-animation-type="fade-in">
<iframe webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" sandbox="allow-forms allow-scripts allow-popups allow-same-origin allow-pointer-lock allow-presentation" data-src="https://csstriggers.com/"></iframe>
</div>
</div>
</section><section data-id="215f68c64425139511ab23ed8e70c6ad"><div class="sl-block" data-block-type="iframe" style="width: 1024px; height: 576px; left: 0px; top: 0px;" data-block-id="94cfcb918768b110b52e45f5fa61f2cd">
<div class="sl-block-content" style="z-index: 10; transition-duration: 0.6s; transition-delay: 0.6s;" data-animation-type="fade-in">
<iframe webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" sandbox="allow-forms allow-scripts allow-popups allow-same-origin allow-pointer-lock allow-presentation" data-src="https://codepen.io/carmenansio/embed/gOgorqy?height=265&theme-id=dark&default-tab=html,result&editable=true"></iframe>
</div>
</div>
</section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-background-size="contain" data-id="b174f41b049984cb7b2c83a669e0e4da"><div class="sl-block" data-block-type="code" data-name="code-932e7d" data-block-id="4a15fcfa639a06716ab53385f2a89a19" style="width: 553px; height: 445.244px; left: 235.5px; top: 65.378px;"><div class="sl-block-content notranslate" data-highlight-theme="monokai" data-code-frame="none" style="z-index: 10;"><pre style="font-size: 20px; line-height: 24px;"><code data-line-numbers="">@keyframes [name] {
[keyframe selector] {CSS styles}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.ufo {
animation-duration: 2s;
animation-name: spin;
}</code></pre></div></div></section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-background-size="contain" data-id="4c86e879776509210735d27a9f8ccaa3"><div class="sl-block" data-block-type="code" data-name="code-056654" data-block-id="7bafb53a72b17ffb74965dec45b9df98" style="width: 632px; height: 374.249px; left: 196px; top: 100.875px;"><div class="sl-block-content notranslate" data-highlight-theme="monokai" data-code-frame="none" style="z-index: 10;"><pre style="font-size: 16px; line-height: 19px;"><code data-line-numbers="">/*
Part 1: Animation
Here is where we would put our full animation.
*/
.ufo {
animation: rotation 2s infinite linear;
}
/*
Part 2: Media query
Here is where we would put our partial or no animation.
*/
@media (prefers-reduced-motion: reduce) {
.ufo {
animation: none;
}
}</code></pre></div></div>
</section></section><section class="stack" data-id="4e5eb0e2cafc7de71380ea2819481f78"><section data-id="28480d3cbc78a37f622a6b287c34aa64"><div class="sl-block" data-block-type="iframe" style="width: 1024px; height: 576px; left: 0px; top: 0px;" data-block-id="f933531651b0dddd9b32c61421833ac1">
<div class="sl-block-content" style="z-index: 10; transition-duration: 0.6s; transition-delay: 0.6s;" data-animation-type="fade-in">
<iframe webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" sandbox="allow-forms allow-scripts allow-popups allow-same-origin allow-pointer-lock allow-presentation" data-src="https://codepen.io/carmenansio/embed/fbcc7d14a878172286f1667343ebe2e8?height=506&theme-id=dark&default-tab=result&editable=true"></iframe>
</div>
</div>
</section><section data-id="c535bc16526d708a3a35a3ed0d61e42a">
<div class="sl-block" data-block-type="video" data-name="video-ac73ba" data-block-id="2d528e7264bfbb2ad436c52994869535" style="min-width: 30px; min-height: 30px; width: 1024px; height: 555.2px; left: 0px; top: 10.4px;"><div class="sl-block-content" style="z-index: 10;" data-media-id="8441118" data-video-thumb="thesvgfiles/f72ce56f8709ff0cee439113b212ff82.jpg"><video playsinline="" controls="controls" poster="thesvgfiles/f72ce56f8709ff0cee439113b212ff82.jpg" data-paused-by-reveal="" data-lazy-loaded="" data-src="thesvgfiles/d37a5a1093820581e95b3da2e1be5702.mp4"></video></div></div></section></section><section class="stack" data-id="ac927008812856077585f1d86ff01427"><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="3a3306357494983129e7cdd1154966d1">
<div class="sl-block" data-block-type="image" data-name="image-e847d6" data-block-id="75bcf40c44fc16e4c933ec10afd70f51" style="width: 313.222px; height: 114.848px; left: 355.389px; top: 86.576px; min-width: 1px; min-height: 1px;"><a class="sl-block-content fragment" style="z-index: 10;" data-inline-svg="false" data-fragment-index="2" href="https://greensock.com/" target="_blank"><img style="" data-natural-width="1200" data-natural-height="440" data-lazy-loaded="" data-src="thesvgfiles/90294ceb957187e65c7a39afc537f1d5.svg"></a></div>
<div class="sl-block" data-block-type="image" data-name="image-874c94" data-block-id="157f805568dd6c3f908a388f9098bf16" style="width: 192.219px; height: 114.848px; left: 79px; top: 230.576px; min-width: 1px; min-height: 1px;"><a class="sl-block-content fragment" style="z-index: 11;" data-fragment-index="0" href="http://velocityjs.org/" target="_blank"><img style="" data-natural-width="1272" data-natural-height="760" data-lazy-loaded="" data-src="thesvgfiles/83a05cc7fa7b689cbb1647128c15a376.png"></a></div>
<div class="sl-block" data-block-type="image" data-name="image-03552a" data-block-id="2d59cdba40a13f8fe851f85320450397" style="width: 190.813px; height: 45.795px; left: 757.187px; top: 265.102px; min-width: 1px; min-height: 1px;"><a class="sl-block-content fragment" style="z-index: 12;" data-fragment-index="1" href="https://animejs.com/" target="_blank"><img style="" data-natural-width="1000" data-natural-height="240" data-lazy-loaded="" data-src="thesvgfiles/60f1ae956e1280e1ed6942996b0037ec.svg"></a></div>
<div class="sl-block" data-block-type="image" data-name="image-36be38" style="width: 206px; height: 88.5198px; left: 409px; top: 387.74px; min-width: 1px; min-height: 1px;" data-block-id="86ab4f9b1698613cb6b42e9f8e22da24"><a class="sl-block-content fragment" style="z-index: 13;" href="https://lottiefiles.com/" target="_blank" data-fragment-index="3"><img style="left: 0px; top: 0px; width: 310px; height: 89px;" data-natural-width="858" data-natural-height="245" data-lazy-loaded="" data-crop-x="0" data-crop-y="0" data-crop-width="0.664516" data-crop-height="1" data-src="thesvgfiles/cd8c1d16d50ddade0ec0fc2cf13e3e1d.svg"></a></div></section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="80e935a55e8e09e660386ed11d5a9dfb">
<div class="sl-block" data-block-type="image" data-name="image-984c43" data-block-id="c0836e1aee1fe1740c3235a6cc2f0e60" style="width: 948px; height: 518.558px; left: 38px; top: 28.721px; min-width: 1px; min-height: 1px;"><div class="sl-block-content" style="z-index: 10;"><img style="" data-natural-width="2468" data-natural-height="1350" data-lazy-loaded="" data-src="thesvgfiles/7ea2fdeac4a535266a3588e5cf4c1957.png"></div></div></section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="815a455082f83fd611ba889ef786a947">
<div class="sl-block" data-block-type="image" data-name="image-94d656" data-block-id="c4b129620fea95de5fe7b6d3f2c6fd1e" style="width: 943.787px; height: 576px; left: 40.1065px; top: 0px; min-width: 1px; min-height: 1px;"><div class="sl-block-content" style="z-index: 10;"><img style="" data-natural-width="2212" data-natural-height="1350" data-lazy-loaded="" data-src="thesvgfiles/93f252db4cec4cec6644cd370190824b.png"></div></div></section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="a6696296252b743f45b22573d5ad534b">
<div class="sl-block" data-block-type="image" data-name="image-028da9" data-block-id="d42de2198e1d5129be5c4bd1803ccc84" style="width: 946.773px; height: 576px; left: 38.6135px; top: 0px; min-width: 1px; min-height: 1px;"><div class="sl-block-content" style="z-index: 10;"><img style="" data-natural-width="2219" data-natural-height="1350" data-lazy-loaded="" data-src="thesvgfiles/de999adfce21a6073086712fbe894066.png"></div></div></section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="632f8f933468d01fc08b2a0aef67d1c7">
<div class="sl-block" data-block-type="image" data-name="image-c46c03" data-block-id="a5334b20e1ff21b310d9646e6a6d45bc" style="width: 945.92px; height: 576px; left: 39.04px; top: 0px; min-width: 1px; min-height: 1px;"><div class="sl-block-content" style="z-index: 10;"><img style="" data-natural-width="2217" data-natural-height="1350" data-lazy-loaded="" data-src="thesvgfiles/2e50ad6853c3933aeeb8d15e8c7994d9.png"></div></div></section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="7e701c3b70a0a16b592616e653dcf562">
<div class="sl-block" data-block-type="image" data-name="image-006640" data-block-id="6ec1c653a6dbca9dc40f4c08a0e18b31" style="width: 944.64px; height: 576px; left: 39.68px; top: 0px; min-width: 1px; min-height: 1px;"><div class="sl-block-content" style="z-index: 10;"><img style="" data-natural-width="2214" data-natural-height="1350" data-lazy-loaded="" data-src="thesvgfiles/52f39df1d6af91a041e3b532d9d0bd8d.png"></div></div></section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="b4f26cc902bb1c41ed4e206f398ab13d">
<div class="sl-block" data-block-type="image" data-name="image-294f6a" data-block-id="3bf3eb96fdf461299feb7ccad6bae48a" style="width: 550.596px; height: 426.24px; left: 236.702px; top: 74.88px; min-width: 1px; min-height: 1px;"><div class="sl-block-content" style="z-index: 10;"><img data-natural-width="1284" data-natural-height="994" style="" data-lazy-loaded="" data-src="thesvgfiles/353088ccfdbbf26d2d1faacda059a48f.png"></div></div></section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="3e99995471abd7eac885ea1674a34d4e">
<div class="sl-block" data-block-type="image" data-name="image-3d387e" data-block-id="f179a6e32af5f171da6d270df1beb224" style="width: 919.893px; height: 504px; left: 52.0535px; top: 36px; min-width: 1px; min-height: 1px;"><div class="sl-block-content" style="z-index: 10;"><img style="" data-natural-width="2464" data-natural-height="1350" data-lazy-loaded="" data-src="thesvgfiles/40477707659294e9c7b003ae12ee9bd6.png"></div></div></section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="928f1fb47314a2cbea5ad44d2e98a135">
<div class="sl-block" data-block-type="video" data-name="video-0d1ddf" data-block-id="7c55804e820ba2d581b45ffe6406826e" style="min-width: 30px; min-height: 30px; width: 942.678px; height: 517px; left: 40.661px; top: 29.5px;"><div class="sl-block-content" style="z-index: 10;" data-media-id="8420436" data-video-thumb="thesvgfiles/b2f8b4cb3a7ecfc6d97561908a70419f.jpg"><video playsinline="" controls="controls" poster="thesvgfiles/b2f8b4cb3a7ecfc6d97561908a70419f.jpg" data-paused-by-reveal="" data-lazy-loaded="" data-src="thesvgfiles/4851a43fb16c8137aa8f8406fe286d91.mp4"></video></div></div></section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="85bfe6345ebcce79ae776f7bf89a96ce">
<div class="sl-block" data-block-type="image" data-name="image-863bfc" data-block-id="178bc71f7fa26414cc28a9c6487d4f6e" style="width: 948px; height: 518.558px; left: 38px; top: 28.721px; min-width: 1px; min-height: 1px;"><div class="sl-block-content" style="z-index: 10;"><img style="" data-natural-width="2468" data-natural-height="1350" data-lazy-loaded="" data-src="thesvgfiles/6fbb4ed863f98b83056a9afc3a233a7c.png"></div></div></section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="784dbda4166a5f13c90b13c76ef67a81"><div class="sl-block" data-block-type="iframe" data-name="iframe-78375b" style="width: 1024px; height: 576px; left: 0px; top: 2.84217e-14px;" data-block-id="d9193b673d60d88cb4b14251f25141bd"><div class="sl-block-content" style="z-index: 10;"><iframe webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" sandbox="allow-forms allow-scripts allow-popups allow-same-origin allow-pointer-lock allow-presentation" data-src="https://codepen.io/carmenansio/embed/XWpKRXN?height=265&theme-id=dark&default-tab=html,result&editable=true"></iframe></div></div>
</section><section data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg" data-id="a50282512257ae9792a78b229b846a29">
<div class="sl-block" data-block-type="video" data-name="video-6d5121" data-block-id="5ac6ac5920b56b0659f1d149d28ad959" style="min-width: 30px; min-height: 30px; width: 995.556px; height: 504px; left: 14.222px; top: 36px;"><div class="sl-block-content" style="z-index: 10;" data-media-id="8440845" data-video-thumb="thesvgfiles/930633f5614b538b1368a5ceeba14904.jpg"><video playsinline="" controls="controls" poster="thesvgfiles/930633f5614b538b1368a5ceeba14904.jpg" data-paused-by-reveal="" data-lazy-loaded="" data-src="thesvgfiles/5c0879edfcadd541188a60023fe75c86.mp4"></video></div></div></section></section><section class="stack" data-id="45404ea95bc17cfa04073f6b7e93e895"><section data-id="dcd85d7a91ae2c2f06bb855383b5820b">
<div class="sl-block" data-block-type="iframe" data-name="iframe-2f5dd5" style="width: 1024px; height: 576px; left: 0px; top: 0px;" data-block-id="d00c803d3ef8e355b373f4ab6bb32f0a"><div class="sl-block-content" style="z-index: 10;"><iframe webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" sandbox="allow-forms allow-scripts allow-popups allow-same-origin allow-pointer-lock allow-presentation" data-src="https://codepen.io/carmenansio/embed/bvxJpJ?height=265&theme-id=dark&default-tab=html,result&editable=true"></iframe></div></div></section><section data-id="b9b86ff99b14f0417a1bc748f55f521c">
<div class="sl-block" data-block-type="iframe" data-name="iframe-2f5dd5" style="width: 1024px; height: 576px; left: 0px; top: 0px;" data-block-id="f6129c4249d3ef7df5d6cf165e78d9d1"><div class="sl-block-content" style="z-index: 10;"><iframe webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" sandbox="allow-forms allow-scripts allow-popups allow-same-origin allow-pointer-lock allow-presentation" data-src="https://codepen.io/carmenansio/embed/oNXoOXp?height=265&theme-id=dark&default-tab=js,result&editable=true"></iframe></div></div></section><section data-id="b385014a90e4a0d2d6c6d0ac9447fed4">
<div class="sl-block" data-block-type="iframe" data-name="iframe-2f5dd5" style="width: 1024px; height: 576px; left: 0px; top: 0px;" data-block-id="519e92bee3ed2bbaf92b74584161da6b"><div class="sl-block-content" style="z-index: 10;"><iframe webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" sandbox="allow-forms allow-scripts allow-popups allow-same-origin allow-pointer-lock allow-presentation" data-src="https://codepen.io/carmenansio/embed/ce22c7f254cbc3043914fb8913a78b29?height=391&theme-id=dark&default-tab=result&editable=true"></iframe></div></div></section></section><section data-id="5651070a3064b24104b0af44e896c020" data-background-image="thesvgfiles/2b0c34cad4c58ea291316682dbf102db.jpg"><div class="sl-block" data-block-type="text" style="width: 320px; left: 353px; top: 236.5px; height: auto;" data-block-id="db493ea1851ffdfa95b4222e56770e89">
<div class="sl-block-content" data-placeholder-tag="h2" data-placeholder-text="Subtitle" style="z-index: 10; text-align: center; transition-duration: 0.6s; transition-delay: 0.6s;" data-animation-type="fade-in">
<p><strong><a href="https://codepen.io/collection/7d4e33021103eb14384723474c49a5ba?grid_type=grid" target="_blank"><span class="u-dir username"><span class="u-linkComplex-target underline">Codepen Collection</span> </span> </a> </strong></p>
</div>
</div>
<div class="sl-block" data-block-type="text" style="width: 1024px; left: 0px; top: 300.5px; height: auto;" data-block-id="4a243cdebcddda64586f3372e378339b">
<div class="sl-block-content" data-placeholder-tag="h2" data-placeholder-text="Subtitle" style="z-index: 11; text-align: center; transition-duration: 0.6s; transition-delay: 0.6s;" data-animation-type="fade-in">
<p><strong><span class="u-dir username"><span class="u-linkComplex-target underline"><a href="https://github.com/nucliweb/People-You-Should-Follow-on-CodePen" target="_blank">People to follow</a> fork @nucliweb</span></span></strong></p>
</div>
</div></section><section data-id="b31dc82c0120c983ca2372428754353d">
<div class="sl-block" data-block-type="image" data-name="image-38bd2a" data-block-id="ef43df858535146b8338126a00366bb8" style="width: 1022.72px; height: 576px; left: 0.64px; top: 0px; min-width: 1px; min-height: 1px;"><div class="sl-block-content" style="z-index: 10;"><img data-natural-width="480" data-natural-height="320" style="left: 0px; top: -55px; width: 1023px; height: 682px;" data-crop-x="0" data-crop-y="0.080527" data-crop-width="1" data-crop-height="0.844803" data-lazy-loaded="" data-src="thesvgfiles/77d0be96bc1989c8112415c607e97f77.gif"></div></div></section>
</div>
</div>
<script>
var SLConfig = {"deck": {"id":2093346,"slug":"thesvgfiles","title":"The SVG Files","description":"The SVG Files Slides for CSSConf Colombia 2021","width":1024,"height":576,"margin":0.05,"visibility":"all","published_at":"2021-04-10T16:13:44.180Z","sanitize_messages":null,"thumbnail_url":"https://s3.amazonaws.com/media-p.slid.es/thumbnails/e2305ccea709e1cb47d06f6d489ec9bb/thumb.jpg?1618045561","view_count":126,"user":{"id":787594,"username":"carmenansio","name":"Carmen Ansio Ruiz","description":"","thumbnail_url":"https://lh6.googleusercontent.com/-0UBfU3aL6Co/AAAAAAAAAAI/AAAAAAAAWAk/tglCL8SGb2w/photo.jpg?sz=50","account_type":"pro","team_id":null,"settings":{"id":638803,"present_controls":true,"present_upsizing":true,"present_pointer":false,"present_notes":true,"default_deck_tag_id":null}},"background_transition":"slide","transition":"slide","theme_id":null,"theme_font":"montserrat","theme_color":"grey-blue","auto_slide_interval":0,"comments_enabled":true,"forking_enabled":false,"rolling_links":false,"center":false,"shuffle":false,"should_loop":false,"share_notes":false,"slide_number":true,"slide_count":51,"rtl":false,"version":2,"collaborative":false,"deck_user_editor_limit":3,"data_updated_at":1618077021533,"font_typekit":"","font_google":"Lato","time_limit":null,"navigation_mode":"default","upsizing_enabled":true,"notes":{"9fea38f04b4522d8a4960113153c17a4":"Con canvas y a lo loco","60615d39f0c9853f7f0fd972dd6a13f8":"ORIENTADO A OBJETOS\nSE APLICAN A CSS Y VIENEN DEL DESARROLLO DE SOFTWARE","9864adf00bb8bcda145822ae60c47c97":"- Preprocessor agnostic.\n- Utility classes 1 solo propiedad !important;","2e81b38e5b8adcf117e17213650e01fb":"En una arquitectura si metes una librería de diseño ¿Dónde sobreescribes sus estilos? En vendor/librería o en components/componente-de-libreria","d072d9c957eb2175f06a0e24d9308604":"En una arquitectura si metes una librería de diseño ¿Dónde sobreescribes sus estilos? En vendor/librería o en components/componente-de-libreria","3469e0304eae9160471eafcfb6c0c8ab":"","e1fa9ca48247ebfbf684596830e64566":"initial: valor inicial del navegador\ninherit: valor del padre\nunset: fusion, si no tiene padre el inicial\nPrevalece el color del H1 (negro)","9d10b7c1b93bcf5d08a0b8c3661f4d23":"Si el HTML tiene 16, se hereda por defecto\n16px = 1em\nMedida relativa vs Absoluta\n","235f32eb4f716cddb73ca43e3dc42607":"Si añades important a un shorthand es como si se lo añadieses a cada propiedad del longhand\n\nSHORTHAND vs LONGHAND","79057527553483271789b50a188c57a3":"IGNACIO\n- El CSS depende de como esté el HTML\n- El CSS es poco reusable","3b6e9545803748b7caefa5eadbdb4064":"- El HTML depende del CSS\n- CSS reutilizable en otras partes de la web","1bb607d60816ea849c7d4cbeeacc217d":"- Ejemplos de clases abstractas muy reutilizables\n- Es mejor usar una clase larga que un chorro de elementos HTML","620c5deb61122889c42cc4423efe9a64":"- Los tres tipos de clases son semánticos pero las presentacionales no son muy recomendables usarlas","161048e031e0222a6f8d598e82a3cdf5":"IGNACIO\n- Comunica funcionalidad de la clase\n- Mantiene una especificidad baja\n\nEsquema para definir objetos y componentes. \nSobreescribir rápido, no tener anidación y es semántico.\nEsquema de nombrado un poco “rebuscado”, bastante horrible… \nCurva aprendizaje primera daily","ad74d56d84829d6fdff162be5c3e0703":"¿Por qué usar una arquitectura?\n- Escalabilidad\n- Porque tendemos a no documentar el código\n- Falta de conocimiento de los proyectos\n- Distintas preferencias a la hora de escribir código\n- Porque añadimos los estilos al final (a lo loco)\n\nREFACTOR PARTY / WHITEPAPERS","12b6e7df306fa48e8513fdff22801dd9":"- BUENO: estilos modularizados\n- MALO: Si cambiamos el estilo del HTML probablemente tengamos que cambiar el CSS ya que es muy reusado en nuestro proyecto","8bb9f820672679466429db69319de5cc":"- Spearar en dos clases:\n - Estructura\n - Aspecto","4e9955be77a935604835450a74dbe611":"- Spearar contendor y contenido","e15c5589293a0b24b8e7714330d7f41a":"- Reduce: La menos cantidad de selectores encadenados\n- Reusable: clases genéricas mejor que específicas\n- Reciclado: Mejor usa de la cascada","e49e0723af8d541a90cfd17e1e849714":"Orden:\n\n- Comentario\n- Clases\n- @extend\n- @include\n- Propiedades\n- Media Queries\n- Parent selector\n- Estados","474b1c68c8dfc7028aceed141d2eef26":"Problemas debido a:\n- Gran cantidad de veces el font-size\n- Uso del !important para corregir problemas de cascada\n- Debería ser lo más independiente de la localización\n- No dar estilo a elementos HTML\n- No usar elementos HTML + Clase (ul.nav)\n- No usar más de tres niveles de nesting (salvo pseudo clases y pseudo elementos)\n- No re hacer estilos por problemas de cascada\n- No usar números mágicos (extraerlos si acaso a una variable)\n- No usar @extend\n- Limitar la contatenación de clases (.nav.item.img)","3810aa1879b32e79c289edaa6a7a2db4":"Valor que toma cada uno de los elemntos de la hoja de estilos, hay selectores que tienen más peso/importancia que otros.\n","463be58ca1cdaad5d9ca9875899316fd":"Pseudo: estilar determinadas partes de un elemento\n\nConsiste en sumar puntos totales de una sentencia CSS en base a los elementos o selectores de los que está compuesto.","772f816788e0341e75b5fca7a3116584":"","a36210cb981e89151d320593747125c2":"ADA js / Consumer Experience\n","adcdbe9021784b459730a101790c09ae":"ID: compañero de viaje.\nPuedes convertirlo en un atributo con corchetes \n[id=\"igor\"] 100 a 10\nNo utilizar para STYLE","43e640e1c6b54a44a25ce98d77444a10":"Important + id = compañeros de vida\n...important + estilo inline =...666\nROMPE LA CASCADA","27dc043b6f10fee1df9e77bad714c715":"Especificida buena entre 30/40\nDos niveles = 30","e6a46f56aa667ee936f659d45faae1ee":"Resumen de \"malas prácticas\" evitar","c79023a50889c029e5858ecfb4a217e6":"Rojo toda su vida como mi pelo\nBODA","2d47ff86ca34fea7c94fa0d9ef89d3ec":"NEXT EJEMPLO JODE SLIDES CHULAS...","ed7f7bbaf771a796ca567d49c4230cf8":"IGOR de que color será? VERDE of course\ncada elemtento mantiene su espacio \" de calculo \"","15b55c3802d909f9e73f9686729d748a":":not = No tiene SPECIFICITY pero lo que vaya dentro Sí","39883543a74fbd3f56eb5e31042eb3cb":"Sabéis a que nos referímos?\nFilosofía reutilización del código","19b25c9e5f37e41627ac22132f855c0d":"Puntos SPRINT","8c78e0e3bd0ae8c0a2ccf6defa801435":"CARMEN\nEJEMPLO","bf24bb25933d8b4b7a97c6a02d4d7ebd":"BEM Example\nFEO de cojones","fa5aaf4ccca3c9f6d48f655f45c5e130":"Ben Frain: Escribir CSS es sencillo, lo complicado es escalarlo.\nUsar Herencia, cascada...\nArquitectura : metodología de un orden\n\nMONSTRUO INMANTENIBLE","2188bcc68d5a3c4de882fc0aa128ffc3":"IGNACIO\nBase: core /tags, herencia font-size\nLayout: patrón de diseño que no se repiten, específicas que no puedas ponerse en un módulo, 404, ABOUT.\nModulo: grupo de componentes\nThema: Accesibilidad = Problemas de visión de color, verlo de noche o de día (Beteve)","6a0a4ebd3fcbb518c391e83a8c220927":"IGNACIO","860bb04a9dc5ea1d92ab0a13935425a5":"CARMEN","bd72b5a6c0eb922d838a3f845e681087":"BROKEN WINDOW = 2 FASE\nCARGLASS = BUG","5f61a43aaf341919064f0d02b36350f3":"IGNACIO","899921ea9af56f5b9ac2e5acffa6519a":"IGNACIO","170442f2d6fcc7d1a23fd16e8067ffc6":"CARMEN","9c9a1e85c5394ad0636b5731a34b3c6b":"...esto es canvas!","ab615ff47a19f6340d63c44b6c0fce49":"El elemento canvas es un elemento definido en el código HTML con los atributos de anchura y altura. El verdadero poder del elemento canvas se lleva a cabo aprovechando la API de HTML5 Canvas. Esta API se utiliza al escribir JavaScript, el cual, puede acceder a la zona del canvas a través de un conjunto completo de funciones de dibujo, permitiendo así generar dinámicamente los gráficos.","0fe7e465bc9c96d87821ca509572ba2e":"La función fillRect() dibuja un cuadrado grande negro de 100 píxeles en cada lado. La función clearRect() luego borra un cuadrado de 60x60 píxeles del centro, y luego strokeRect() es llamado para crear un contorno rectangular de 50x50 píxeles dentro del cuadrado borrado.","f6a7dbf54f9e03a6e4d40ab53cf05dc7":"El primer paso para crear un trazo es llamar la función beginPath(). Internamente, los trazos son guardados como una lista de subtrazos (lineas, arcos, etc) los cuales juntos crean una forma. Todo tiempo que sea llamado este método la lista es reseteada y podemos empezar a dibujar nuevas formas.\n\nEl segundo paso es llamar los métodos que específican los trazos a crear. Los veremos en seguida.\n\nEl tercero, y un paso opcional, es llamar a la función closePath(). Este método trata de cerrar la forma dibujando una linea recta desde el punto actual al inicio. Si la forma ya ha sido cerrada o hay solamente un punto en la lista, la función hace nada.","c122eddbdb340d1f477fff2d446b845a":"Antes de que podamos empezar a dibujar, necesitamos hablar sobre la grid del canvas o el espacio de coordenadas","cb502e9971b28ebd387d3349861641c8":"El origen de esta cuadrícula está posicionado en la esquina superior izquierda (coordenada (0,0)). Todos los elementos estan posicionados de manera relativa a este punto, así que la posición de la esquina superior izquierda del cuadrado azul es de 'x' pixeles desde la izquierda y 'y' pixeles desde arriba (coordenada (x,y))","d3a1cc0cb5477466c795b82b2847e6cc":"Usar el elemento \u003ccanvas\u003e no es algo muy díficil pero necesita saber y entender los aspectos básicos del HTML y JavaScript","90cdea19876f2fa94b5db8d32274edaf":"","f2e4328fd88cbb54ea81ffaaded2a8ff":"Macromedia flash player, era un reproductor multimedia. A Macromedia se la comío Adobe. Básicamente para reproducir las animaciones creadas con Flash, tenías que instalar y sobretodo lo más tedioso, actualizar un plugin en el navegador. \"mas pesado que el clip de word\"","2d1cc47d54ab4d19af83ba51c15dd089":"canvas fue incluido en la especificacion html5 y pasó a ser un standard web","ec021da38a448d23d0c2607e3841dfb9":"WebGL permite crear contenido web y su representación 3D en un elemento canvas HTML en los navegadores que lo soporten sin el uso de plug-ins","bced22bb9f6c41315915cb9a53f8d6fd":"Point, click, touch...","d4f6efa10e8cc3ec1be1dd0ac4c5d98d":"The setInterval() method will continue calling the function until clearInterval() is called","4dcfc4b124755bb0ba3c21c52e3fcc5e":"ADA js / Consumer Experience\n","a143371da920a7153f896918e70ac31e":"ADA js / Consumer Experience\n","5f0229b6eaca3da204e86ae8489d8352":"ADA js / Consumer Experience\n","28304dd85071287e2401e088eeb8a1ad":"Everyone's workflow is different.\n\nMine is not necessarily best for you.\n\nWe're still finding out how to do it. It's clunky.","40a05e76241cee43d908bfc6d129fe2c":"You can use Sketch, Inkscape or AI.\n\nIf you're a Creative Cloud member you probably have AI. I use it.\n\nSublimeText sits in between as Mr Wolf (fixes problems, cleans up the mess).\n\n\n","71315664aab208fba4cc431ea6d8e083":"ADA js / Consumer Experience\n","f13b81265e038198aa298a945213e05b":"ADA js / Consumer Experience\n","6c59c7373708fe4911b8a0cf85e4e91a":"Bienvenidos a la charla THE SVG FILES, en la que nos adentraremos en el universo de los SVGs animados y mi mayor logro será que os animéis, nunca mejor dicho a adentraros en él y perder el miedo.","d5c524a05c2d2c3abdc4816bd8e8700f":"Aprenda a buscar, crear y manipular SVG para la web. Luego agregue la increíble biblioteca de animación JavaScript GreenSock para dar vida a esos SVG. Nos sumergiremos en el código SVG y exploraremos cómo configurar sus ilustraciones para la animación. Luego, echaremos un vistazo a la biblioteca de animación de GreenSock y muchos complementos útiles para animar sin problemas nuestros SVG en CodePen.\n\nEn este video, analizaremos el código SVG para comprender mejor con qué estamos trabajando antes de animar. También veremos cómo crear nuestros propios SVG, exportarlos y optimizarlos y dónde encontrar SVG ya hechos en línea.","f714e2b1737891a932e78a03a6fcf00c":"SVG is an XML-based markup language and, is more than just a Vector image format. It provides a great bridge between design and front-end development, and works as a fun starting point to play around with other web technologies. Let’s explore the exciting world of SVG animation together. We’ll start with design, explore some animation and finish up with some interaction, as interaction is what makes motion on the web so much fun.\n\nSVG like any other programming language, can be written and edited in a text editor. So theoretically, as opposed to JPG or PNG files, we don’t need any GUI software to create SVG. However, in a vast majority of cases, using graphic design applications is inevitable.","18d69a9e3c5f400da77af55e5feb9a28":"Chris Lilley director técnico de la W3C.\nLo podéis encontrar en Twitter como SVGeesus, Master of naming\n\nDespués de que SVGessus lo implementara, unos años más tarde, allà por el 2001 lo integraron dentro la W3C y entró a formar parte del standard de la web. ES UN STANDARD WEB!\n\nLa especificación se aprobó en el 2001 por la W3C - Chris encargó en el año 1998 la especificación, él pensó en gráficos vectoriales para competir con flash -\u003e Spoiler: Adobe ganó, SVG deacayó pero unos cuantos siguieron trabajando en su cueva hasta que allà el 2010 HTLM5 te permite poder introducir SVG en línea y ZAS les da alas, se revisa la especifiación y se comienza a trabajar en la segunda parte, que creo que el DRAFT es del 2018, algunos Navegadores como Mozilla .... XXX-XXX\n\nhttps://www.w3.org/TR/SVG2/\n\n","9162832fa04d7275ce809fb2d14739f4":"\n","37c92f97d75c9ab3b17c24ba1514d289":"Pues os presento a Alf, y el planeta de nuestro amigo, está lleno de coordenadas y misterios que él sólo no sabe resolver, y además a perdido a un colega que se llama Gurb, así que vamos a ir paseando para ver si damos con él, dicen que lo han visto pasar por aquí","31e4fd6855c1029858f105149625b8b4":"","d1fad135e726f1d644bca6239406cdf2":"CodePen es un editor de código en línea y es muy útil ya que puedes comenzar a picar sin necesidad de crear un proyecto comenzar a agregar código al editor y ver los resultados de inmediato sin tener que preocuparse por vincular a otros archivos o descargar CDN.\n\nEstas son las formas básicas \"Circulo, rectangulo, poligono, linea, polilinea y path\". \nCómo veréis en los elementos no están cerrados, cómo si fuese una etiqueta SVG y a no ser que los vayamos a animar de forma nativa SMIL, no nos haría falta. \nHasta que la especificación SVG2 no llegue, ni el z-index, ni el atacar individualmente a estos elementos que estén englobados dentro de la misma etiqueta \u003csvg\u003e se podrá hacer. Así cómo el soportar RGBa cómo modo de color, que tiene un canal alpha-\u003econ transparencia.\n\nPath es el qué y el cómo xD La herramienta Bezier del SVG con el que podréis crear las formas más avanzadas.\nMuchos gráficos vectoriales se crean a partir de unas pocas formas básicas: agrupadas, transformadas y combinadas entre sí.\n\n","d7e157807bedd3f09f384d02d608db72":"SVG Markup\nAntes de ponernos a diseccionar e inspeccionar el código de estos ejemplos, vamos a tener que tener claro lo más importante, y lo más a priori, complicado de los SVGs.\n","341fc3bcce498978bfa35cadd050cef8":"","c9fe7b149b4b98467f1924e245d24802":"The shape of a path element is defined by one attribute: d. The \"d\" attribute contains a series of commands and parameters used by those commands.\n\nAnother command is the \"Move To\" or M. It takes two parameters, a coordinate ' x ' and coordinate ' y ' to move to.\n\nThere are three commands that draw lines. The most generic is the \"Line To\" command, called with L. L takes two parameters—x and y coordinates—and draws a line from the current position to a new position.\n\nThere are two abbreviated forms for drawing horizontal and vertical lines. H draws a horizontal line, and V draws a vertical line. Both commands only take one argument since they only move in one direction.cula, las mayusculas, son valores absolutos, es decir, de M mayuscula salgo hacía allá, y la m minusculas sería relativa a ese punto.\n","91156a48c3247888dbbcbc76c0d9d619":"He tabulado para que podáis ver lo que he explicado de forma más legible. Ese código, lo que está formando, es la letra X. \n\nLa forma de un elemento de ruta está definida por un atributo: d. El atributo \"d\" contiene una serie de comandos y parámetros utilizados por esos comandos.\nOtro comando es \"Mover a\" o M. Se necesitan dos parámetros, una coordenada 'x' y una coordenada 'y' para moverse.\nHay tres comandos que dibujan líneas. \nEl más genérico es el comando \"Línea a\", llamado con L. L toma dos parámetros —coordenadas x e y— y dibuja una línea desde la posición actual a una nueva posición.\nHay dos formas abreviadas para dibujar líneas horizontales y verticales. H dibuja una línea horizontal y V dibuja una línea vertical. Ambos comandos solo toman un argumento ya que solo se mueven en una dirección.\n\nLa M marca el punto donde comenzamos, \nv = vertical\nh = horizontal\nz = cerramos el path\n\nhttps://codepen.io/carmenansio/pen/oNXwLPJ","aa24e36fc242ab0285bac7b9c958f8bb":"Aquí tenemos un codepen de Chris Coyier, que para mi, junto a Sarah Drasner, Sara soueidan, y Cassie Evans son faraonas de los SVGs y animaciones.\n\n- ha añadido el \"d: path\" de un svg a través del CSS\n\n\n ","379893fbfc4e0a2fb7349f798950f5a1":"Para que sirven los grupos?... Para agrupar! xD ¿Podemos agrupar \u003cg\u003e dentro de \u003cg\u003e? Sí... para qué?\nPodéis ver esta \u003cg\u003e, que lo que está haciendo es agrupar a \"red-fluffy\" Nacho, va por ti xD\nY además al ufo, así que tenemos a los dos objetos agrupados. Ventajas de agrupar? que podéis atacar a la vez a todos los elementos que tenga ese grupo.\nPero, aún así, esos elementos pueden ser modificados por separado, si vamos al css, podemos modifiar por ejemplo, la opacidad de red fluffly, y solo ella se verá afectada.\n\nAsí que por ID's o por classes, podemos hacer modificacioens al target en concreto que hayáis elegido.\n\n\n","bf322802f8aeb2fe67fc9e0828c1f6df":"Podemos hacer máscaras con imágenes, y los usuarios más avanzados en photoshop, me podéis decir, vale, en un plis te hago esa máscara.\nPero, puedes cambiar el texto on the fly? Además de ser accesible?\n\n","f4e6485496fa1764a89190046ef328bd":"También podemos utilizarlo con imágenes y aplicarle filtros.\n","f4b7df69cf5ffd5f56c4f33ca26a009d":"Y hacer clipping del viewbox. Este es el primer ejemplo, pero he modificado la posición del circulo, y he movido el viewbox. Vamos a verlo en el código.\n\n*Explicar Demo en directo","bbd11ac934065973f2576f2df532e4ec":"PreserveAspectRatio es un atributo muy importante, en el ejemplo podéis ver los diferentes valores que puede tener, y su comportamiento poniendo el mismo svg en ese cuadrado de mismo tamaño para todos. Sobre todo no os olvidéis, de que debe estar el viewbox en el SVG o no os funcionará. Os vais a tirar una hora pensando que es lo que estáis haciendo mal.\nCon este atributo haremos luego un ejemplo de logotipo responsive. No entraremos mucho en detalle, sólo que sepáis que existen.","134e2f33bbad418a97faca243b5d2647":"Os voy a explicar un poco mi workflow de trabajo, cómo crear, optimizar, exportar e implementar estos gráficos.","08296a23ad07783359981a8bcd888771":"Y esta astronauta soy yo, y quiero agradecer a CSSconf colombia que haya contado conmigo, y esperando poder regresar pronto a Medellín\n\nSoy Carmen Ansio, trabajo como Product Designer en Holaluz y este es mi Twitterhandle, os invito a que me sigáis así si a alguien le surge una duda en unos días podéis hacerme llegar vuestras preguntas, que las contestaré encantada. \nOs aviso! Sólo veréis fotos de mis dos gatitos, y Videojuegos.","6fcb916f7f385584a29be2f255c847d4":"","5651070a3064b24104b0af44e896c020":"Aquí tenéis acceso a la colección que he creado en codepen.\nCompartiré las slides también en twitter, con el tag de la conferencia que aprovecho para recordaros que es: XXXXXX para que podáis encontrarla rápido.\n\n\nhttps://github.com/nucliweb/People-You-Should-Follow-on-CodePen\n","07d491902acaf87c479aa7502ff606ce":"","793ffc2675d9fe7b648585a6e33d5233":"Aquí tenemos una agrupación/clasificación del software más popular que podéis encontrar hoy día en entornos profesionales. Cómo todo en esta vida tiene sus haters, pero hay que ser objetivos y realistas para con tu entorno/sector. Obviamente un diseñador de logotipos que trabaja en una agencia donde son partners de Adobe, pues no te va a decir que utiliza Inkscape.\n\n1. Notición: ¡Adobe es tremendamente caro! (os lo digo xq lo pago).\n2. Tranquilidad, hay opciones Open Source, tanto para tratar imágenes cómo vectores (Gimp y Inkscape).\n3. La batalla bestia en UI la están teniendo ahora mismo Sketch y Figma.\n - Ventajas de uno y otro (no soy comercial de ninguno de los dos) (Sketch for teams). Figma para windows.\n\n*Review de cuál es más fuerte en qué","6749f305082ad007bf75a90443fa6ecd":"Me centraré en illustrator, básicamente xq cómo ya he dicho es mi preferido para la hora de crear iconos e ilustraciones. Y es mucho más sencillo para hacer este tipo de trabajo, los otros están más orientados a hacer interfaces, así que la parte de creación de iconos.. \n\nConsejos de Vida: Sed organizados por dios, cualquier nombre que le déis a una capa, será añadido como un ID en el código del SVG. Y eso puede ser un dramón si no sois organizados.\n\nEjemplo, si os fijáis en la EXCLAMACIÓN, estoy sobre este gráfico SVG ATTACKS!, pues podéis ver que se compone del palito y el punto. Y en este caso, podría atacar al palito y al punto por separado.\n","907a58262b454249e5a010f91330ba23":"Desgraciadamente, a la hora de exportar, parece que toda la industría de software de edición se ha puesto de acuerdo para que, cuanto más código basura añadan al exportar el svg mejor.\nAsí que para exportar, illustrator, también sigue siendo mi herramienta preferida. Ya que las opciones de optimización y enfocadas a ID's y Classes que ofrece, así cómo añadirle atributos que nos van a servir para trabajar en la web son muy útiles.\nHay varias formas de exportar dsd illustrator, la de la izquierda es un clasico \"save as\", que suelo utilizar para hacer una copia original del archivo. \nControl de versiones cuesta para diseñadores, y siempre se acaba con archivos en plan, svg.1, svg.2, svg.final. svg.final2. svg.final.estesíquesi. \nHay plugins para sketch, y figma que te abstraen de todo lo que pasa por detrás y se están poniendo las pilas en este aspecto xq creo que es mega necesario.\nY el de la derecha es la opción de Exportar, Decimal1, te guardará todos los puntos que hayas necesitado para crear el gráfico y los respetará. Con menos, te hará la selección y limpieza a su libre albedrío y puede que no quedé como nosotros queríamos.\nOjo con convertir el texto a outline \"relleno\", que ya no podrá ser accesible!","565825caa86deb19319a04bd2f3b36bd":"","f42cd803d5d3b8b0822b4a4afc427827":"","c5d3e0a9fce026e0dd33dd21318b251e":"Vale, este sería el original que he hecho para la charla, todos esos puntos son puntos de ancla, ya que cuando dibujas con un programa vectorial vas añadiendo puntos, cómo en las coordenadas de antes?\nVas dibujando puntos matematicos y si quieres simplificarlos no tienes que eliminar muchos o perderá el aspecto que quieres que tenga.\nAsí que hay que encontrar el equilibrio para simplificar esos puntos para que el archivo pese menos, pero sin perder calidad.\n","3f945ea3be6f3116c3031f0ccfd8028a":"Tienes la opción de minificar ese código, que lo hará ilegible para la mayoría de los mortales, pero que hará que pese muchísimo menos. Y si es ya para subirlo directamente a producción que no tienes que trabajar con él más, pues es una buena opción.","670faed8fa44f32c5987857260a99609":"Tenemos plugins para que no tengáis que optimizar a mano si utilizáis herramientas de diseño, SVGNow para Illustrator, y SVGO para Sketch.","559b10d1065ad99327fcc8b525b4e45b":"Optimizate Tools\n\nAntes de arrancar el viaje tenemos que hacerle la puesta a punto a la nave o no vamos a llegar a ninguna parte, cuanto más optimo sea lo que llevamos encima más rápido podremos volar, así que optimizando nuestro SVG con SVGOMG es la mejor opción, lo tenéis disponible como paquete en npm, para que podáis configurar vuestro webpack, o lo que utilicéis de gestor, y los parametros son los mismos que tenéis en la interfaz visual, para añadirlo, puedes hacer drag and drop o enganchar el markup. Podréis ver el porcentaje de optimización al vuelo, y descargarlo como nuevo.","1b1706e807168c2d6c1482e6a4284ba7":"Pues ya tenemos nuestro gráfico exportado y optimizado.\nAhora vamos a ver diferentes manera de IMPLEMENTAR nuestros SVG's.\n\nPara que se pueda añadir en linea -\u003e doy por hecho que el !Doctype es de html:5, claro.\n","72a103af5dda4adb443030747fe97e90":"SPOILER: No hay ninguna solución perfecta, depende mucho de las necesidades o requisitos de cada casuistica. \n","c34db351c7a08e7ba50d1a9abd6ef4e6":"SVG Embedido, se podría añadir el svg a través de un background-image, y en este caso si tienes alojada la imagen en un servidor como se puede apreciar aquí pues te añadiria el SVG del alien como imagen.\nLa mayor desventaja de esto, es que pierdes totalmente el control sobre tu svg, y todas las propiedades editables desaparecen.\nEs decir, es muy facil añadirlo, tu pones el tag \u003csvg\u003e con una clase \"alien\" a esa clase por css le añades la propiedad brackgroun-image, y la url de donde está alojado ese grafico y ya está.\nPero no soy nada fan.","0c081b9b0949897a58ec9a47cb83ac47":"Con USE, en este caso puedes añadir directamente dentro del SVG una etiqueta \u003cuse\u003e con un enlace href a donde está alojado el gráfico, que en este caso es un sprite que he creado, con 16 iconos, ahora después lo veremos, y estoy haciendo target unicamente al ufo, llamandole con su #ID UFO.\nLo que más me gusta es poder tener un sprite con todos tus iconos, y poder llamar solo al que quieras. Además aquí si que tenemos todas las propiedades para modificar el svg y darle estilos.\n","48ff47cc5f085fa1713c6c3b6355f2e3":"Añadirlo directamente con el tag IMAGEN, es mega facil de incluir, pero tampoco puedes modificar los estilos, ni el grosor de la linea, ni el color, etc...\nVéis los ufos de color verde y rojo? pues es el mismo que el de linea negra, pero he modificado los estilos. Con esta forma de implementarlo, no podríamos hacerlo.\n ","a2b64499530553fc68a82a654015bda5":"Via Object\nEn este caso, para navegadores antiguos que no soporten SVG está muy guay xq tiene un fallback.\nPodéis ver en el codigo que estoy poniendo una imagen con un .png que sí que leera el navegador, me ha faltado poner un texto con un enlace para que descargue otra versión xD\nAquí hay acceso total al dom con lo que puedes modificar los estilos por CSS y JS.","efae7869204bc3e450667e165ae299a2":"Añadiendo todo el código SVG directamente en el HTML de forma inline, tenéis las ventajas del anterior, y que además, podréis animarlo fácilmente y me flipa la animación, así que es un amor/odio hahaha,xq a la hora de mantener el código va a ser un suplicio.","4b8da7391617e30afeac6381ad4ae5c5":"4 Cosas básicas para hacer que el contenido sea accesible\n","1886ce16fe1eebe086414ee37113af32":"Para que seamos todos conscientes de la importancia de hacer una web semántica y accesible, podéis cerrar los ojos y utilizar el lector de pantalla, a ver que os encontráis, y a ver si sois capaces de navegar según por que páginas, y no entréis en la que todos estamos pensando xq será una mazmorra de la que no podréis salir.\n- Titulo y descripción. Ahí Ya le estás diciendo que contenido es, con lo que ya puede entrar y saber que gráfico se está mostrando.\n- Limpia todo el código basura. El lector de pantalla va a leer hasta la última coma que se encuentre.\n- Haz que sea \"focusable\" , es decir que puedas ir tabulando y pasando de elemento, sobre todo si haces un SVG con contenido interactivo. Ejemplo, Listado interactivo, no va a poder entrar a ese contenido, y se lo van a perder.\n- Roles semantico: Si tenéis esa lista interactiva, podéis poner el \"role\" list, y que puedan ir saltando de elemento.","a5ced9c9c9633a1e0dad4bcf708688f5":"Sistema de iconos","9676ad6a6aa68ce09bd0f1767a97f976":"Aunque hace unos años no lo habría dicho, rectificar es de sabios!\nIcon Font son el mal! Dan muchos problemas.\n\nEn vez de centrarnos en lo negativo, nos vamos a centrar en lo positivo que es utilizarlos en SVG.\n- Tenemos más control en los estilos, incluso podríamos pintar diferentes paths de un mismo grupo de varios colores.\n- Podemos animarlos y crear interacciones para el usuario.\n- Como ya he comentado puedes añadir una imagen como fallback.\n- Son consistentes a través de navegadores (las icon fonts NO!). Xq? xq cada navegador renderiza a su manera, aunque le añadamos uan propiedad antialising para intentar que sea pixel perfect, pero si no han estado bien diseñados con medidas clavadas y algun path tiene un .5, van a tener problemas de visualización.\nY cómo estáis viendo, son super faciles y divertidos de crear!!\n","682ac703cfa5df2bb00d4bb4746bd4e2":"Esta interfaz es icomoon una plataforma que hay online, y podéis ver los iconos que he subido para crear mi fuente. \nPodéis generar fuentes, pero también sprites, que esa parte es muy guay.\nSon los 16 iconos que os comenté que tengo en el sprite. La plataforma te ofrece esa fuente en varios formatos, ttf, wof, y wof2 creo.\nPASOS\nSubes tus iconos, seleccionas los que quieres, y te genera la fuente. Si yo no documento esto, y mañana viene mi compi y dice, ostia, que al final estos tres NO...\nBien, esos iconos tienen un orden, si hay que actualizar esa fuente, y otro compi deselecciona un icono, y lo vuelve a seleccionar en otro orden diferente.... SI OF FIJAIS ESTÁN EN OTRO ORDEN AHORA. ","cec7381c13caec7f52d0221fbe9fd371":"Que conlleva esa modificación?\n\nPues que la habéis liado sin daros cuenta. En icomoon tu añades un nombre a cada icono, que será el nombre de su clase. Hasta aquí todo correcto. Pero en realidad, icomoon lo que hace es añadirle un content a esa clase, y un numero unicode.\nAsí que si mueve de posición varios iconos, te cambian las clases, las variables y es un problemón solucionarlo luego, y aún peor, si dos compis están trabajando en diferentes momentos con la misma fuente y no se dan cuenta, puede que no pete nada, y digan a producción. Y que donde tiene que haber un icono de carrito de compra luego haya el de un teléfono. Ya verás que risas!\n\n","6cfcafef919ec883f16fbc226eb1b418":"","1b45d054a46879e01df6bb07110938eb":"Hemos hablado antes de lo dificil que es mantener un svg inline, pero con el sprite, podemos tener en un solo svg todos nuestros simbolos. Y como veréis en el ejemplo.","2ca2a3f53c7fded30cdee7543415e6fc":"En nuestro código sólo veremos un use que hace target al simbolo que queremos utilizar.\n\u003cdefs\u003e\n\u003cuse\u003e\n\u003cuse\u003e dentro de \u003cdefs\u003e? - no lo pilla\n\u003c!--\u003cuse xlink:href=\"#moon\" x=\"25\" width=\"100%\"/\u003e--\u003e Suma 25 a la coordenada con lo que el siguiente icono aparecería desplazado a esa coordenada. Puedes añadirlo en negativo, con lo que puedes hacer un clipping. Overflow: hidden;","aabc155d89d29e09f5969a738c04dc17":"Como imagen tendremos, el svg que queramos si llamamos al sprite e identificamos su ID el hastag, ufo con el texto alternativo ufo","e242625490bbcd21225047d72e2b7c3c":"Cómo hemos generado este sprite?\n- Para los que tengáis un poco de miedo de tocar el software de edición.\nAquí tenéis una tarea con \"gulp-svg-sprite\", hay muchos paquetes que te hacen practicamente lo mismo, pero este en concreto es muy sencillo de utilizar,y con 4 parametros te genera el sprite.\n\nVeis que la configuración:\n","51a5a864b4ad8c6df938fb0dfec8bf3d":"Vamos a ver unos puntos para tener en cuenta a la hora de que tu svg pueda comportarse de manera responsive","cf77632c8389274327ed6b9eb35df930":"Elimina los atributos width y height","ba8ee6994bcee4c59bf55306a9f38231":"Esto ya lo hemos comentado cuando vismo el PreserveAspectRatio.\nAñade el Viewbox si es que no venía ya en el código.","ba87ae3865b0c8da98dd325df5e94653":"Acordaros que este atributo no tiene efecto si no está el Viewbox añadido dentro de la etiqueta SVG.","6740d9ca32c1f15c1359baf6a430b711":"RESPONSIVE LOGO\nY vamos a ver un ejemplo en vivo!!\n\nLo que estoy haciendo aquí es cargar todo el svg, agrupar las partes que me interesan, y crear un SVG nuevo con esos grupos.\nY por media queries le indico que dependiendo de la pantalla, se vea una parte del logo, o toda la parte. Es un ejemplo muy sencillo pero\n","af3c8773277f57e75258bc9e65a8f258":"Vale! 4 pinceladas, que os suena, que SVG tiene animaciones nativas SMIL, nunca se decirlo!! Pero vamos a ver otras formas de animar y añadir interacción.\n\n\n","b3c0746ab4afba07b0a0d8f0ec636651":"En este ejemplo, hay una interacción de mouse over, aquí tenemos el ovni, y si yo me posicion justo encima, ya lanza la animación que le he dicho que haga.\nY si lo dejo encima.... iiiiiiiuuuuu HE SIDO ABDUCIDA!!\nEstaría genial que miraráis los ejemplos y si durante estos días o cuando sea que veáis el video, pues preguntadme sin ningún problema por Twitter que os contestaré encantada.\n\nY de verdad, os vaís a divertir un montón!! Yo me lo paso pipa, y además, es que me puedo tirar horas aquí.\n","32ebac4b1ea0babbe3d02f4ddacfb9f6":"","1d2b21416898e30a796b4161e8be7ef3":"","4dbeb4c318462016b7f3ad7ee82b34ab":"Os voy a enseñar este ejemplo, que ya tiene un tiempo, pero ha sido la inspiración para muchos otros.\nAhí tenéis el enlace al codepen.\n\nEstá hecho con GSAP, que es una de las librerías de pago de GreenSock","4140260a19ea27336f8655b770032fe0":"","95d7dc6be11d898c26fed9fc4c5db4dc":"","7b469912723eae6185d2d29062775bff":"Si os logueáis odéis descargar gratuitamente todos los iconos, siempre y cuando deis creditos al autor cuando lo utilicéis.\nInspiración de animaciones\nthenounproject.com/\nundraw.co/illustrations\ndribble","4edfaeb4aa52ee955af2c3df69272268":"Así que esta es una pequeña base de datos de mi oficina que hice con SVG. Así que tuvimos algunos paneles solares instalados en el arrecife en el trabajo. Quiero decir que tenían una pequeña interfaz en línea, pero era realmente aburrida. Solo tenía muchísimos datos y es muy difícil descifrar los bits que queríamos ver. Um, entonces tenían una API, así que nos enganchamos a la API e hice este pequeño edificio de oficinas y ahora podemos ver de un vistazo cuántos árboles por valor de CO2 hemos ahorrado. Y puede ver cuánto almacenamiento de energía tenemos y se ilumina las ventanas. Eso fue muy divertido.\nOtra pregunta de Nick fue: ¿podemos alimentar datos de una fuente externa a SVG para hacerlo más dinámico? Así que supongo que tocaste eso. Entonces, la fuente externa tal vez sería la cámara web y los datos del techo para cambiar el color del camaleón.\nEso es obtener datos de API, um, y luego mostrarlos. La animación SVG realmente puede ser dinámica y puede obtener datos de la API de la entrada del usuario y puede cambiar lo que está haciendo su animación en función de eso. Y nunca puedes, no puedes hacer eso con la animación de video. Creo que es por eso que comencé a hacerlo, me metí más en la animación SVG porque cuando haces una animación y después de los efectos, cuando la exportas, entonces está listo. Solo es eso. Eso es lo que parece. Um, mientras que los SVG pueden cambiar, lo cual es genial.","15c5ca19a801c3bcd6d9cb93ba04ec99":"¡ACK ACK proyecto con mando de la XBOX!","6659beba3df85f72e98b53d5b4192733":"","e23985c7774d5e634e5a3e4299251989":"Looking at our first TweenMax animation:\n","549754d38aa93c7685c6b8b3244f2893":"I will focus on TweenMax and TimelineMax. GSAP also offers a smaller library in the form of TweenLite and TimelineLite. \nTweenMax extends TweenLite, adding many useful (but non-essential) features like repeat(), repeatDelay(), yoyo().\n\n\nGreensock is better for SVG animating than Anime.js. They fix a lot of issues inherent with SVG.\n","1bf5061ac9d4ac8dc57bf6e7da63f3b2":"","1f050c9ddb22c15527e9a48f4103e7a9":"Antes de nada, agradecimiento infinito a la organización por contar conmigo, y dejarme disfrutar de esta Ciudad maravillosa de la que estoy enamorada perdidamente dsd el año 2017 que la pisé por primera vez :) y de su gente!","f664ca2d2e3b68c0bbc04b6685e8ed92":"Explicar como activar el flag en Chrome","b5ea8e13f55ad5de6980c796ce5611b7":"","35fa7af689beab9d5a605abd811a76f7":"","cfbf1d41aa93b8c2df0b431b08439573":"Comentar que hay que encontrar un balance entre calidad (perdida de datos o precisión) y tamaño del svg.","8fd54224ba0e3ed9882fd6d6a3f3d863":"In this video we will break down SVG code to get a better understanding of what we are working with before animating. We will also look at how to create our own SVG's, exporting and optimizing them and where to find already made SVGs online.\n","a62ee6046c1ab01a14ace0c4e20c7e40":"","4a3f4d348ccddb38fee1b1e2f2f02298":"","d59e243ce5f21c68677abe29fbe8c28b":"Todo lo que esté dentro de la etiqueta \u003cdefs\u003e el navegador no lo va a interpretar. Y por tener una jerarquia o orden, la pondremos siempre en la cabecera.\nSi le añadimos un #id a ese objeto, vamos a poder llamarlo con \u003cuse\u003e\n","2c693d20f712f29c33e8467ac8c27162":"","1e64bb488acadf152954a37d9f43839d":"","8426b4b12d11ecbead118eae4b06de85":"","ef89e14da5180e7c26b04bde93a9261b":"CSS Animation consists of a style describing the animation and a @keyframes block that defines intermediate stesps in an animation sequence.\nAll aspects of animation are controlled via a set of easily understandable properties: LONG PROPERTIES \n\nanimation-name, animation-duration, animation-timming-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode \u0026 animation-play-state\nand SHORTHAND SYNTAX that combines all the others.\n\nThis is what the CSS animation code looks like in its simplest form:","3459ccda18f675ca499d89b005990dea":"Los dos bloques que véis es el mismo código, sólo que el de abajo lo he tabulado para que podáis ver lo que he explicado de forma más legible. Ese código, lo que está formando, es la letra X.\nY si os fijáis la clase del path es \"files\". Si alguien lo ha pillado que de señales xDD.\n\nLa M marca el punto donde comenzamos, \nv = vertical\nh = horizontal\n\nz = cerramos el path","93d43df8d42937e4c23f1167a179832e":"","1855d7ef4e19f189db86e5d480ef72e8":"","eda39a23643e4946945bc8845f19c015":"SVG Efficiency in the Browser\nSi no sois vosotros quienes trabajais directamente con ese vector, que los compis que os lo pasen se encarguen de quitar todo lo innecesario, cómo pueden ser etiquetas \u003ctspan\u003e, titulos innecesarios, comentarios... toda la basurilla que no nos sirve para nada.\n\nOptimize SVG removing anything unnecessary","2e24f6e37887c3a4f480c1cc21e8e75f":"","330a308066ec74349da8dfeb149bb2f1":"","389d01ace01b64be05e8fb0e75f4c860":"Sin embargo, hay un inconveniente: el elemento animado debe diseñarse con trazos en lugar de rellenos. Lo que significa, para nuestro texto, que no podemos usar ninguna fuente existente.\nDelinear las fuentes, no importa cuán delgadas, siempre resultan en formas cerradas en lugar de caminos abiertos. No hay fuentes regulares basadas en líneas y trazos.\nUm, mientras que los SVG pueden cambiar, lo cual es genial.\n\nhttps://tympanus.net/codrops/2019/12/03/motion-paths-past-present-and-future/\n*Oct, dice que no hay tipos que sean sólo trazo, porque un trazo sin cerrar en glyphs (la herramienta que usar para dibujar, es invisible)","1947c6c11cc68d74fcf392f1dc492293":"Use the Pen tool to draw the stroke (I use Illustrator, but feel free to use)\nTherefore, if we want to animate text using path animations we need to draw it ourselves (or find some ready-made vector letters suitable for this purpose). When drawing your letters, feel free to use some existing font or typography as a reference — don’t violate any copyright, though! Just keep in mind it’s not possible to use fonts out of the box.","0370962b8958527efa14ee9d09e3380e":"","f470c3b3f1f05d6fab36cddfebb669e6":"A tween is a single movement in an animation. It's the movement between two points in a CSS Transition. It's also the movement between two points in a @keyframes syntax.\nIn GSAP, a tween has the following syntax: TweenMax.method(element, duration, vars) method refers to the GSAP method you'll like to tween with.\nelement is the element you want to animate. If you want to tween multiple elements at the same time, you can pass in an array of elements to element.\nduration is the duration of your tween. It is an integer in seconds (without the s suffix!).\nvars is an object of the properties you want to animate. More on this later.\nTo create a tween, you need to use methods provided by GSAP.\nset sets the vars object to the specified values without creating an animation.\nfrom animates the element from the values you set in vars to their current values.\nto animates the element from their current values to the values you set in vars.","28480d3cbc78a37f622a6b287c34aa64":"La verdad es que son muy baratas en tiempo y esfuerzo, y puedes tener animaciones super resultonas con una curva de entrada muy baja, ya que con Keyframes y Transiciones, puedes hacer magia. Además, con CSS no necesitas cargar ni aprender ninguna librería externa de JS. Siempre que no tengas necesidad de un listener, de controlar una posición, o de una animación muy compleja.\n\n","982dad5a1b56cf93908416fcd771d149":"","ba1dfc5d9036970d4807567126be2b34":"","8f33a203fbc847c17735e3f6f45dc68a":"","d8480b85034fd8cf3e844688e1fdf2b3":"","4b2d3b5261db46427c31727c9a4aaf05":"","125d054bdaef226ea212ecc506cc69cd":"","c5330c3a6c0d505dfce01f3058a71f09":"Tutorial DSD 0\nCrear, exportar, optimizar, implementar\n\n","8e70ad5283fe8bd5436214a93ae67ce1":"thenounproject.com/\nundraw.co/illustrations","0d64ad4215564b58ea9bffa325a73e17":"","013524f3f5ab9f40388efacffc43066f":"","e2ad08cb4bca21c253314875b26d2d6e":"dev.to/weeb/10-of-the-best-css-animation-libraries-31d7","a4d4a86bbdd0a158731aec5c9a21dd4e":"","2bf07327741e84a3db107e585698c5ae":"","dc8edb4a33469b49d415353b592bf6f3":"","0a567ee0fb7dfac08c0e82391497c065":"","8b2d66eb7f83a8ddbc03b8a3e46bb37b":"","9d7cca8279e3e39c639a0e4b0c729180":"","f9fab1915a72e1fa988bd147beeb1ddd":"","3b2854bd486c30365e0c625afe756342":"","2ba10495ecfd4549848d6fdf38fbb07f":"La animación está en toda la web.\nDesde sutiles transiciones de botones hasta completar la narración de historias en línea. \nAtención de los servidores. Una buena animación apoya el resto del diseño y ayuda a expresar la personalidad de la marca.","cbcab89b7a705081e407b6844027688e":"","25080ce8ceafc5f1a784ff925bf2f8bf":"","29bf841a0c9c9fc72460a76451d24021":"","4c452e741b157db06e00785a57fd1d37":"","c3e73590c9345757eee01c7ddeb57d91":"https://codepen.io/jakub_antolak/full/zYGoJQw","314ea431be0f48b09e63abee872dd4ee":"*Recordar Accesibilidad NUNCA AUTOPLAY","6794ad07cf54fbe99a46aa05760ea983":"","b31dc82c0120c983ca2372428754353d":"","b5092bdee4c00aa2b365fedd3faa4054":"","0a80b3e2ff3e705cd86360d519d9eb99":"","b35c946df592915c2453d3f652bf45e8":"","16f11cf0defeacbacfa9ea31afec12df":"","a288eb13bfb2bdbfc670f89f8ff4bd2b":"","75c134fe4833a82098383bc8036d225c":"https://www.iconshock.com/svg-icons/","cc701ec80d208a4836b86efc773f2bfb":"","696141b73d05136b2a626e21edf66867":"","754b40e0cf41096b49f8199b1173874f":"","26f67ec21a4efabca7b4dfe7602d8a3f":"","a24c9500a7975dd913418f9af161447d":"El VIEWBOX\nPodemos pensar en el elemento \u003csvg\u003e como un telescopio en otro mundo. Nuestro telescopio está predeterminado a un nivel de zoom normal: una unidad es lo mismo que un píxel.\nPero podemos acercar o alejar nuestro telescopio. Para establecer el zoom en nuestro telescopio, usaremos la propiedad viewBox.\n\nviewBox toma cuatro argumentos:\nx e y establecen la posición de la esquina superior izquierda de nuestro cuadro de vista. Cambiar estos valores desplazará nuestra vista.\nancho y alto establecen el número de \"unidades\" que son visibles dentro de nuestro cuadro de vista. Cambiar estos valores ampliará nuestra vista.\n\nExplicar Viewbox y Viewport del SVG\nThe viewport is the visible section of an SVG. While an SVG can be as wide or as high as we wish, only a certain section of this image can be visible at a time.\n\nThe viewBox provides us with very powerful capabilities. It allows us to specify that a given set of graphics stretch to fit a particular container element. These values include four numbers separated by commas or spaces: min-x, min-y, width, and height that should generally be set to the bounds of the viewport.\n\nAltering min Values: The min values within the viewBox define the origin of the viewBox within the parent element; in other words, at what point within the viewBox do we want it to begin matching up the viewport. In the above examples the min values are set to 0,0 (top left). Let’s change these to 50, 30.","54a0948fd1aa733c4355baf0202a44a1":"Ok, y donde encontramos ayuda, necesitamos un mapa que nos guie e inspire para dar con Gurb.\n\nhttps://undraw.co/illustrations\nhttps://storyset.com/\n\nY muchas más, donde podéis encontrar material muy bueno con el que no tengáis que comenzar de 0, y un lugar muy chulo es storyset, os explico como funciona:","be32a09ad8e0def1ae73866a78a2eb6f":"","93a6c840ea0811a56a1c4147a75d8741":"","8a484ab7c59aab3911d3ded6f83627dd":"https://greensock.com/ease-visualizer\n\nIn this video we are going to take a look at GreenSock's Ease Visualizer and see how eases can drastically change your animations. It's import to understand how an ease works and how you can change eases to create the kind of animation you want.","e50f5095861c9ee4eeaa65842745644a":"","af5a1703a931ce77c8401cec80378ea9":"","499e8effecdebf6eda1e0d53925d0450":"","116614c85a25c8b1157bb4b99f1fc83a":"","c73d3a106e048a15c905dc7484def0dc":"","d7c9cc7255bb3289bbe475a3eacc9635":"En animista encontraréis microinteracciones preparadas para plug and play, es tan facil como elegir la que más os interesa, ir a codigo y copy paste","d56a2ffca982ca73ba2f22973016aec7":"","c761826b5db94d1869a21e41c29a2564":"\u003canimate\u003e inside path","ade77d66df8aac118adc9c47b94f1eb6":"","cc332b29f697d5cd81e2d5a8a30564a5":"","3ee90f02e0ccfd583aa9b463b5be1693":"Ok, pero... y si soy una aventurera muy artista y quiero hacer mis propias ilustraciones, que opciones tengo?\n\nMuchas! Mis herramientas son estas, he añadido inkscape xq es opensource y eso siempre es bien, illustrator es de Adobe, con lo que tiene una licencia en coste elevada, pero Figma al rescate!! \n\nFigma tiene plan gratuito, soy community advocate en la comunidad de Barcelona y en la config que será en 2 semanas, anunciarán updates muy chulos, estad atentos :) y aprovecho cuña publicitaria para deciros que tamb esteis atentos a los eventos de friends of figma barcelona","95cc2a9f601426fab473aafdc32fea3e":"","3a3306357494983129e7cdd1154966d1":"Dejamos atras el plantea de CSS para adentrarnos en el de JS!\nEl planeta de las librerías JS!!!\nGreensock animation engine o GSAP, Velocity.js y Anime js\nLo divertido de las 3 es que tienen una sintaxis muy parecida, así que si aprendes una de las librerías la curva de aprendizaje será prácticamente gratis.\n\nXq me quedo con Greensock? Tiene modulos dentro de la libreria, lo cuál la hace más libiana si sólo utilizas uno de esos módulos, además tiene muchas herramientas para poder animar SVGs, como drawSVG, morphSVG, y Draggable. Velocity y Anime son licencia MIT , y algunas funcionalidades y licencias de Greensock son de pago\n\nSi siempre has utilizado JQuery para las animaciones, Velocity.js te será muy facil de introducir en el equipo, y sobre anime, pues la documentación es muy facil de entender, mucho más que en el caso de las otras dos librerías, y que a nivel de piso, es mucho más ligera.\n\nPero vamos a ver como funciona Lottie!","47f9d49e6107190ec45aec20efb6e727":"","0d0728c55a205a97da28becdc8360751":"","75b35e6f19ddac1142c0926ebe7fa3ac":"Para mejorar la usabilidad y la experiencia general del usuario. Pero, no nos vengamos arriba y hagamos que la animación este en todas partes y a la vez. Hay un momento y un lugar.\n\nCon la animación, podemos hacer cosas como llamar la atención de los usuarios sobre algo o dirigirlos a través de un flujo. Microinteracciones con feedback, efectos de transición de página, por ejemplo.\n\nhttps://rive.app/\n","47b8e502ad244db0c77fe5408f406de9":"","b174f41b049984cb7b2c83a669e0e4da":"Para crear nuestra animación utilizaremos la regla de @keyframes\nEsta es su estructura:\n\n- Name: es el nombre de nuestra animacion\n- Keyframe selector: puedes tener uno o más selectores\n- Aquí hemos usado dos selectores, uno para iniciar nuestra animacion y otro para finalizar\n\n","c535bc16526d708a3a35a3ed0d61e42a":"Debugger animations\nAnimations Panel\n\nComo podemos debuguear nuestra animacion? Tenemos un maravilloso panel de animations en las devtools","936e19ff0adfa380a29994e72c0a5101":"","96dd8792214591b73cdcdb9800edfd22":"En muchos casos, querrá utilizar la propiedad de transición CSS para animar automáticamente un elemento a medida que cambia. Esta técnica también se conoce como \"interpolación\", como la transición entre dos valores diferentes. Tiene la ventaja de ser fácilmente cancelable o reversible sin necesidad de construir toda esa lógica. Esto es ideal para animaciones interacciones simples como desplazamientos.\n\nPodemos ver como se comporta cada una de ellas, aún sabiendo que invierten el mismo tiempo en llegar la sensación es muy diferente.","853c919dd13911032c3662d34eb9b2d0":"","7d2eace0d47b32417589fb4d645f68ed":"","4c86e879776509210735d27a9f8ccaa3":"@alenanik11 / Alena Nikolaeva\n\nLas interfaces modernas en la actualidad suelen apostar por diseños con animaciones y transiciones que hacen más agradables los cambios de estado y acciones específicas en una web. Sin embargo, por cuestiones de accesibilidad estas animaciones también pueden suponer molestias a usuarios que son especialmente sensibles a este tipo de estímulos.\n\nTened en cuenta las preferencias que han indicado vuestros usuarios en sus navegadores.","ae4c4edc24c0c23478ff06a804eca963":"nombrar a Disney\n\nUnderstanding Interpolation\nWhen your browser animates a CSS property, it creates a sequence of intermediate values over the course of the animation. This is referred to as interpolation.\n\nThe human brain is hardwired to pay attention to moving objects\n\nLos humanos han construido modelos mentales que los ayudan a interactuar con su entorno. Nuestros cerebros están diseñados para detectar, comprender e interactuar con objetos en movimiento. Los objetos físicos se mueven de un punto a otro gradualmente; simplemente no aparecen de la nada (como modales, usuario avergonzado).\nEn consecuencia, la animación puede ayudar a propagar la respuesta humana natural al medio ambiente al extender un modelo similar a las interfaces de usuario digitales, lo que hace que la experiencia de interactuar con ella se sienta mucho más natural.","0ab6dfbe58fca30385219e8cb066684a":"Cuando tenga un archivo Lottie en funcionamiento, estará listo para mostrarlo en su web con los scripts de implementación necesarios para que JSON se convierta a animación SVG. Es tan simple como agregar cualquier otra biblioteca de secuencias de comandos a su página HTML. Aquí hay dos opciones con las que puede optar.","80e935a55e8e09e660386ed11d5a9dfb":"Lottie es una librería de animaciones creada por Airbnb para iOS y Android que se encarga de transformar las animaciones de After Effect y exportadas en JSON y renderizarla utilizando APIs de animación nativa en cada plataforma. Ahí reside el gran potencial de Lottie, la compatibilidad con dispositivos mobiles.\n\nEs un herramienta impresionante con la que puedes esquivar la dificultad de implementar animaciones en código tal y como estaban prototipadas con cualquier software de animación, esa barrera la eliminas, pero si quieres animaciones personalizadas, dsde cero, la barrera es que necesitas a alguien que maneje after effects.","a6696296252b743f45b22573d5ad534b":"Importar material de archivo\n- Capas bien nombradas\n- Arrastrar al timeline y automaticamente\n\nMake your animation.\nI made a space ship fly around, but you do you.\n\n","815a455082f83fd611ba889ef786a947":"Prepara tus elementos de animación.\nPara esta demostración, utilicé Illustrator para configurar mis activos en mesas de trabajo individuales y exportarlos como PNG. (Mantenga sus archivos organizados, porque After Effects se vincula a ellos).","632f8f933468d01fc08b2a0aef67d1c7":"Lottie confía en Adobe After Effects (AE) como su herramienta de creación de animaciones. La brillantez de AE es innegable: es el estándar de la industria para animar títulos, intros y transiciones de películas cinematográficas. Pero con el poder viene un laberinto de complejidad (muchas características no son compatibles con Lottie y la animación de la interfaz de usuario en general). Las capacidades de AE hacen que sea fácil de aprender y, lamentablemente, la curva empinada pone el uso de Lottie fuera del alcance de muchos diseñadores.","7e701c3b70a0a16b592616e653dcf562":"Mientras imaginamos el conjunto ideal de herramientas para el diseño de movimiento de la interfaz de usuario, no podemos evitar preguntarnos si AE es realmente el compañero adecuado para Lottie. Después de todo, el uso de AE para el diseño de movimiento de la interfaz de usuario está más allá de su alcance original. La situación se siente análoga a 2005, cuando los diseñadores dependían en gran medida de Photoshop como herramienta de diseño de interfaz de usuario, no porque estuviera hecha para el tipo de trabajo, sino porque no había nada más adecuado en el mercado. Luego vino Sketch, una herramienta con un enfoque de diseño de interfaz de usuario puro.\n\n¿Qué pasaría si hubiera un \"After Effects\" destinado al diseño de interacción y movimiento de aplicaciones?","b4f26cc902bb1c41ed4e206f398ab13d":"Exporta con Bodymovin.\nPuede omitir la cola de procesamiento esta vez. Abra la extensión de Bodymovin que instaló en el paso 1 (Ventana\u003e Extensiones\u003e Bodymovin) y seleccione su configuración.","3e99995471abd7eac885ea1674a34d4e":"Player online","928f1fb47314a2cbea5ad44d2e98a135":"Exportar el archivo .json\n","85bfe6345ebcce79ae776f7bf89a96ce":"Explorar Lottie Files, xq hay herramientas muy top como este SVG to Lottie dirctamente haciendo drag and drop de tu archivo svg","6186d96c6d2623f09e170746b70f177b":"","aae00101601411698f355c305cc74bf9":"Cuando tenga un archivo Lottie en funcionamiento, estará listo para mostrarlo en su web con los scripts de implementación necesarios para que JSON se convierta a animación SVG. Es tan simple como agregar cualquier otra biblioteca de secuencias de comandos a su página HTML. Aquí hay dos opciones con las que puede optar.\n\n\u003cscript src=\"https://cdnjs.com/libraries/lottie-web\" type=\"text/javascript\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js\"\u003e\u003c/script\u003e\n","784dbda4166a5f13c90b13c76ef67a81":"Cómo usar animaciones web con Lottie\n\nLottie compatibilidad con dispositivos moviles, que de forma nativa no pasa con SVGs\n\nAunque esto es una magia CSS muy impresionante y directa, puede usar After Effects para animar SVG y exportarlos a un archivo lottie (también conocido como .json). Lottie es una biblioteca JS desarrollada por Airbnb que leerá el archivo .json y hará la animación. Seguro que es una mierda cargar una nueva biblioteca, pero puede salirse con la suya con una animación muy hermosa en muy poco tiempo.\n\n\nLos ajustes son posibles con ambas soluciones y son bastante limitados, pero suficientes para que pueda modificarlos correctamente.\nCómo usar animaciones web con Lottie\n\nHay muchas razones por las que debería utilizar la animación Lottie en su sitio web. Resumimos algunos de ellos en nuestra publicación de blog anterior, donde puede comprender mejor por qué amamos tanto a Lottie. Uno de los beneficios es su sencillez de uso. Si tiene miedo de usar animaciones Lottie en su sitio web debido a su implementación, no se preocupe; te respaldamos con esta sencilla guía.\n\nPlugin\n\nAunque esto es una magia CSS muy impresionante y directa, puede usar After Effects para animar SVG y exportarlos a un archivo lottie (también conocido como .json). Lottie es una biblioteca JS desarrollada por Airbnb que leerá el archivo .json y hará la animación. Seguro que es una mierda cargar una nueva biblioteca, pero puede salirse con la suya con una animación muy hermosa en muy poco tiempo.\n\nQué se puede ajustar:\nVelocidad\nCírculo\nAuto-reproducción\nColor de fondo\n\nBONUS – Tips for performance\n\nWe recommend using the CDN link because it has a fast connection response so that your script doesn’t affect the speed load too much.\nAdding script ideally to the FOOTER section to prevent loading too early.\nPreconnect library server on HEAD for faster script loading.\n\u003clink rel=\"preconnect\" href=\"https://cdnjs.cloudflare.com/\" crossorigin\u003e\n\nFirst prefetch JSON animation file in HEAD for faster loading.\n\u003clink rel=\"preload\" as=\"fetch\" crossorigin=\"anonymous\" type=\"application/json\" href=\"/animation/your-animation.json\"\u003e","a0b245bcd62291ecaeaa4cf0315bf8b9":"","e82b61d841daf4d862ee81c0f2135870":"","29c5c6985f6b1eef1a56229c5daeaeef":"Nuestro amigo Alf es un SVG, o la parte renderizada de ese SVG, este también es Alf, bueno, en realidad ESTO ES Alf.\n\nAl ser un vector, el SVG puede ajustarse sin perder calidad a cualquier tamaño que le pidamos. Es el super poder que tienen los SVGs, además de que oh es CODIGO!\n\nPodeis lanzar directament un archivo svg al apartado de HTML de codepen y ya lo tendréis renderizado.\n\nhttps://storyset.com/\n\nExplicar storyset","f1ba5c5e43d5c415d78cdbb265cde40b":"Hablando de illustrator...\n\nHe ilustrado la misma ilustración en figma o illustrator? \n\nSi, pero he reutilizado el SVG, ya que after effects no soporta SVGs, soporta las capas de illustrator, y le da igual lo que haya dentro xD es decir, que para poder realizar la animación en after effects y no tener problemas de compatibilidad, la he montado en illustrator ","2d22977a33e277de7ec55dd755a9115b":"Mirad a Gurb todo pancho, mientras su amigo le está buscando como loco!\n\nEsta interfaz es de figma, podeis ver como se divide en paginas, frames, y las capas y objetos\n\nLo más importante siempre es el orden, y pensar bien que grupos querrás tener para poder animar como un solo objeto, es decir, las agrupaciones que podéis ver constan de varios elementos en el interior, por ejemplo, el alien, tiene dentro su cabeza, y dentro de la cabeza tiene sus dos ojos y la boca.\n\nFigma exporta muy bien los svgs, los optimiza super y elimina lo que no se necesita, en cambio illustrator aunque tiene varios modos de exportación, ahí falla más","03aae55fcec664423aa4f29d29cf3344":"Veamos que es mejor para según que tipo de necesidad o tarea tengas que realizar y todas las opciones que tenemos, pueden ser super efecto WOW, pero los timmings, campañas, recursos, son finitos... tenemos que ser prácticos","65435ba0392a51df0b65761ce02e708b":"","184ee4668426950dd28925f55867ca9e":"\n","06dc4c4a28f100ade3e4002becbbf87a":"Funcionan muy bien conjuntamente, ya que CSS sigue llevando el peso de la animación, pero su colega JS se encarga de añadir logica más compleja, y haciendo de listener de los eventos para hacer de trigger y ejecutar las animaciones de CSS al hacer un click en un botón o whatever. Son la pareja perfecta \n\nEs su guía, y le indica cuando tiene que comenzar un animación o acabarla\n\nCSS es awesome, pero cuando es necesario añadirle JS de partner?\n- Quieres realizar más de 3 animaciones en una secuencia? Se puede hacer? si, por supuesto, es escalable?? ufff","3587f01f7f1bfa6c0e471bc9ed81c65b":"","07cb67c907671042a9571f7e8a464bd9":"","a29270858f58e7d8d7b970f98a043b79":"","ea681624d5debb6ed9a1b1026c0fd828":"","5c67ec3cb43a318f21d54576a7f1ff6c":"Estos son enlaces a las plataformas con editores gráficos para que podáis cacharrear un poco, user friendly con timelines muy visuales y muy accesibles aunque no hayáis animado antes. Lottie lo veremos más adelante tmb.","f0c470836c3693dc2913ffe3b93f85bd":"Pero entonces la respuesta es.... q necesidad tienes? hahaha","faadcb0b4ff9cac0a12035330be87d54":"\n\n","810729458726a8f9172a4d65e24ff1b2":"Tenemos un temilla previo, que es entender las coordenadas para que podamos viajar con facilidad entre los universos del SVG, y esto le está costando un poco a nuestro amigo, con lo que este recurso de Amelia","d2aaa30ca56a066585bb69ab0e3fed8e":"","09e58ee444cc0133a31ef49ef1349104":"","b9b86ff99b14f0417a1bc748f55f521c":"Además cuando utilizas Greensock, estás invocando a TweenMax, que es\n\nEl metodo en este caso es \"to.\"\n\nopacity: 0.5,\ny: 500,\n\nTweenMax pilla este box, con clase .box1 y haz que tenga una opacidad de 0.5 y rotalo 180 grados, durante 1 segundo y utiliza Elastic easeOut, y durnate 1 segundo la primera caja rotara 180 grados ","b385014a90e4a0d2d6c6d0ac9447fed4":"Y parece, que Gurb se sentía más contento en el planeta JS y aqui lo tenemos, vitaminado con GSAP que le ha dado tanta energía como para estar abduciendo dinosaurios, ya veis que la animación es más compleja, incluso podríamos tener interactividad con Gurb.","4da1a114fba879c0391b476204cd85d8":"Ahora que ya lo tenemos todo a punto, surge la gran pregunta, hacía donde debemos ir?\n\nEl planeta SMIL, El planeta CSS , o el de JS?\n\nActualmente no hay ninguna incompatibilidad con ningún navegador renderizando un SVG, hay incompatibilidades con según qué animas un SVG, si miráis en caniuse todo aparecerá del color de nuestro amigo Gurb, que por cierto, vamos a dar con él en seguida.\n\nSMIL, CSS y JS. \nSMIL es el nativo de animación para SVG, deprecado.\nCSS puedes aplicar transiciones y animar con keyframes, pero está limitado a unas cuantas propiedades.\nJS tiene lo bueno de SMIL, que puede acceder y animar propiedades nativas del SVG, así como animar paths y hacer morphing, y acceder al DOM del SVG. Si tienes que hacer animaciones complejas, JS. Si la animación la haces en Vanilla, requestAnimationFrame \nLos beneficios de usar este método, es despreocuparnos de calcular el tiempo entre frames, además no funciona com un setinterval, sino que funciona de una forma más natural y nativa en el navegador, por lo que es más eficiente.\nOtra ventaja es que las pestañas inactivas no se redibujan, no olvides añadirlo para que el navegador se encargue de ejecutar tu animación, y que si la pestaña no está activa no siga en loop consumiendo recursos, ya que las librerías de JS para animar, ya lo hacen por ti.","a50282512257ae9792a78b229b846a29":"","720f102ed92fa60a9aae436b22973c13":"No se cuantos de vosotros conocéis la serie de Expediente X, pero la verdad está ahi fuera.\n\nAprovecho para explicaros que esta interfaz que veis y con la que voy a interactuar con el código es Codepen, podremos revisar el HTML, EL CSS y el JS de los ejemplos. Os compartiré la colección de pens y las slides al finalizar la charla.","63c6d7cfe243420b81350629012a1738":"De las propiedades que podemos animar, podemos optar por animar algunas sobre otras debido al rendimiento.\nPor ejemplo, la posición del elemento de animación se manejará mejor usando transform. Esto se debe a que la GPU puede manejar el trabajo pesado al animar esa propiedad.\n\n","26565bfed52e87c5bacea04a9c3d78e6":"Nos adentramos en el planeta Lottie!!\n\nNecesitamos el plugin Bodymoving para After effects","e92a171adcbb565a0039087e705b8254":"When downloading illustrations, which file formats are available?\nAll our illustrations can be downloaded as SVG or PNG files. The former are fully editable, supported by most browsers and can be converted to shapes due to their vector nature, whereas the latter have a good compression rate, more color depth and support transparency.\n\nOn the other hand, animations can be downloaded as an HTML file to use on your site with inline SVG and CSS. They can also be exported as a GIF or an MP4 video, allowing you to select the size and the background color to adapt it to your project.","7c8467d701dd14a3e7cee9aac42a3356":"Coordinate System\n\nLe va a ir super bien, la parte más compleja de entender del comportamiento de un SVG es como escalarlo. No funciona como cualquier otra imágen, imaginaos que mirais el svg dsd este telescopio. El SVG es un sistema de coordenadas cartesiano, y su viewbox es la mirilla al universo, y Amalia Watenberger lo explica genial con este ejemplo. Os invito a que lo cacharreeis para poder ver su comportamiento, y así entenderlo mejor.\n","1b8b4704682eb028257dd4e14dcd5e6a":"","486d260a59dfe0c82570a00d03f54c98":"Ok, y con CSS que puedo animar?\n\nAquí tenéis una colección de todas las propiedades animables de CSS\n","215f68c64425139511ab23ed8e70c6ad":"Utilizando variables podemos actualizarlas para hacer cambios on the fly, como creamos esa animacion en CSS?","49ffc98c6cad180bb9c7a43d04300526":"Hay un temilla y es que para un rendimiento fluido de 60 fps, ¡cada fotograma debe procesarse en menos de 16 ms! No es mucho tiempo, por lo que necesitamos encontrar formas muy eficientes de renderizar cada fotograma para un rendimiento fluido.\n\nQue quiero decir con esto? que la pantalla se actualice a una velocidad de 60 veces por segundo, lo que permite que cada actualización se actualice en unos diminutos ~ 16 milisegundos para calcular y realizar sus actualizaciones.\n\n\n\n","dcd85d7a91ae2c2f06bb855383b5820b":"Como soy una enamorada de hacer animación con los svg directamente, os tengo que hablar del plugin de Greensock\n\nDrawSVGPlugin allows you to progressively reveal (or hide) the stroke of an SVG \u003cpath\u003e, \u003cline\u003e, \u003cpolyline\u003e, \u003cpolygon\u003e, \u003crect\u003e, or \u003cellipse\u003e and you can even animate outward from the center of the stroke (or any position/segment). It does this by controlling the stroke-dashoffset and stroke-dasharray CSS properties.\n\nLo malo... DrawSVGPlugin sólo está disponible en el entorno de codepen, no puedes utilizarlo fuera, no puedes exportar el pen, y porque? xq es uno de los beneficios de ser del club Greensock, y es de pago. Pero la buena noticia es que CODEPEN es genial, y podéis probar todo lo que queráis de greensock alla sin tener que invertir ","3f0314a24f2688b922aa62db7adaff22":"Para que veais que coste tiene en que punto de pintado del navegador, podeis consultar esta pagina","6d0079fd7fea4fcf2795dcbc4318ef34":""}}};
// Use local fonts
SLConfig.fonts_url = 'lib/fonts/';
</script>
<script src="lib/reveal.js"></script>
<script src="lib/reveal-plugins.js"></script>
<script src="lib/offline.js"></script>
<!-- Initialize the presentation -->
<script>
Reveal.initialize({
width: 1024,
height: 576,
margin: 0.05,
hash: true,
controls: true,
progress: true,
mouseWheel: false,
showNotes: false,
slideNumber: true,
fragmentInURL: true,
autoSlide: 0,
autoSlideStoppable: true,
autoAnimateMatcher: SL.deck.AutoAnimate.matcher,
center: false,
shuffle: false,
loop: false,
rtl: false,
navigationMode: "default",
transition: "slide",
backgroundTransition: "slide",
highlight: {
escapeHTML: false
},
plugins: [ RevealZoom, RevealNotes, RevealMarkdown, RevealHighlight ]
});
</script>
</body>
</html>