-
Notifications
You must be signed in to change notification settings - Fork 22
Expand file tree
/
Copy pathsvg.html
More file actions
153 lines (143 loc) · 6.51 KB
/
svg.html
File metadata and controls
153 lines (143 loc) · 6.51 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test: Update</title>
<style>
body{
background: #111;
}
.square{
position: absolute;
display: inline-block;
top:0;
left:0;
width: auto;
height: auto;
vertical-align: text-bottom;
background-color: #000;
padding: 20px;
}
path {
stroke-width: 20px;
}
</style>
</head>
<body>
<svg class="square" style="width: 100px; height: 100px;">
<rect id="square_1" x="0" y="0" width="100" height="100" fill="#f00"></rect>
</svg>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="1615.000000pt" height="542.000000pt" viewBox="0 0 1615.000000 542.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,542.000000) scale(0.100000,-0.100000)"
fill="none" stroke="#ffffff">
<path d="M4220 5408 c-558 -4 -1018 -12 -1022 -16 -5 -5 -2024 -3409 -3149
-5310 l-49 -82 473 6 c259 4 584 9 721 13 l249 6 650 1098 650 1097 571 0 571
1 350 591 c193 325 352 595 353 600 2 4 -251 8 -562 8 -311 0 -566 3 -565 8 0
4 105 183 232 397 l233 390 573 5 572 5 306 515 c168 283 327 552 354 598 l49
82 -273 -2 c-149 -1 -729 -5 -1287 -10z m-2083 -3310 c-40 -68 -272 -459 -515
-869 l-442 -746 -47 -7 c-25 -3 -106 -6 -180 -6 -104 0 -134 3 -130 13 4 11
978 1658 1013 1715 14 21 19 22 194 22 l179 0 -72 -122z"/>
<path d="M6243 5408 c-4 -7 -492 -830 -1084 -1828 l-1076 -1815 -234 -3 -234
-3 -510 -861 c-280 -474 -512 -865 -513 -870 -2 -4 319 -7 713 -6 l718 3 294
497 295 498 964 0 964 0 0 -500 0 -500 690 0 690 0 0 1865 0 1865 -460 0 -460
0 0 835 0 835 -374 0 c-289 0 -377 -3 -383 -12z m297 -2168 l0 -1020 -605 0
c-333 0 -605 3 -605 6 0 8 1201 2034 1206 2034 2 0 4 -459 4 -1020z m920
-1355 l0 -1405 -230 0 -230 0 0 500 0 500 -1274 2 -1275 3 82 138 81 137 1193
0 1193 0 0 765 0 765 230 0 230 0 0 -1405z m-3222 -593 c-1 -5 -110 -189 -241
-410 l-239 -402 -179 0 c-98 0 -179 3 -179 7 0 3 107 187 238 409 l237 403
183 1 c101 0 182 -4 180 -8z"/>
<path d="M7460 4820 l0 -600 460 0 460 0 0 -2100 0 -2100 460 0 460 0 0 2100
0 2100 680 0 680 0 0 218 0 218 -480 382 -481 382 -1119 0 -1120 0 0 -600z
m2256 0 l176 -140 -986 0 -986 0 0 140 0 140 810 0 810 0 176 -140z"/>
<path d="M11545 3417 c-58 -28 -78 -48 -100 -100 -20 -48 -19 -83 4 -133 26
-56 65 -81 167 -106 96 -23 124 -43 124 -88 0 -51 -76 -83 -144 -60 -37 12
-76 56 -76 84 0 19 -7 20 -66 5 -50 -13 -53 -23 -25 -77 27 -52 68 -87 124
-106 124 -41 243 -1 288 99 24 52 24 89 -2 142 -27 55 -80 87 -179 108 -87 18
-110 35 -110 82 0 68 109 96 166 42 13 -12 24 -28 24 -36 0 -16 9 -16 66 -2
24 6 44 17 44 23 0 26 -55 95 -93 116 -60 34 -149 37 -212 7z"/>
<path d="M10160 3130 l0 -301 58 3 57 3 3 112 3 112 112 3 112 3 3 53 3 52
-115 0 -116 0 0 75 0 75 131 0 130 0 -3 53 -3 52 -187 3 -188 2 0 -300z"/>
<path d="M10886 3421 c-6 -10 -226 -580 -226 -587 0 -2 27 -4 59 -4 l60 0 21
58 c11 31 23 63 25 70 4 9 34 12 126 10 l121 -3 25 -67 25 -68 59 0 c33 0 59
4 59 9 0 7 -179 484 -215 574 -6 14 -20 17 -70 17 -35 0 -66 -4 -69 -9z m107
-235 c20 -57 37 -106 37 -110 0 -3 -36 -6 -81 -6 -61 0 -80 3 -77 13 3 6 20
56 39 109 19 54 36 98 39 98 3 0 22 -47 43 -104z"/>
<path d="M12030 3375 l0 -55 95 0 95 0 0 -245 0 -245 60 0 60 0 0 245 0 245
96 0 95 0 -3 53 -3 52 -247 3 -248 2 0 -55z"/>
<path d="M15013 2222 c-137 -49 -213 -172 -201 -326 10 -117 83 -214 195 -256
144 -54 310 9 381 144 24 45 27 62 27 146 0 84 -3 101 -27 146 -69 131 -235
196 -375 146z m207 -126 c108 -71 106 -262 -3 -334 -33 -22 -52 -27 -102 -27
-50 0 -69 5 -102 27 -131 86 -102 311 46 359 43 14 121 2 161 -25z"/>
<path d="M10321 2208 c-5 -13 -46 -120 -91 -238 -45 -118 -93 -243 -106 -278
l-24 -63 62 3 61 3 25 68 25 68 121 -3 121 -3 24 -67 25 -68 63 0 63 0 -20 53
c-11 28 -62 162 -113 297 l-94 245 -66 3 c-62 3 -68 1 -76 -20z m114 -222 c19
-53 35 -101 35 -106 0 -6 -36 -10 -81 -10 -73 0 -80 2 -74 18 4 9 18 49 32 87
41 112 43 118 48 113 2 -2 20 -48 40 -102z"/>
<path d="M10920 1930 l0 -300 55 0 55 0 2 211 3 211 135 -211 135 -211 57 0
58 0 0 300 0 300 -55 0 -55 0 -2 -195 -3 -195 -122 192 -121 193 -71 3 -71 3
0 -301z"/>
<path d="M11710 1930 l0 -300 60 0 60 0 0 300 0 300 -60 0 -60 0 0 -300z"/>
<path d="M12120 1930 l0 -300 55 0 55 0 0 203 1 202 83 -200 83 -200 49 0 49
0 85 205 85 205 3 -207 2 -208 55 0 55 0 0 300 0 300 -78 0 -78 0 -84 -207
c-46 -115 -86 -211 -89 -215 -3 -4 -46 90 -95 208 l-88 214 -74 0 -74 0 0
-300z"/>
<path d="M13236 2221 c-6 -10 -226 -580 -226 -587 0 -2 27 -4 59 -4 l60 0 21
58 c11 31 23 63 25 70 4 9 34 12 126 10 l121 -3 25 -67 25 -68 59 0 c33 0 59
4 59 9 0 7 -179 484 -215 574 -6 14 -20 17 -70 17 -35 0 -66 -4 -69 -9z m144
-343 c0 -5 -36 -8 -80 -8 -44 0 -80 2 -80 5 0 7 69 196 76 207 6 9 84 -181 84
-204z"/>
<path d="M13720 2175 l0 -55 90 0 90 0 0 -245 0 -245 60 0 60 0 0 245 0 245
95 0 95 0 0 55 0 55 -245 0 -245 0 0 -55z"/>
<path d="M14440 1930 l0 -300 60 0 60 0 0 300 0 300 -60 0 -60 0 0 -300z"/>
<path d="M15637 2223 c-4 -3 -7 -138 -7 -300 l0 -293 60 0 60 0 0 212 0 211
134 -209 133 -209 62 -3 61 -3 0 301 0 300 -55 0 -55 0 0 -196 c0 -107 -3
-193 -8 -190 -4 2 -61 90 -127 195 l-119 191 -66 0 c-37 0 -70 -3 -73 -7z"/>
<path d="M10943 1022 c-67 -24 -118 -64 -154 -121 -40 -62 -52 -113 -47 -196
8 -125 79 -222 195 -265 144 -54 310 9 381 144 24 45 27 62 27 146 0 84 -3
101 -27 146 -69 131 -235 196 -375 146z m207 -126 c108 -71 106 -262 -3 -334
-58 -38 -146 -38 -204 0 -131 86 -102 311 46 359 43 14 121 2 161 -25z"/>
<path d="M11713 1022 c-130 -47 -203 -151 -203 -292 0 -122 59 -223 164 -278
44 -23 63 -27 136 -27 73 0 93 4 142 28 64 32 111 80 142 146 16 35 21 66 21
131 0 96 -19 150 -74 213 -73 82 -219 118 -328 79z m183 -117 c75 -38 99 -80
99 -175 0 -96 -24 -138 -103 -177 -43 -21 -61 -25 -99 -19 -101 14 -163 88
-163 196 0 154 133 242 266 175z"/>
<path d="M10110 975 l0 -55 90 0 90 0 0 -245 0 -245 60 0 60 0 0 245 0 245 95
0 95 0 0 55 0 55 -245 0 -245 0 0 -55z"/>
<path d="M12330 730 l0 -300 190 0 190 0 0 55 0 55 -130 0 -130 0 -2 243 -3
242 -57 3 -58 3 0 -301z"/>
</g>
</svg>
<script type="text/javascript" src="../fat.js"></script>
<script>
Fat.animate("#square_1", {
width: "50%"
},{
duration: 2000
});
Fat.animate("path", {
custom: 1
},{
duration: 2000,
ease: "easeIn",
step: function(progress, value){
const length = this.getTotalLength();
this.style.strokeDasharray = length;
this.style.strokeDashoffset = length - (length * value);
this.style.strokeWidth = 20 - (20 * value);
}
});
Fat.animate("g", {
custom: 1
},{
delay: 1500,
duration: 500,
ease: "easeIn",
step: function(progress, value){
this.setAttribute("fill", "rgba(255, 255, 255, " + value + ")");
}
});
</script>
</body>
</html>