Menu
I find this interesting documentation, that shows how to make an svg file animated.
https://css-tricks.com/svg-line-animation-works/
However, I am having issue with making my project look like it is being completed when open.
I want my project to animate similar to section 8 of the above doc.. Help please
[newbie]
https://jsfiddle.net/yoavf1bu/17/
.path {
stroke-dasharray: 50;
stroke-dashoffset: 500;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="500pt" height="500pt " viewBox="0 0 200.000000 1000.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,900.000000) scale(0.100000,-0.100000)"
>
<path class="path" stroke="#000000" stroke-width="25"
d="M3150 8544 c-208 -38 -355 -106 -479 -221 -40 -36 -75 -62 -80 -57
-4 5 -20 26 -35 48 -30 40 -93 75 -136 76 -41 0 -122 -44 -161 -86 -207 -230
-226 -724 -37 -939 53 -60 108 -88 175 -88 54 0 83 13 137 62 l29 26 -6 -75
c-20 -233 -161 -474 -261 -444 -37 11 -84 52 -132 117 -149 196 -182 227 -244
227 -61 0 -124 -53 -197 -167 -46 -73 -225 -423 -298 -583 -62 -135 -62 -136
-70 -128 -11 11 -57 268 -70 398 -34 315 -13 540 76 838 12 37 11 44 -1 52
-27 17 -54 -14 -110 -126 -65 -127 -111 -263 -144 -424 -70 -333 -90 -823 -41
-986 22 -76 48 -104 95 -104 48 0 86 30 142 114 23 33 42 62 43 64 1 1 18 -13
38 -33 39 -39 83 -47 110 -17 8 9 39 53 67 96 125 192 279 371 296 345 17 -29
17 -284 -1 -391 -34 -207 -88 -336 -244 -588 -174 -280 -289 -541 -337 -761
-14 -64 -19 -127 -19 -269 0 -171 2 -193 28 -293 54 -206 144 -388 284 -574
60 -81 77 -113 99 -183 57 -189 137 -405 254 -690 210 -508 252 -673 330
-1285 47 -366 77 -486 173 -685 91 -188 157 -268 198 -242 14 9 25 9 39 2 31
-17 50 -12 67 19 15 25 20 27 40 18 18 -8 27 -6 43 8 34 31 33 51 -9 148 -83
194 -90 278 -36 432 37 107 44 169 21 213 -19 37 -39 53 -121 97 -141 76 -140
74 -139 350 1 121 9 303 18 405 9 102 20 222 23 268 l6 82 -27 0 c-15 0 -29
-6 -31 -13 -11 -29 -46 -509 -52 -697 -9 -307 11 -367 145 -434 104 -52 132
-80 132 -127 0 -22 -12 -67 -26 -102 -36 -86 -52 -187 -42 -261 9 -68 41 -171
71 -231 19 -39 19 -40 0 -23 -40 36 -64 19 -56 -38 7 -46 -12 -50 -43 -9 -29
39 -48 44 -63 18 -10 -17 -12 -17 -27 2 -26 34 -132 257 -153 325 -33 99 -59
243 -92 500 -70 554 -120 761 -266 1120 -156 383 -186 459 -244 623 -32 92
-59 170 -59 174 0 3 35 -28 78 -68 265 -253 563 -473 1040 -769 l183 -113 63
-91 c472 -677 602 -958 831 -1791 36 -129 49 -155 79 -155 13 0 29 6 35 14 8
9 24 12 49 9 28 -4 44 0 65 17 15 12 27 28 27 36 0 9 11 14 30 14 17 0 39 9
51 21 27 27 23 73 -20 218 -41 139 -42 214 -1 319 45 118 54 169 40 222 -19
69 -64 105 -157 125 -43 9 -86 19 -96 23 -13 5 -36 51 -68 137 -110 289 -267
511 -462 658 -58 44 -245 163 -399 256 -15 9 -85 97 -155 196 -71 99 -190 266
-264 370 -273 382 -323 468 -322 560 1 64 18 116 141 415 86 210 113 320 113
470 0 152 -36 274 -120 403 -58 88 -118 143 -204 185 l-66 32 -25 82 c-44 144
-49 175 -43 271 14 262 212 597 411 699 60 31 143 35 192 10 103 -53 261 -257
461 -597 66 -111 75 -135 128 -320 68 -238 116 -377 157 -459 158 -315 449
-556 750 -621 75 -16 94 -13 101 17 7 24 -3 35 -151 151 -257 203 -474 482
-774 997 -82 141 -86 150 -141 350 -83 303 -133 452 -191 575 -63 133 -124
210 -197 250 -46 26 -64 30 -124 29 -90 -1 -161 -28 -275 -106 -424 -286 -879
-1098 -977 -1745 -22 -149 -22 -506 0 -663 19 -129 52 -304 63 -335 15 -43
-26 11 -90 118 -164 274 -225 555 -182 846 33 224 147 505 316 781 180 294
209 357 258 550 24 96 27 122 27 300 0 162 -3 201 -17 233 -13 29 -23 37 -43
37 -72 0 -150 -83 -340 -358 -73 -107 -78 -112 -95 -97 -10 9 -23 29 -30 45
-12 30 -7 43 161 395 62 131 189 366 229 426 45 65 103 119 129 119 30 0 67
-36 145 -139 130 -171 200 -222 283 -206 84 15 203 185 246 350 35 134 44 343
16 361 -17 10 -47 -7 -53 -30 -3 -12 -31 -46 -61 -76 -56 -52 -57 -52 -110
-48 -116 10 -196 133 -227 348 -35 249 68 546 214 621 64 33 113 10 166 -79
l19 -33 -38 -77 c-70 -141 -84 -292 -35 -364 18 -28 28 -33 68 -36 40 -3 48 0
71 28 15 17 31 47 37 68 17 61 12 199 -11 292 l-20 85 79 76 c61 59 100 87
173 123 173 85 368 115 529 81 121 -26 135 -25 135 5 0 38 -87 61 -245 65 -69
2 -136 1 -150 -1z m-543 -579 c6 -107 -9 -169 -42 -182 -64 -24 -62 177 2 302
l16 30 9 -25 c6 -14 12 -70 15 -125z m-1392 -987 c0 -195 4 -280 18 -368 21
-135 50 -277 70 -340 14 -44 13 -47 -16 -103 -34 -66 -102 -147 -123 -147 -7
0 -20 12 -28 28 -58 112 -45 624 24 963 17 85 51 219 54 219 1 0 1 -114 1
-252z m1622 -459 c126 -32 232 -221 353 -633 41 -139 46 -176 14 -114 -49 96
-206 311 -289 394 -107 107 -149 129 -248 122 -86 -5 -158 -42 -252 -130 -131
-122 -245 -322 -296 -517 -29 -114 -23 -268 15 -386 32 -101 32 -105 -2 -105
-45 0 -129 -29 -183 -61 -64 -40 -140 -126 -183 -208 -159 -305 -106 -641 119
-752 58 -28 71 -31 137 -27 93 5 169 39 243 109 164 155 176 350 44 728 -22
63 -37 116 -35 119 10 9 78 -42 127 -96 57 -64 120 -186 143 -278 9 -34 16
-103 16 -153 0 -158 -33 -275 -156 -562 -75 -177 -109 -301 -99 -367 13 -89
118 -256 464 -735 94 -131 171 -240 171 -242 0 -14 -465 291 -626 410 -197
145 -321 251 -475 405 l-146 145 -32 135 c-114 491 -115 903 -5 1295 36 129
145 396 225 558 252 502 591 882 844 943 65 16 59 16 112 3z m673 -1379 c204
-338 409 -592 625 -775 44 -38 82 -70 85 -72 3 -3 -9 -1 -25 3 -39 9 -232 107
-269 136 -128 101 -211 189 -281 298 -90 138 -129 233 -211 515 -10 32 8 8 76
-105z m-1290 -132 c92 -242 134 -450 112 -554 -24 -118 -86 -201 -192 -259
-48 -26 -65 -30 -130 -30 -65 1 -81 4 -122 30 -94 59 -151 186 -151 336 1 194
99 404 234 500 42 30 127 58 176 59 l41 0 32 -82z m1067 -2670 c146 -93 230
-157 306 -235 132 -134 244 -317 321 -525 61 -165 61 -165 189 -188 45 -8 79
-21 98 -37 25 -22 29 -31 29 -79 0 -36 -10 -80 -30 -132 -60 -158 -61 -195 -4
-396 19 -66 34 -126 34 -133 0 -19 -14 -16 -35 7 -11 12 -28 20 -39 18 -18 -3
-21 -11 -22 -51 0 -26 -4 -50 -8 -55 -10 -9 -36 27 -36 50 0 10 -7 21 -15 24
-22 9 -45 -14 -45 -44 0 -53 -19 -3 -70 183 -103 379 -211 676 -340 935 -93
188 -159 295 -423 692 -11 16 -16 28 -13 28 3 0 50 -28 103 -62z"/>
</g>
</svg>
367
One of the most common reasons why the SVG animation doesn't work is the use of <img> tags to add the SVG. The SVG might be visible on the website, but the animation will not start. You can easily fix this by replacing all <img> tags with an <object> tag.
Animation Duration Not Set By default, a CSS animation cycle is zero seconds long. To override this, add an animation-duration rule to your targeted element with a seconds value, in the same block as animation-name. Below, try removing the comments around animation-duration to fix the animation.
There are many Scalable Vector Graphics (SVG), but only certain attributes can be applied as CSS to SVG. Presentation attributes are used to style SVG elements and can be used as CSS properties. Some of these attributes are SVG-only while others are already shared in CSS, such as font-size or opacity .
Create your SVG shape (Haikei, Inkscape, Adobe), and insert it in the HTML. Give an id (or class, depending on your needs) to the <path> in your SVG that you wish to animate. Using CSS (or JS, or even some animation frameworks), move, rotate, etc the SVG path as you wish.
Whether your animation isn’t working as intended, or just isn’t working at all, here are some reasons why and how you can resolve them: In CSS animations, the @keyframes rule defines how the animation looks, or, more specifically, which element styles change and when. Without this rule, your element won’t have any animation to use.
There are several ways to create web animations, including using JavaScript libraries, GIFs, embedded videos, and CSS. In comparison to bulky gifs and videos, animations added to websites using SVGs and CSS have a faster load time. You can also make simple animations without having to add another JavaScript library to your website’s page load.
The three values of animation-duration set lengths for each animation cycle respectively — the first animation, change-color, is eight seconds long, and the other two are five seconds long. When creating animations this way, make sure you’re ordering your values correctly for each animation-* declaration.
There are two reasons in your application that interfere with work:
To animate drawing a line from zero to maximum, the condition must be met:stroke-dasharray= stroke="dashofffset"
Your values are different
The SVG shape should be drawn with a single contour
You have a double contour:
I drew your shape in a vector editor with a single contour:
We will animate this contour in the same way as indicated in your link.
.path {
fill:none;
stroke:black;
stroke-width:4;
stroke-linecap:round;
stroke-dasharray: 3500;
stroke-dashoffset: 3500;
animation: dash 10s linear forwards infinite;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="309" height="584 " viewBox="0 0 309 584">
<path class="path" d="M215 31s-13-3-20-3c-7 1-14 2-20 5-5 2-11 6-15 11-4 4-8 9-10 15-2 5-4 11-3 16 0 3 7 7 8 2 2-4 2-10 2-14-1-7-2-13-6-18-2-3-5-6-8-6-6 0-11 6-14 11-3 4-4 10-5 16v22c1 5 3 10 6 14 3 3 7 6 11 6s7-3 9-5 3-8 4-6c2 5 0 11-1 16l-4 14c-2 4-4 8-7 10s-5 4-8 3c-5 0-7-5-10-8l-7-10c-2-2-4-5-7-5-5 1-9 7-11 10l-7 13-11 22-10 21-7 10c-2 1-4 2-6 1s-3-6-3-9l-1-13v-19l3-21 3-17 6-16 5-9-3 16-3 19 1 20a368 368 0 0 0 4 26c1 4 2 9 5 12 1 2 2 5 4 5 3-1 4-5 6-8l5-8 6-7 4-5c2-2 3-4 5-3 3 0 3 5 4 7l-2 13-1 16-4 10-7 14-6 9-4 9-7 12-5 15-3 10-2 15 1 20 5 15 8 16 12 16 15 15 18 14 24 19 28 17 18 10 20 15 14 17 11 21 2 7 5 5h8c3 1 5 3 6 5v8c-2 5-5 9-5 14l2 12 3 11 1 5-3 2c-2 0-3-4-5-3v4l-1 4-4-1c-1-2 1-5-1-5s1 8-2 7c-4-2-6-20-6-20l-6-18-7-18-8-18-7-15-12-16-6-11-5-9-12-18-19-26-14-20-7-12-2-4c-1-8 2-13 4-20l5-10c2-6 6-13 7-19v-18c-1-6-2-12-5-18l-8-10c-5-3-11-6-17-5-6 0-11 3-16 7-5 6-8 14-10 22-1 6-2 13 0 19 1 5 3 10 8 13 6 4 11 4 16 2 6-2 11-6 15-11 2-3 3-8 3-13 0-8-2-15-4-23l-4-12-5-12-2-7a56 56 0 0 1 4-30 68 68 0 0 1 18-24c4-3 7-6 12-7 5 0 9 3 13 6 5 3 9 9 13 15 5 6 8 14 12 20l16 26 15 24a250 250 0 0 0 31 34l8 6 3 2c-4 1-10-1-15-3-6-2-10-6-16-10s-11-9-15-15c-5-5-7-12-10-19-4-8-6-16-8-25l-7-25c-3-12-6-24-11-35-3-6-7-13-11-16-3-2-7-3-10-3-5 0-10 2-15 4l-16 14-13 17-10 18-11 19s-8 17-10 26l-5 25-1 25a253 253 0 0 0 5 35c2 11 5 21 9 32 3 10 12 29 12 29l9 23a361 361 0 0 0 13 62l2 17 3 13 4 12 5 8c2 4 2 13 7 12 2 0-2-5 0-6 2 0 2 5 4 6l2-1c2-2-1-7 2-8 2-1 2 6 5 5 2 0 0-5-1-7l-4-9-1-11 3-12 2-6-2-6-10-5-6-8-1-13 1-16 1-15 2-20" />
</svg>Do you want something like this:
.path {
stroke-dasharray: 60000;
stroke-dashoffset: 60000;
animation: dash 10s linear forwards infinite;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="500pt" height="500pt " viewBox="0 0 200.000000 1000.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,900.000000) scale(0.100000,-0.100000)"
>
<path class="path" fill="white" stroke="black" stroke-width="25"
d="M3150 8544 c-208 -38 -355 -106 -479 -221 -40 -36 -75 -62 -80 -57
-4 5 -20 26 -35 48 -30 40 -93 75 -136 76 -41 0 -122 -44 -161 -86 -207 -230
-226 -724 -37 -939 53 -60 108 -88 175 -88 54 0 83 13 137 62 l29 26 -6 -75
c-20 -233 -161 -474 -261 -444 -37 11 -84 52 -132 117 -149 196 -182 227 -244
227 -61 0 -124 -53 -197 -167 -46 -73 -225 -423 -298 -583 -62 -135 -62 -136
-70 -128 -11 11 -57 268 -70 398 -34 315 -13 540 76 838 12 37 11 44 -1 52
-27 17 -54 -14 -110 -126 -65 -127 -111 -263 -144 -424 -70 -333 -90 -823 -41
-986 22 -76 48 -104 95 -104 48 0 86 30 142 114 23 33 42 62 43 64 1 1 18 -13
38 -33 39 -39 83 -47 110 -17 8 9 39 53 67 96 125 192 279 371 296 345 17 -29
17 -284 -1 -391 -34 -207 -88 -336 -244 -588 -174 -280 -289 -541 -337 -761
-14 -64 -19 -127 -19 -269 0 -171 2 -193 28 -293 54 -206 144 -388 284 -574
60 -81 77 -113 99 -183 57 -189 137 -405 254 -690 210 -508 252 -673 330
-1285 47 -366 77 -486 173 -685 91 -188 157 -268 198 -242 14 9 25 9 39 2 31
-17 50 -12 67 19 15 25 20 27 40 18 18 -8 27 -6 43 8 34 31 33 51 -9 148 -83
194 -90 278 -36 432 37 107 44 169 21 213 -19 37 -39 53 -121 97 -141 76 -140
74 -139 350 1 121 9 303 18 405 9 102 20 222 23 268 l6 82 -27 0 c-15 0 -29
-6 -31 -13 -11 -29 -46 -509 -52 -697 -9 -307 11 -367 145 -434 104 -52 132
-80 132 -127 0 -22 -12 -67 -26 -102 -36 -86 -52 -187 -42 -261 9 -68 41 -171
71 -231 19 -39 19 -40 0 -23 -40 36 -64 19 -56 -38 7 -46 -12 -50 -43 -9 -29
39 -48 44 -63 18 -10 -17 -12 -17 -27 2 -26 34 -132 257 -153 325 -33 99 -59
243 -92 500 -70 554 -120 761 -266 1120 -156 383 -186 459 -244 623 -32 92
-59 170 -59 174 0 3 35 -28 78 -68 265 -253 563 -473 1040 -769 l183 -113 63
-91 c472 -677 602 -958 831 -1791 36 -129 49 -155 79 -155 13 0 29 6 35 14 8
9 24 12 49 9 28 -4 44 0 65 17 15 12 27 28 27 36 0 9 11 14 30 14 17 0 39 9
51 21 27 27 23 73 -20 218 -41 139 -42 214 -1 319 45 118 54 169 40 222 -19
69 -64 105 -157 125 -43 9 -86 19 -96 23 -13 5 -36 51 -68 137 -110 289 -267
511 -462 658 -58 44 -245 163 -399 256 -15 9 -85 97 -155 196 -71 99 -190 266
-264 370 -273 382 -323 468 -322 560 1 64 18 116 141 415 86 210 113 320 113
470 0 152 -36 274 -120 403 -58 88 -118 143 -204 185 l-66 32 -25 82 c-44 144
-49 175 -43 271 14 262 212 597 411 699 60 31 143 35 192 10 103 -53 261 -257
461 -597 66 -111 75 -135 128 -320 68 -238 116 -377 157 -459 158 -315 449
-556 750 -621 75 -16 94 -13 101 17 7 24 -3 35 -151 151 -257 203 -474 482
-774 997 -82 141 -86 150 -141 350 -83 303 -133 452 -191 575 -63 133 -124
210 -197 250 -46 26 -64 30 -124 29 -90 -1 -161 -28 -275 -106 -424 -286 -879
-1098 -977 -1745 -22 -149 -22 -506 0 -663 19 -129 52 -304 63 -335 15 -43
-26 11 -90 118 -164 274 -225 555 -182 846 33 224 147 505 316 781 180 294
209 357 258 550 24 96 27 122 27 300 0 162 -3 201 -17 233 -13 29 -23 37 -43
37 -72 0 -150 -83 -340 -358 -73 -107 -78 -112 -95 -97 -10 9 -23 29 -30 45
-12 30 -7 43 161 395 62 131 189 366 229 426 45 65 103 119 129 119 30 0 67
-36 145 -139 130 -171 200 -222 283 -206 84 15 203 185 246 350 35 134 44 343
16 361 -17 10 -47 -7 -53 -30 -3 -12 -31 -46 -61 -76 -56 -52 -57 -52 -110
-48 -116 10 -196 133 -227 348 -35 249 68 546 214 621 64 33 113 10 166 -79
l19 -33 -38 -77 c-70 -141 -84 -292 -35 -364 18 -28 28 -33 68 -36 40 -3 48 0
71 28 15 17 31 47 37 68 17 61 12 199 -11 292 l-20 85 79 76 c61 59 100 87
173 123 173 85 368 115 529 81 121 -26 135 -25 135 5 0 38 -87 61 -245 65 -69
2 -136 1 -150 -1z m-543 -579 c6 -107 -9 -169 -42 -182 -64 -24 -62 177 2 302
l16 30 9 -25 c6 -14 12 -70 15 -125z m-1392 -987 c0 -195 4 -280 18 -368 21
-135 50 -277 70 -340 14 -44 13 -47 -16 -103 -34 -66 -102 -147 -123 -147 -7
0 -20 12 -28 28 -58 112 -45 624 24 963 17 85 51 219 54 219 1 0 1 -114 1
-252z m1622 -459 c126 -32 232 -221 353 -633 41 -139 46 -176 14 -114 -49 96
-206 311 -289 394 -107 107 -149 129 -248 122 -86 -5 -158 -42 -252 -130 -131
-122 -245 -322 -296 -517 -29 -114 -23 -268 15 -386 32 -101 32 -105 -2 -105
-45 0 -129 -29 -183 -61 -64 -40 -140 -126 -183 -208 -159 -305 -106 -641 119
-752 58 -28 71 -31 137 -27 93 5 169 39 243 109 164 155 176 350 44 728 -22
63 -37 116 -35 119 10 9 78 -42 127 -96 57 -64 120 -186 143 -278 9 -34 16
-103 16 -153 0 -158 -33 -275 -156 -562 -75 -177 -109 -301 -99 -367 13 -89
118 -256 464 -735 94 -131 171 -240 171 -242 0 -14 -465 291 -626 410 -197
145 -321 251 -475 405 l-146 145 -32 135 c-114 491 -115 903 -5 1295 36 129
145 396 225 558 252 502 591 882 844 943 65 16 59 16 112 3z m673 -1379 c204
-338 409 -592 625 -775 44 -38 82 -70 85 -72 3 -3 -9 -1 -25 3 -39 9 -232 107
-269 136 -128 101 -211 189 -281 298 -90 138 -129 233 -211 515 -10 32 8 8 76
-105z m-1290 -132 c92 -242 134 -450 112 -554 -24 -118 -86 -201 -192 -259
-48 -26 -65 -30 -130 -30 -65 1 -81 4 -122 30 -94 59 -151 186 -151 336 1 194
99 404 234 500 42 30 127 58 176 59 l41 0 32 -82z m1067 -2670 c146 -93 230
-157 306 -235 132 -134 244 -317 321 -525 61 -165 61 -165 189 -188 45 -8 79
-21 98 -37 25 -22 29 -31 29 -79 0 -36 -10 -80 -30 -132 -60 -158 -61 -195 -4
-396 19 -66 34 -126 34 -133 0 -19 -14 -16 -35 7 -11 12 -28 20 -39 18 -18 -3
-21 -11 -22 -51 0 -26 -4 -50 -8 -55 -10 -9 -36 27 -36 50 0 10 -7 21 -15 24
-22 9 -45 -14 -45 -44 0 -53 -19 -3 -70 183 -103 379 -211 676 -340 935 -93
188 -159 295 -423 692 -11 16 -16 28 -13 28 3 0 50 -28 103 -62z"/>
</g>
</svg>Add fill="white" to the svg for creating blank space, and just set time to 10s so you can change it based on your project
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
