Svg path animation

Developer
Katie Inkblotty
Size
5,121 Kb
Views
58,696
  1. Svg path animation Previews
  2. Svg path animation HTML Codes
  3. Svg path animation JS Codes

How do I make an svg path animation?

What is a svg path animation? How do you make a svg path animation? This script and codes were developed by Katie Inkblotty on 08 August 2022, Monday.

Svg path animation Previews
IQ Test

Svg path animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>svg path animation</title>
</head>
<body> <div id="squiggle"> <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="500px" height="510px" viewBox="0 0 6150 6830" preserveAspectRatio="xMidYMid meet"> <g fill="none" stroke="deeppink" stroke-width="19"> <path id="path1" stroke-dashoffset="0.00" stroke-dasharray="2246.95 2246.95" d="M2844 6063 c-36 -39 -38 -62 -15 -165 36 -164 54 -343 56 -568 3 -223 10 -264 52 -312 17 -19 38 -14 26 5 -4 6 -6 46 -4 88 1 42 -3 97 -10 121 -13 45 -13 71 -5 286 5 106 3 139 -9 162 -18 35 -32 115 -18 107 14 -9 5 95 -15 168 -9 33 -16 77 -16 98 0 44 -8 46 -42 10z"/> <path id='path2' d="M979 5392 c25 -48 148 -150 245 -205 52 -29 61 -35 131 -83 33 -22 92 -58 130 -79 39 -22 86 -51 105 -67 92 -72 211 -158 219 -158 5 0 22 -19 38 -42 28 -42 53 -60 53 -38 0 15 -55 91 -121 168 -49 57 -78 75 -267 167 -51 24 -118 62 -150 83 -31 21 -78 51 -105 66 -26 15 -76 52 -110 83 -34 31 -76 62 -92 69 -17 7 -39 22 -49 33 -23 26 -40 28 -27 3z"/> <path id='path3' d="M5450 5211 c-8 -5 -39 -11 -69 -14 -30 -4 -59 -11 -65 -17 -5 -5 -20 -10 -31 -10 -12 0 -30 -9 -39 -19 -10 -10 -34 -22 -54 -26 -30 -6 -160 -65 -227 -103 -11 -7 -45 -21 -75 -32 -31 -11 -80 -35 -110 -54 -30 -19 -137 -82 -237 -141 -101 -59 -183 -109 -183 -111 0 -6 47 5 130 32 42 13 99 41 127 62 28 20 78 53 110 72 74 45 335 158 382 166 47 8 227 91 262 120 8 8 22 14 30 14 20 0 73 44 68 58 -2 6 -10 8 -19 3z"/> <path id='path-squiggle' d="M2795 4700 c-173 -26 -491 -144 -543 -202 -121 -136 -143 -170 -247 -383 -119 -244 -157 -339 -166 -414 -4 -36 -13 -102 -19 -146 -22 -146 -10 -530 17 -580 6 -11 28 -65 48 -120 63 -169 176 -372 222 -399 39 -22 192 -169 186 -178 -3 -6 -2 -8 4 -5 13 8 86 -67 76 -78 -5 -4 -3 -5 3 -2 6 3 35 -18 64 -48 30 -30 52 -55 48 -55 -13 0 71 -80 132 -126 92 -69 128 -94 135 -94 4 0 21 -11 38 -24 47 -35 186 -106 207 -106 25 0 50 10 50 21 0 5 -6 9 -13 9 -7 0 -59 27 -115 60 -55 33 -109 60 -119 60 -33 0 -104 57 -251 201 -81 79 -192 183 -247 231 -55 47 -107 95 -115 105 -8 10 -33 41 -56 68 -73 90 -126 173 -118 186 4 8 3 10 -5 5 -16 -10 -77 122 -102 221 -35 134 -39 172 -48 380 -9 211 -9 204 38 437 32 154 47 197 122 350 71 146 169 283 290 407 44 46 63 58 99 64 24 4 51 11 60 15 32 17 157 50 210 55 30 4 100 15 155 27 112 23 207 25 370 9 209 -21 236 -29 480 -146 52 -24 152 -88 235 -150 165 -121 251 -215 305 -330 18 -38 57 -122 88 -185 30 -63 63 -140 73 -170 10 -30 29 -86 42 -125 21 -57 27 -104 36 -250 7 -99 9 -200 5 -225 -6 -40 -88 -257 -127 -335 -29 -59 -203 -223 -292 -277 -47 -28 -112 -69 -144 -90 -32 -21 -73 -46 -90 -55 -17 -9 -61 -35 -97 -59 -79 -52 -120 -60 -384 -69 l-180 -7 -138 41 c-178 53 -187 57 -283 129 -101 75 -270 274 -432 510 -109 159 -110 160 -131 248 -40 162 -53 269 -41 332 6 31 16 98 21 147 14 145 32 220 59 257 14 18 48 68 76 110 32 49 79 103 129 145 197 171 227 187 370 197 44 3 103 11 132 17 44 10 66 9 143 -6 141 -27 263 -83 417 -191 80 -57 186 -199 179 -240 -3 -14 -2 -24 1 -20 5 5 52 -85 56 -109 1 -5 4 -12 8 -15 9 -8 47 -74 49 -85 2 -5 6 -19 10 -31 5 -11 11 -43 15 -70 3 -27 10 -69 15 -94 22 -107 39 -252 41 -339 l2 -93 -53 -67 c-81 -102 -109 -131 -213 -218 -127 -107 -157 -117 -366 -114 -84 1 -163 6 -175 10 -35 14 -308 268 -328 306 -6 11 -41 65 -78 120 -37 55 -88 139 -114 187 l-48 88 48 49 c87 90 111 164 81 251 -13 38 -66 75 -74 53 -3 -7 -12 -13 -22 -13 -50 0 -151 -115 -151 -172 0 -37 52 -175 93 -244 20 -33 37 -67 39 -75 2 -8 5 -16 8 -19 3 -3 13 -22 23 -43 9 -21 38 -65 65 -98 26 -34 75 -97 110 -140 34 -44 62 -84 62 -90 0 -6 4 -8 8 -5 4 3 16 -10 26 -28 10 -19 29 -39 42 -46 13 -8 24 -17 24 -22 0 -4 5 -8 11 -8 6 0 29 -13 52 -29 77 -53 202 -116 265 -136 98 -29 137 -16 345 118 48 31 92 57 98 57 6 0 7 5 4 10 -3 6 3 10 14 10 12 0 20 5 19 12 -2 7 2 12 7 13 11 0 90 76 90 86 0 10 53 68 57 63 3 -2 5 2 5 9 0 8 13 33 30 58 59 87 65 104 54 167 -6 31 -18 109 -26 172 -43 311 -69 414 -156 596 -53 113 -180 256 -276 312 -79 47 -271 119 -390 148 -91 22 -124 25 -223 22 -113 -4 -117 -5 -200 -47 -116 -60 -189 -107 -228 -150 -49 -53 -174 -218 -211 -277 -38 -63 -111 -312 -111 -381 0 -35 -3 -44 -10 -33 -6 9 -10 10 -10 3 0 -6 5 -15 10 -18 14 -9 12 -118 -2 -134 -10 -11 -10 -13 0 -7 6 4 12 2 12 -3 0 -6 -6 -11 -12 -11 -9 0 -10 -3 -2 -8 6 -4 14 -37 18 -75 11 -113 113 -358 175 -424 17 -18 31 -37 31 -42 0 -6 3 -11 8 -11 11 0 98 -113 94 -123 -1 -5 1 -6 6 -3 5 3 26 -18 48 -47 114 -153 325 -339 454 -401 l85 -41 205 3 c287 4 520 37 520 74 0 5 10 12 23 17 12 5 76 34 141 66 101 48 120 54 134 43 15 -11 16 -11 4 4 -11 14 -8 20 24 45 21 15 58 46 83 68 25 23 60 52 77 66 98 79 265 297 283 367 30 125 55 241 56 269 1 18 8 46 15 63 15 37 10 55 -96 349 -19 52 -21 68 -11 80 8 9 8 12 1 8 -15 -8 -59 106 -48 124 4 7 3 10 -3 6 -6 -4 -18 15 -28 46 -9 28 -44 104 -78 167 -53 100 -75 129 -177 234 -63 65 -139 136 -168 158 -65 48 -411 232 -485 257 -110 38 -207 51 -417 55 -113 2 -227 0 -255 -4z"/> <path d="M2684 4008 c-87 -29 -136 -56 -161 -88 -21 -26 -14 -31 19 -14 17 9 47 18 67 19 55 5 213 40 238 53 12 7 80 15 151 18 155 8 187 1 316 -68 106 -58 169 -120 220 -220 19 -37 37 -64 42 -60 4 4 5 2 1 -3 -6 -12 35 -271 45 -281 4 -3 4 -20 1 -37 -10 -48 18 -29 33 24 24 79 18 127 -42 301 -31 89 -69 188 -85 218 -31 57 -86 108 -161 148 -42 23 -48 23 -319 21 l-276 -2 -89 -29z"/> <path d="M4420 3780 c0 -7 3 -10 7 -7 3 4 3 10 0 14 -4 3 -7 0 -7 -7z"/> <path d="M4981 3656 c3 -3 59 -13 125 -22 98 -13 162 -15 364 -8 253 8 511 7 544 -3 12 -3 17 -1 14 8 -9 26 -85 31 -363 23 -302 -8 -337 -8 -550 2 -77 3 -137 3 -134 0z"/> <path d="M1230 3473 c-255 -24 -369 -34 -495 -43 -82 -7 -170 -17 -195 -25 -59 -17 -138 -53 -146 -66 -11 -19 4 -21 28 -5 14 10 43 16 83 16 33 0 105 9 160 19 117 23 190 34 375 56 158 18 173 18 165 5 -3 -5 3 -11 14 -12 12 -1 33 -3 49 -4 15 -2 64 -4 109 -6 45 -2 85 -6 89 -10 26 -27 33 24 8 60 -14 20 -22 22 -112 20 -53 0 -113 -3 -132 -5z"/> <path d="M460 3330 c0 -7 3 -10 7 -7 3 4 3 10 0 14 -4 3 -7 0 -7 -7z"/> <path d="M3379 3272 c-30 -20 -81 -77 -98 -109 -19 -36 -13 -55 34 -115 55 -70 85 -78 129 -33 15 17 33 29 38 27 5 -1 7 2 4 7 -3 5 5 33 19 63 39 83 33 138 -16 163 -37 20 -78 19 -110 -3z"/> <path d="M3383 2963 c4 -3 10 -3 14 0 3 4 0 7 -7 7 -7 0 -10 -3 -7 -7z"/> <path d="M4900 2476 c211 -136 283 -190 415 -309 134 -122 257 -214 358 -270 49 -27 59 -30 67 -17 7 11 5 18 -7 25 -186 114 -365 250 -548 420 -120 110 -312 225 -377 225 -15 0 16 -25 92 -74z"/> <path d="M1529 2091 c-98 -38 -336 -242 -539 -462 -58 -62 -133 -140 -166 -174 -63 -62 -84 -95 -60 -95 7 0 143 129 302 288 244 242 302 295 369 334 45 26 96 61 115 78 18 16 38 30 42 30 5 0 6 5 3 10 -8 13 -11 12 -66 -9z"/> <path d="M4070 1934 c0 -7 15 -27 103 -139 35 -44 74 -96 87 -115 13 -19 27 -37 31 -40 3 -3 12 -16 19 -30 7 -14 40 -65 73 -115 52 -78 150 -248 233 -405 31 -58 62 -84 80 -69 15 12 19 35 7 41 -5 2 -18 23 -31 48 -12 25 -49 81 -82 125 -33 44 -60 83 -60 86 0 3 -26 52 -57 110 -63 113 -250 375 -324 451 -25 26 -44 50 -41 53 3 3 -4 5 -16 5 -12 0 -22 -3 -22 -6z"/> <path d="M3326 1449 c-3 -13 -10 -78 -16 -144 -11 -134 -6 -162 40 -251 17 -31 30 -65 30 -75 0 -11 18 -68 41 -127 22 -59 49 -141 59 -183 19 -76 113 -316 130 -333 6 -6 10 -18 10 -28 0 -10 5 -18 10 -18 17 0 11 89 -9 128 -10 20 -33 91 -51 157 -17 66 -40 138 -49 160 -10 22 -24 66 -31 99 -6 32 -25 86 -41 120 -16 33 -29 70 -29 81 0 11 -9 47 -19 80 -26 82 -59 250 -60 304 -1 51 -8 64 -15 30z"/> <path d="M2490 1432 c0 -4 -34 -48 -75 -97 -41 -48 -78 -98 -81 -109 -4 -12 -21 -37 -39 -57 -18 -20 -40 -61 -50 -90 -22 -70 -114 -262 -176 -367 -27 -46 -63 -111 -80 -145 -18 -34 -67 -115 -111 -180 -43 -65 -76 -122 -73 -127 15 -24 43 -7 74 45 18 30 44 66 58 81 13 14 22 33 19 40 -3 8 4 18 14 24 11 6 20 15 20 21 0 6 9 24 21 40 11 16 17 34 13 40 -4 7 -3 9 3 6 13 -8 26 20 16 35 -4 7 -1 8 7 3 10 -6 12 -3 8 13 -4 12 -3 22 1 22 4 0 14 15 23 33 88 182 234 457 253 477 50 54 135 183 154 235 24 64 24 65 11 65 -5 0 -10 -4 -10 -8z"/> </g> </svg>
</div> <script src="js/index.js"></script>
</body>
</html>

Svg path animation - Script Codes JS Codes

var elems = document.getElementsByTagName('path');
var pathArray = Array.prototype.slice.call(elems,0);
var squiggle = document.getElementById('path-squiggle');
function drawSun() { pathArray.forEach(function(path) { var length = path.getTotalLength(); path.setAttribute('stroke-dasharray', length + ' ' + length); path.setAttribute('stroke-dashoffset', length); if (path.id !== 'path-squiggle') { drawLine(path, '3s'); } else { drawLine(path); } })
}
function drawLine(pathVar, delay) { var length = pathVar.getTotalLength(); pathVar.style.strokeDashrray = length + ' ' + length; pathVar.style.strokeDashoffset = length; pathVar.style.transition = pathVar.style.WebkitTransition = 'none'; pathVar.getBoundingClientRect(); pathVar.style.transition = pathVar.style.WebkitTransition = 'stroke-dashoffset 5s ease-in-out'; if (delay) { pathVar.style['transition-delay'] = pathVar.style.WebkitTransition = delay; } pathVar.style.strokeDashoffset = 0;
}
drawSun();
Svg path animation - Script Codes
Svg path animation - Script Codes
Home Page Home
Developer Katie Inkblotty
Username inkblotty
Uploaded August 08, 2022
Rating 3
Size 5,121 Kb
Views 58,696
Do you need developer help for Svg path animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Katie Inkblotty (inkblotty) Script Codes
Name
Google Calendar Event Feed
FCC Camper Leaderboard
Angular Task App
Monthly Global Land Surface Temperature
Force Directed Graph
React To Do Task App
Simon game
Cycling D3 Scatterplot
Tic Tac Toe
React Redux Task App
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!