Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add arrow to SVG stroke animation

I'm trying to get an animated arrow that encompasses an SVG logo. I got the stroke animation to work but I'm not sure how to get the arrow head on the front of that line.

An example of what I'm trying to achieve is https://stackoverflow.com/questions/45545887/how-to-animate-this-svg-path-so-it-looks-like-the-arrow-is-being-drawn#=

.shape svg {
  width:100%;
  height: auto;
}
.outline {
  stroke-dasharray: 32050;
  animation: dash 2s linear forwards;
  stroke-linejoin: round;
}

@keyframes dash {
  from {
    stroke-dashoffset: 32050;
  }
  to {
    stroke-dashoffset: 0;
  }
}
<div class="shape">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1350 370" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,540.000000) scale(0.100000,-0.100000)" fill="#2e3464" stroke="none">
<path transform="translate(13150 7150) rotate(180 180 0)" class="outline" fill="none" stroke="#2e3464" stroke-width="200" d="M338 5250 c-61 -33 -103 -83 -116 -140 -17 -72 -17 -2995 -1 -3072 14 -61 46 -108 96 -138 l35 -20 6388 0 6389 0 35 20 c46 28 80 75 94 132 17 68 17 3005 0 3078 -13 58 -56 108 -118 140 -39 20 -67 20 -6402 20 -6294 -1 -6363 -1 -6400 -20z"/>
<path d="M730 4922 c-36 -2 -68 -6 -72 -10 -4 -4 -8 -227 -8 -495 l-1 -488 27 -32 c15 -18 41 -41 58 -52 29 -19 51 -20 499 -23 354 -3 472 -1 483 8 10 9 14 37 14 111 0 146 27 135 -346 143 -170 3 -329 9 -354 14 l-45 7 -6 65 c-4 36 -10 217 -14 403 -5 235 -11 340 -19 342 -20 6 -150 10 -216 7z"/>
<path d="M2446 4919 c-22 -5 -48 -17 -58 -25 -20 -19 -91 -136 -129 -215 -15 -31 -45 -85 -66 -120 -21 -35 -49 -86 -62 -114 -14 -27 -35 -66 -47 -86 -12 -20 -50 -90 -84 -155 -34 -65 -67 -124 -72 -131 -5 -7 -34 -61 -63 -120 -44 -87 -52 -110 -41 -121 18 -19 265 -29 305 -13 21 9 40 32 68 84 21 40 42 80 48 89 19 31 41 72 115 213 40 77 81 154 91 170 10 17 38 71 63 121 52 105 89 154 117 154 23 0 63 -61 138 -210 30 -58 57 -109 62 -114 16 -17 10 -55 -10 -66 -11 -6 -89 -10 -181 -10 -188 0 -205 -5 -195 -57 10 -56 64 -146 93 -158 9 -4 112 -10 229 -14 244 -8 226 -1 299 -118 54 -86 58 -87 237 -87 161 1 165 5 108 116 -23 46 -50 97 -61 113 -10 17 -31 55 -46 85 -15 30 -38 72 -51 93 -14 22 -44 76 -67 120 -24 45 -57 105 -73 132 -16 28 -32 58 -36 67 -3 10 -21 42 -40 70 -18 29 -43 73 -55 98 -32 66 -93 151 -123 173 -15 11 -46 23 -70 27 -73 14 -301 20 -343 9z"/>
<path d="M4267 4921 c-47 -10 -64 -33 -98 -131 -14 -41 -34 -95 -43 -120 -10 -25 -21 -61 -25 -80 -4 -19 -12 -44 -18 -55 -6 -11 -34 -90 -62 -175 -59 -178 -80 -224 -104 -228 -19 -4 -33 24 -112 218 -14 36 -34 85 -45 110 -10 25 -28 70 -40 100 -23 59 -26 67 -59 150 -13 30 -32 80 -42 111 -30 85 -42 93 -162 97 -175 7 -206 -12 -163 -97 14 -29 26 -60 26 -69 0 -9 7 -26 15 -36 8 -11 15 -30 15 -42 0 -13 4 -25 9 -28 4 -3 19 -34 31 -68 13 -35 29 -72 37 -83 7 -11 13 -27 13 -36 0 -10 7 -30 15 -46 8 -15 28 -64 45 -108 17 -44 37 -92 45 -107 8 -14 15 -35 15 -46 0 -12 4 -23 9 -27 5 -3 15 -22 22 -43 23 -71 81 -181 115 -216 25 -25 46 -37 81 -43 57 -9 287 -9 326 1 27 6 56 54 72 116 3 14 12 41 20 60 7 19 27 82 44 140 17 58 36 119 42 135 5 17 19 59 31 95 49 154 60 180 78 180 18 0 60 -67 60 -94 0 -30 159 -508 180 -544 11 -17 38 -44 61 -59 42 -27 46 -28 208 -31 193 -4 191 -5 230 103 13 33 26 64 31 70 4 5 18 38 30 73 13 34 27 65 31 68 5 3 9 13 9 24 0 10 14 45 30 78 17 34 30 65 30 71 0 6 7 27 16 48 9 21 22 52 29 68 7 17 26 64 43 105 16 41 50 125 75 185 74 180 72 174 55 191 -21 22 -75 27 -183 19 -114 -8 -122 -14 -161 -119 -14 -39 -39 -99 -55 -133 -16 -35 -29 -68 -29 -75 0 -15 -46 -134 -104 -271 -9 -21 -16 -43 -16 -50 0 -18 -70 -147 -79 -147 -21 0 -56 81 -116 270 -63 197 -77 237 -89 265 -7 17 -21 57 -31 90 -9 33 -20 65 -25 70 -4 6 -10 22 -14 37 -12 50 -45 62 -185 65 -69 1 -143 -2 -164 -6z"/>
<path d="M5873 4923 c-211 -3 -223 -4 -233 -24 -13 -23 -16 -1047 -3 -1060 24 -23 287 -28 310 -6 4 5 10 186 13 404 5 376 6 395 24 409 16 11 78 14 332 14 l313 0 27 -35 c23 -30 26 -45 27 -109 0 -81 -5 -93 -59 -126 -30 -19 -58 -22 -311 -31 -153 -6 -282 -14 -287 -19 -16 -16 65 -192 98 -216 16 -11 64 -14 211 -14 222 0 250 -4 290 -36 29 -23 30 -26 33 -129 4 -104 4 -106 30 -117 29 -12 235 -15 270 -4 29 10 40 72 31 182 -9 106 -33 163 -85 195 -32 19 -54 46 -54 66 0 5 16 17 36 28 79 43 113 130 114 293 0 160 -42 250 -142 302 -37 19 -66 23 -253 31 -115 4 -277 7 -360 6 -82 -1 -250 -3 -372 -4z"/>
<path d="M7465 4921 c-194 -6 -201 -7 -240 -32 -22 -15 -52 -41 -66 -58 -33 -39 -36 -76 -45 -471 -8 -355 -1 -412 59 -477 72 -79 33 -74 630 -67 324 4 537 11 545 17 8 6 12 40 12 103 0 79 -3 95 -17 102 -10 5 -198 12 -418 16 -220 3 -414 8 -432 12 -31 6 -32 8 -40 73 -13 108 -8 508 7 526 11 13 54 15 289 15 314 1 568 13 585 30 6 6 11 47 11 96 0 70 -3 88 -17 98 -32 24 -384 30 -863 17z"/>
<path d="M8565 4921 l-80 -6 -6 -235 c-3 -129 -3 -373 -1 -542 5 -301 6 -307 26 -312 38 -10 274 -7 281 4 4 6 6 163 5 350 -1 338 6 420 33 420 15 0 53 -40 112 -115 22 -27 44 -55 50 -61 5 -6 28 -35 50 -63 22 -29 54 -69 71 -89 16 -20 52 -66 80 -102 42 -55 109 -139 172 -215 10 -11 26 -32 38 -47 46 -61 81 -75 220 -87 129 -11 331 -6 356 10 10 7 13 110 14 531 1 313 -2 530 -8 541 -8 16 -23 17 -151 15 l-142 -3 -8 -365 c-4 -201 -9 -371 -12 -377 -9 -25 -44 -12 -76 28 -18 23 -48 59 -67 80 -20 21 -42 50 -51 63 -9 13 -43 57 -76 97 -33 40 -108 132 -166 205 -128 160 -186 225 -219 246 -46 30 -248 43 -445 29z"/>
<path d="M10546 4920 c-102 -6 -172 -14 -197 -24 -22 -9 -49 -16 -60 -16 -13 0 -46 -25 -83 -62 -92 -94 -99 -124 -104 -423 -4 -271 6 -345 60 -425 32 -48 107 -110 133 -110 9 0 30 -7 48 -16 27 -15 84 -17 452 -18 388 -1 427 1 504 19 75 18 90 25 132 66 39 38 49 55 54 93 4 26 4 51 -1 56 -5 5 -224 13 -486 17 l-476 8 -27 25 c-14 13 -35 43 -46 65 -19 38 -20 56 -17 221 3 201 7 211 73 247 39 21 54 22 496 28 250 3 461 9 467 13 17 10 15 61 -3 76 -8 7 -15 20 -15 29 -1 46 -122 111 -229 122 -124 13 -504 18 -675 9z"/>
<path d="M11978 4920 l-237 -8 -48 -29 c-28 -17 -57 -46 -70 -69 -22 -39 -23 -43 -23 -460 l0 -422 65 -61 66 -61 357 1 c196 0 438 4 536 8 205 9 206 9 206 97 0 72 -9 111 -29 120 -9 4 -196 10 -416 15 -225 4 -411 12 -426 17 -25 10 -26 12 -33 144 -9 154 -9 151 0 325 l6 132 42 5 c22 3 213 7 422 8 303 3 385 6 398 17 13 11 16 32 16 102 0 122 5 119 -188 119 -86 0 -213 2 -282 4 -69 2 -232 1 -362 -4z"/>
<path d="M7554 4471 c-64 -16 -66 -24 -24 -108 51 -102 22 -95 394 -91 218 2 329 7 336 14 8 8 1 32 -24 87 -26 58 -42 80 -63 89 -33 13 -571 22 -619 9z"/>
<path d="M12113 4473 c-152 -5 -155 -8 -113 -95 51 -110 24 -103 391 -103 207 0 322 4 328 10 20 20 -30 137 -72 168 -21 16 -48 19 -218 21 -107 2 -249 1 -316 -1z"/>
<path d="M950 3291 c-197 -7 -222 -16 -287 -105 -23 -30 -23 -32 -22 -375 0 -190 4 -379 8 -420 7 -70 9 -75 52 -116 l45 -43 295 -7 c162 -4 402 -3 534 1 l240 9 9 58 c12 81 -1 139 -34 148 -14 4 -201 7 -416 8 -365 1 -392 2 -407 19 -14 16 -17 44 -17 179 0 89 3 169 6 178 6 14 9 13 30 -6 13 -12 24 -26 24 -31 0 -5 16 -34 35 -64 l36 -56 307 4 c169 2 315 8 325 12 23 11 22 24 -12 87 -51 95 -46 94 -410 91 -225 -2 -317 1 -327 9 -18 15 -19 152 -1 167 7 6 177 15 417 22 250 7 410 15 417 22 17 14 18 168 0 191 -11 16 -44 18 -347 21 -184 2 -409 1 -500 -3z"/>
<path d="M2380 3290 c-259 -7 -312 -19 -382 -87 -78 -75 -94 -129 -107 -353 -8 -123 -6 -183 6 -290 14 -121 19 -140 48 -186 58 -91 138 -134 254 -135 42 0 103 -4 136 -9 33 -4 209 -3 390 1 334 9 428 20 480 56 27 18 40 17 85 -12 46 -29 78 -32 87 -7 4 9 20 36 35 59 41 60 46 96 17 121 -13 11 -37 31 -53 44 l-29 25 -2 224 c-3 360 -32 442 -185 515 l-65 31 -245 5 c-135 2 -346 1 -470 -2z m558 -259 c60 -31 71 -50 84 -142 14 -104 6 -159 -23 -159 -24 0 -120 52 -194 104 -74 53 -92 49 -146 -30 -24 -36 -48 -72 -54 -79 -15 -22 49 -81 135 -124 110 -54 131 -71 128 -95 -3 -20 -10 -21 -203 -27 -254 -9 -367 0 -399 30 -43 40 -58 120 -54 282 4 171 16 206 81 238 39 20 59 21 325 21 258 0 286 -2 320 -19z"/>
<path d="M3551 3292 c-29 -6 -36 -13 -44 -41 -4 -19 -7 -192 -4 -385 4 -362 5 -373 48 -471 26 -60 61 -95 124 -124 57 -27 77 -31 226 -40 112 -7 245 -7 419 0 248 10 257 11 326 40 126 53 169 118 185 287 12 118 7 701 -6 722 -10 15 -272 13 -282 -2 -4 -7 -10 -169 -13 -360 -5 -330 -6 -348 -26 -374 -11 -15 -33 -37 -48 -48 -26 -20 -40 -21 -287 -21 l-260 0 -45 47 -44 47 -1 98 c-2 198 -15 612 -19 616 -9 8 -214 15 -249 9z"/>
<path d="M5058 3293 c-36 -3 -61 -10 -70 -20 -10 -13 -13 -115 -13 -522 l0 -506 161 -3 162 -2 7 195 c4 107 6 336 3 510 -3 260 -6 317 -18 329 -16 15 -138 25 -232 19z"/>
<path d="M5582 3291 c-84 -4 -115 -10 -122 -21 -6 -9 -10 -221 -10 -521 l0 -506 143 -5 c78 -3 145 -3 150 -1 4 2 7 95 8 206 0 207 9 269 39 275 10 2 22 -12 33 -40 10 -24 31 -71 48 -106 l29 -63 313 3 c351 3 343 2 421 83 70 73 108 236 87 375 -22 140 -70 231 -146 271 -84 45 -123 49 -510 53 -203 2 -421 1 -483 -3z m756 -260 c44 -17 65 -62 66 -137 1 -51 -3 -67 -27 -101 l-28 -41 -167 -4 c-92 -2 -219 -2 -283 0 -141 5 -141 5 -147 143 -4 89 -2 99 19 129 l24 32 255 -4 c176 -3 265 -8 288 -17z"/>
<path d="M8259 3291 c-82 -5 -102 -10 -140 -34 -44 -28 -92 -91 -137 -177 -12 -25 -33 -63 -46 -85 -13 -22 -37 -66 -55 -97 -17 -32 -45 -84 -62 -115 -18 -32 -40 -73 -50 -91 -9 -18 -23 -39 -29 -47 -19 -22 -58 -18 -73 8 -53 85 -76 125 -129 222 -34 61 -81 149 -105 196 -109 210 -130 221 -411 217 l-197 -3 -3 -522 -2 -522 132 -3 c99 -2 135 0 145 10 7 8 11 18 8 23 -4 5 -1 158 5 341 9 270 14 336 26 348 13 13 17 12 34 -10 11 -14 27 -41 37 -60 10 -19 37 -67 61 -106 23 -39 42 -74 42 -77 0 -4 19 -39 43 -79 79 -134 137 -237 137 -247 0 -4 7 -14 15 -21 8 -7 15 -19 15 -27 0 -8 14 -32 30 -53 28 -35 36 -39 93 -45 34 -3 91 -3 126 2 67 8 79 18 111 92 6 13 19 36 29 50 11 15 30 47 43 71 13 25 43 77 66 117 23 39 42 74 42 78 0 3 14 26 30 50 17 24 30 46 30 49 0 4 20 40 45 80 25 41 45 77 45 81 0 17 55 75 71 75 18 0 19 -14 19 -364 0 -279 3 -366 13 -373 7 -6 70 -8 150 -5 l137 4 0 512 c0 281 -4 516 -8 522 -9 14 -204 23 -333 15z"/>
<path d="M11233 3292 c-31 -2 -57 -9 -65 -19 -10 -12 -14 -95 -18 -364 -3 -191 -8 -350 -12 -354 -11 -12 -44 13 -89 66 -96 114 -116 138 -164 199 -27 34 -55 71 -61 82 -6 10 -18 24 -26 31 -9 7 -44 48 -78 92 -212 271 -201 265 -488 265 -165 0 -212 -3 -221 -14 -8 -9 -13 -167 -18 -518 -6 -491 -6 -506 13 -514 10 -5 80 -8 155 -6 l136 3 7 350 c4 193 10 357 13 365 10 27 39 14 78 -37 54 -69 127 -159 145 -180 8 -9 74 -92 145 -185 72 -92 162 -201 202 -241 l71 -73 254 2 253 3 3 440 c3 420 -1 568 -16 591 -8 12 -138 22 -219 16z"/>
<path d="M11816 3292 c-163 -1 -254 -6 -263 -13 -21 -18 -18 -202 4 -220 13 -11 114 -15 542 -17 289 -2 564 1 611 5 l85 8 3 105 c1 58 -1 110 -5 116 -9 12 -545 21 -977 16z"/>
<path d="M8840 3279 c-32 -13 -77 -56 -98 -94 -15 -26 -17 -79 -20 -419 -3 -430 -4 -423 61 -491 l38 -40 532 4 c293 2 535 5 540 8 13 8 8 180 -5 191 -8 6 -165 11 -408 14 -394 5 -430 8 -451 40 -9 14 -2 539 8 548 22 19 163 30 404 31 145 1 302 4 349 7 l85 7 3 103 3 102 -508 -1 c-312 0 -518 -4 -533 -10z"/>
<path d="M12025 2979 c-4 -6 -7 -170 -8 -365 0 -294 2 -357 14 -369 19 -19 273 -34 283 -17 6 10 8 207 6 663 0 40 -17 52 -87 64 -21 4 -57 13 -81 21 -51 17 -118 18 -127 3z"/>
<path d="M9093 2854 c-17 -8 -16 -44 2 -68 8 -11 15 -27 15 -35 0 -9 11 -29 24 -46 l24 -30 300 -3 c311 -4 342 -1 342 37 0 21 -44 109 -66 131 -12 13 -64 15 -322 17 -169 1 -313 0 -319 -3z"/>
</g>
</svg>
</div>
like image 932
Charlie Wedel Avatar asked Jan 27 '23 15:01

Charlie Wedel


2 Answers

You can't animate a marker using a stroke-dash-array. The position of the "draw/no-draw" array is being slid along the path, but the path itself doesn't move, which means the marker doesn't move. @Michael Mullany

But you can replace the marker with a triangle and make it move along the same path which is animated

  • To do this, use the command animateMotion
<animateMotion
   id="an"
   dur="7s"
   repeatCount="1"
   rotate="auto-reverse"
   begin="0s"
   fill="freeze"
   restart="whenNotActive">
       <mpath xlink:href="#border"/>
</animateMotion>

where id =" border " is an animated path

  • Duration animation stroke-dashoffset andanimateMotion make the same. And then it will seem that the triangle moves simultaneously with the line

.shape svg {
  width:100%;
  height: auto;
}
.outline {
  stroke-dasharray: 3253;
  animation: dash 7s linear forwards;
  stroke-linejoin: round;
}

@keyframes dash {
  from {
    stroke-dashoffset: 3253;
  }
  to {
    stroke-dashoffset: 0;
  }
}
</style>
<svg id="svg2" version="1.1" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1350 370" preserveAspectRatio="xMidYMid meet">

<g transform="translate(0 10) scale(0.9)">
 <path class="outline" id="border" d="m1317.2 348c6.1-3.3 10.3-8.3 11.6-14 1.7-7.2 1.7-299.5 0.1-307.2-1.4-6.1-4.6-10.8-9.6-13.8l-3.5-2H677 38.1l-3.5 2c-4.6 2.8-8 7.5-9.4 13.2-1.7 6.8-1.7 300.5 0 307.8 1.3 5.8 5.6 10.8 11.8 14 3.9 2 6.7 2 640.2 2 629.4-0.1 636.3-0.1 640-2z" style="fill:none;stroke-width:20;stroke:#2e3464" stroke-linecap="round"/>
  <path d="m73 45.8c-3.6 0.2-6.8 0.6-7.2 1C65.4 47.2 65 69.5 65 96.3l-0.1 48.8 2.7 3.2c1.5 1.8 4.1 4.1 5.8 5.2 2.9 1.9 5.1 2 49.9 2.3 35.4 0.3 47.2 0.1 48.3-0.8 1-0.9 1.4-3.7 1.4-11.1 0-14.6 2.7-13.5-34.6-14.3-17-0.3-32.9-0.9-35.4-1.4l-4.5-0.7-0.6-6.5c-0.4-3.6-1-21.7-1.4-40.3-0.5-23.5-1.1-34-1.9-34.2-2-0.6-15-1-21.6-0.7zM244.6 46.1" fill="#2e3464"/>
  <path d="m244.6 46.1c-2.2 0.5-4.8 1.7-5.8 2.5-2 1.9-9.1 13.6-12.9 21.5-1.5 3.1-4.5 8.5-6.6 12-2.1 3.5-4.9 8.6-6.2 11.4-1.4 2.7-3.5 6.6-4.7 8.6-1.2 2-5 9-8.4 15.5-3.4 6.5-6.7 12.4-7.2 13.1-0.5 0.7-3.4 6.1-6.3 12-4.4 8.7-5.2 11-4.1 12.1 1.8 1.9 26.5 2.9 30.5 1.3 2.1-0.9 4-3.2 6.8-8.4 2.1-4 4.2-8 4.8-8.9 1.9-3.1 4.1-7.2 11.5-21.3 4-7.7 8.1-15.4 9.1-17 1-1.7 3.8-7.1 6.3-12.1 5.2-10.5 8.9-15.4 11.7-15.4 2.3 0 6.3 6.1 13.8 21 3 5.8 5.7 10.9 6.2 11.4 1.6 1.7 1 5.5-1 6.6-1.1 0.6-8.9 1-18.1 1-18.8 0-20.5 0.5-19.5 5.7 1 5.6 6.4 14.6 9.3 15.8 0.9 0.4 11.2 1 22.9 1.4 24.4 0.8 22.6 0.1 29.9 11.8 5.4 8.6 5.8 8.7 23.7 8.7 16.1-0.1 16.5-0.5 10.8-11.6-2.3-4.6-5-9.7-6.1-11.3-1-1.7-3.1-5.5-4.6-8.5-1.5-3-3.8-7.2-5.1-9.3-1.4-2.2-4.4-7.6-6.7-12-2.4-4.5-5.7-10.5-7.3-13.2-1.6-2.8-3.2-5.8-3.6-6.7-0.3-1-2.1-4.2-4-7-1.8-2.9-4.3-7.3-5.5-9.8-3.2-6.6-9.3-15.1-12.3-17.3-1.5-1.1-4.6-2.3-7-2.7-7.3-1.4-30.1-2-34.3-0.9z" fill="#2e3464"/>
  <path d="m426.7 45.9c-4.7 1-6.4 3.3-9.8 13.1-1.4 4.1-3.4 9.5-4.3 12-1 2.5-2.1 6.1-2.5 8-0.4 1.9-1.2 4.4-1.8 5.5-0.6 1.1-3.4 9-6.2 17.5-5.9 17.8-8 22.4-10.4 22.8-1.9 0.4-3.3-2.4-11.2-21.8-1.4-3.6-3.4-8.5-4.5-11-1-2.5-2.8-7-4-10-2.3-5.9-2.6-6.7-5.9-15-1.3-3-3.2-8-4.2-11.1-3-8.5-4.2-9.3-16.2-9.7-17.5-0.7-20.6 1.2-16.3 9.7 1.4 2.9 2.6 6 2.6 6.9 0 0.9 0.7 2.6 1.5 3.6 0.8 1.1 1.5 3 1.5 4.2 0 1.3 0.4 2.5 0.9 2.8 0.4 0.3 1.9 3.4 3.1 6.8 1.3 3.5 2.9 7.2 3.7 8.3 0.7 1.1 1.3 2.7 1.3 3.6 0 1 0.7 3 1.5 4.6 0.8 1.5 2.8 6.4 4.5 10.8 1.7 4.4 3.7 9.2 4.5 10.7 0.8 1.4 1.5 3.5 1.5 4.6 0 1.2 0.4 2.3 0.9 2.7 0.5 0.3 1.5 2.2 2.2 4.3 2.3 7.1 8.1 18.1 11.5 21.6 2.5 2.5 4.6 3.7 8.1 4.3 5.7 0.9 28.7 0.9 32.6-0.1 2.7-0.6 5.6-5.4 7.2-11.6 0.3-1.4 1.2-4.1 2-6 0.7-1.9 2.7-8.2 4.4-14 1.7-5.8 3.6-11.9 4.2-13.5 0.5-1.7 1.9-5.9 3.1-9.5 4.9-15.4 6-18 7.8-18 1.8 0 6 6.7 6 9.4 0 3 15.9 50.8 18 54.4 1.1 1.7 3.8 4.4 6.1 5.9 4.2 2.7 4.6 2.8 20.8 3.1 19.3 0.4 19.1 0.5 23-10.3 1.3-3.3 2.6-6.4 3.1-7 0.4-0.5 1.8-3.8 3-7.3 1.3-3.4 2.7-6.5 3.1-6.8 0.5-0.3 0.9-1.3 0.9-2.4 0-1 1.4-4.5 3-7.8 1.7-3.4 3-6.5 3-7.1 0-0.6 0.7-2.7 1.6-4.8 0.9-2.1 2.2-5.2 2.9-6.8 0.7-1.7 2.6-6.4 4.3-10.5 1.6-4.1 5-12.5 7.5-18.5 7.4-18 7.2-17.4 5.5-19.1-2.1-2.2-7.5-2.7-18.3-1.9-11.4 0.8-12.2 1.4-16.1 11.9-1.4 3.9-3.9 9.9-5.5 13.3-1.6 3.5-2.9 6.8-2.9 7.5 0 1.5-4.6 13.4-10.4 27.1-0.9 2.1-1.6 4.3-1.6 5 0 1.8-7 14.7-7.9 14.7-2.1 0-5.6-8.1-11.6-27-6.3-19.7-7.7-23.7-8.9-26.5-0.7-1.7-2.1-5.7-3.1-9-0.9-3.3-2-6.5-2.5-7-0.4-0.6-1-2.2-1.4-3.7-1.2-5-4.5-6.2-18.5-6.5-6.9-0.1-14.3 0.2-16.4 0.6z" fill="#2e3464"/>
  <path d="M587.3 45.7C566.2 46 565 46.1 564 48.1c-1.3 2.3-1.6 104.7-0.3 106 2.4 2.3 28.7 2.8 31 0.6 0.4-0.5 1-18.6 1.3-40.4 0.5-37.6 0.6-39.5 2.4-40.9 1.6-1.1 7.8-1.4 33.2-1.4h31.3l2.7 3.5c2.3 3 2.6 4.5 2.7 10.9 0 8.1-0.5 9.3-5.9 12.6-3 1.9-5.8 2.2-31.1 3.1-15.3 0.6-28.2 1.4-28.7 1.9-1.6 1.6 6.5 19.2 9.8 21.6 1.6 1.1 6.4 1.4 21.1 1.4 22.2 0 25 0.4 29 3.6 2.9 2.3 3 2.6 3.3 12.9 0.4 10.4 0.4 10.6 3 11.7 2.9 1.2 23.5 1.5 27 0.4 2.9-1 4-7.2 3.1-18.2-0.9-10.6-3.3-16.3-8.5-19.5-3.2-1.9-5.4-4.6-5.4-6.6 0-0.5 1.6-1.7 3.6-2.8 7.9-4.3 11.3-13 11.4-29.3 0-16-4.2-25-14.2-30.2-3.7-1.9-6.6-2.3-25.3-3.1-11.5-0.4-27.7-0.7-36-0.6-8.2 0.1-25 0.3-37.2 0.4z" fill="#2e3464"/>
  <path d="m746.5 45.9c-19.4 0.6-20.1 0.7-24 3.2-2.2 1.5-5.2 4.1-6.6 5.8-3.3 3.9-3.6 7.6-4.5 47.1-0.8 35.5-0.1 41.2 5.9 47.7 7.2 7.9 3.3 7.4 63 6.7 32.4-0.4 53.7-1.1 54.5-1.7 0.8-0.6 1.2-4 1.2-10.3 0-7.9-0.3-9.5-1.7-10.2-1-0.5-19.8-1.2-41.8-1.6-22-0.3-41.4-0.8-43.2-1.2-3.1-0.6-3.2-0.8-4-7.3-1.3-10.8-0.8-50.8 0.7-52.6 1.1-1.3 5.4-1.5 28.9-1.5 31.4-0.1 56.8-1.3 58.5-3 0.6-0.6 1.1-4.7 1.1-9.6 0-7-0.3-8.8-1.7-9.8-3.2-2.4-38.4-3-86.3-1.7z" fill="#2e3464"/>
  <path d="m856.5 45.9-8 0.6-0.6 23.5c-0.3 12.9-0.3 37.3-0.1 54.2 0.5 30.1 0.6 30.7 2.6 31.2 3.8 1 27.4 0.7 28.1-0.4 0.4-0.6 0.6-16.3 0.5-35-0.1-33.8 0.6-42 3.3-42 1.5 0 5.3 4 11.2 11.5 2.2 2.7 4.4 5.5 5 6.1 0.5 0.6 2.8 3.5 5 6.3 2.2 2.9 5.4 6.9 7.1 8.9 1.6 2 5.2 6.6 8 10.2 4.2 5.5 10.9 13.9 17.2 21.5 1 1.1 2.6 3.2 3.8 4.7 4.6 6.1 8.1 7.5 22 8.7 12.9 1.1 33.1 0.6 35.6-1 1-0.7 1.3-11 1.4-53.1 0.1-31.3-0.2-53-0.8-54.1-0.8-1.6-2.3-1.7-15.1-1.5l-14.2 0.3-0.8 36.5c-0.4 20.1-0.9 37.1-1.2 37.7-0.9 2.5-4.4 1.2-7.6-2.8-1.8-2.3-4.8-5.9-6.7-8-2-2.1-4.2-5-5.1-6.3-0.9-1.3-4.3-5.7-7.6-9.7-3.3-4-10.8-13.2-16.6-20.5-12.8-16-18.6-22.5-21.9-24.6-4.6-3-24.8-4.3-44.5-2.9z" fill="#2e3464"/>
  <path d="m1054.6 46c-10.2 0.6-17.2 1.4-19.7 2.4-2.2 0.9-4.9 1.6-6 1.6-1.3 0-4.6 2.5-8.3 6.2-9.2 9.4-9.9 12.4-10.4 42.3-0.4 27.1 0.6 34.5 6 42.5 3.2 4.8 10.7 11 13.3 11 0.9 0 3 0.7 4.8 1.6 2.7 1.5 8.4 1.7 45.2 1.8 38.8 0.1 42.7-0.1 50.4-1.9 7.5-1.8 9-2.5 13.2-6.6 3.9-3.8 4.9-5.5 5.4-9.3 0.4-2.6 0.4-5.1-0.1-5.6-0.5-0.5-22.4-1.3-48.6-1.7l-47.6-0.8-2.7-2.5c-1.4-1.3-3.5-4.3-4.6-6.5-1.9-3.8-2-5.6-1.7-22.1 0.3-20.1 0.7-21.1 7.3-24.7 3.9-2.1 5.4-2.2 49.6-2.8 25-0.3 46.1-0.9 46.7-1.3 1.7-1 1.5-6.1-0.3-7.6-0.8-0.7-1.5-2-1.5-2.9-0.1-4.6-12.2-11.1-22.9-12.2-12.4-1.3-50.4-1.8-67.5-0.9z" fill="#2e3464"/>
  <path d="m1197.8 46-23.7 0.8-4.8 2.9c-2.8 1.7-5.7 4.6-7 6.9-2.2 3.9-2.3 4.3-2.3 46v42.2l6.5 6.1 6.6 6.1 35.7-0.1c19.6 0 43.8-0.4 53.6-0.8 20.5-0.9 20.6-0.9 20.6-9.7 0-7.2-0.9-11.1-2.9-12-0.9-0.4-19.6-1-41.6-1.5-22.5-0.4-41.1-1.2-42.6-1.7-2.5-1-2.6-1.2-3.3-14.4-0.9-15.4-0.9-15.1 0-32.5l0.6-13.2 4.2-0.5c2.2-0.3 21.3-0.7 42.2-0.8 30.3-0.3 38.5-0.6 39.8-1.7 1.3-1.1 1.6-3.2 1.6-10.2 0-12.2 0.5-11.9-18.8-11.9-8.6 0-21.3-0.2-28.2-0.4-6.9-0.2-23.2-0.1-36.2 0.4z" fill="#2e3464"/>
  <path d="m755.4 90.9c-6.4 1.6-6.6 2.4-2.4 10.8 5.1 10.2 2.2 9.5 39.4 9.1 21.8-0.2 32.9-0.7 33.6-1.4 0.8-0.8 0.1-3.2-2.4-8.7-2.6-5.8-4.2-8-6.3-8.9-3.3-1.3-57.1-2.2-61.9-0.9z" fill="#2e3464"/>
  <path d="m1211.3 90.7c-15.2 0.5-15.5 0.8-11.3 9.5 5.1 11 2.4 10.3 39.1 10.3 20.7 0 32.2-0.4 32.8-1 2-2-3-13.7-7.2-16.8-2.1-1.6-4.8-1.9-21.8-2.1-10.7-0.2-24.9-0.1-31.6 0.1z" fill="#2e3464"/>
  <path d="m95 208.9c-19.7 0.7-22.2 1.6-28.7 10.5-2.3 3-2.3 3.2-2.2 37.5 0 19 0.4 37.9 0.8 42 0.7 7 0.9 7.5 5.2 11.6l4.5 4.3 29.5 0.7c16.2 0.4 40.2 0.3 53.4-0.1l24-0.9 0.9-5.8c1.2-8.1-0.1-13.9-3.4-14.8-1.4-0.4-20.1-0.7-41.6-0.8-36.5-0.1-39.2-0.2-40.7-1.9-1.4-1.6-1.7-4.4-1.7-17.9 0-8.9 0.3-16.9 0.6-17.8 0.6-1.4 0.9-1.3 3 0.6 1.3 1.2 2.4 2.6 2.4 3.1 0 0.5 1.6 3.4 3.5 6.4l3.6 5.6 30.7-0.4c16.9-0.2 31.5-0.8 32.5-1.2 2.3-1.1 2.2-2.4-1.2-8.7-5.1-9.5-4.6-9.4-41-9.1-22.5 0.2-31.7-0.1-32.7-0.9-1.8-1.5-1.9-15.2-0.1-16.7 0.7-0.6 17.7-1.5 41.7-2.2 25-0.7 41-1.5 41.7-2.2 1.7-1.4 1.8-16.8 0-19.1-1.1-1.6-4.4-1.8-34.7-2.1-18.4-0.2-40.9-0.1-50 0.3z" fill="#2e3464"/>
  <path d="m238 209c-25.9 0.7-31.2 1.9-38.2 8.7-7.8 7.5-9.4 12.9-10.7 35.3-0.8 12.3-0.6 18.3 0.6 29 1.4 12.1 1.9 14 4.8 18.6 5.8 9.1 13.8 13.4 25.4 13.5 4.2 0 10.3 0.4 13.6 0.9 3.3 0.4 20.9 0.3 39-0.1 33.4-0.9 42.8-2 48-5.6 2.7-1.8 4-1.7 8.5 1.2 4.6 2.9 7.8 3.2 8.7 0.7 0.4-0.9 2-3.6 3.5-5.9 4.1-6 4.6-9.6 1.7-12.1-1.3-1.1-3.7-3.1-5.3-4.4l-2.9-2.5-0.2-22.4c-0.3-36-3.2-44.2-18.5-51.5l-6.5-3.1-24.5-0.5c-13.5-0.2-34.6-0.1-47 0.2zm55.8 25.9c6 3.1 7.1 5 8.4 14.2 1.4 10.4 0.6 15.9-2.3 15.9-2.4 0-12-5.2-19.4-10.4-7.4-5.3-9.2-4.9-14.6 3-2.4 3.6-4.8 7.2-5.4 7.9-1.5 2.2 4.9 8.1 13.5 12.4 11 5.4 13.1 7.1 12.8 9.5-0.3 2-1 2.1-20.3 2.7-25.4 0.9-36.7 0-39.9-3-4.3-4-5.8-12-5.4-28.2 0.4-17.1 1.6-20.6 8.1-23.8 3.9-2 5.9-2.1 32.5-2.1 25.8 0 28.6 0.2 32 1.9z" fill="#2e3464"/>
  <path d="m355.1 208.8c-2.9 0.6-3.6 1.3-4.4 4.1-0.4 1.9-0.7 19.2-0.4 38.5 0.4 36.2 0.5 37.3 4.8 47.1 2.6 6 6.1 9.5 12.4 12.4 5.7 2.7 7.7 3.1 22.6 4 11.2 0.7 24.5 0.7 41.9 0 24.8-1 25.7-1.1 32.6-4 12.6-5.3 16.9-11.8 18.5-28.7 1.2-11.8 0.7-70.1-0.6-72.2-1-1.5-27.2-1.3-28.2 0.2-0.4 0.7-1 16.9-1.3 36-0.5 33-0.6 34.8-2.6 37.4-1.1 1.5-3.3 3.7-4.8 4.8-2.6 2-4 2.1-28.7 2.1h-26l-4.5-4.7-4.4-4.7-0.1-9.8c-0.2-19.8-1.5-61.2-1.9-61.6-0.9-0.8-21.4-1.5-24.9-0.9z" fill="#2e3464"/>
  <path d="m505.8 208.7c-3.6 0.3-6.1 1-7 2-1 1.3-1.3 11.5-1.3 52.2v50.6l16.1 0.3 16.2 0.2 0.7-19.5c0.4-10.7 0.6-33.6 0.3-51-0.3-26-0.6-31.7-1.8-32.9-1.6-1.5-13.8-2.5-23.2-1.9z" fill="#2e3464"/>
  <path d="m558.2 208.9c-8.4 0.4-11.5 1-12.2 2.1-0.6 0.9-1 22.1-1 52.1v50.6l14.3 0.5c7.8 0.3 14.5 0.3 15 0.1 0.4-0.2 0.7-9.5 0.8-20.6 0-20.7 0.9-26.9 3.9-27.5 1-0.2 2.2 1.2 3.3 4 1 2.4 3.1 7.1 4.8 10.6l2.9 6.3 31.3-0.3c35.1-0.3 34.3-0.2 42.1-8.3 7-7.3 10.8-23.6 8.7-37.5-2.2-14-7-23.1-14.6-27.1-8.4-4.5-12.3-4.9-51-5.3-20.3-0.2-42.1-0.1-48.3 0.3zm75.6 26c4.4 1.7 6.5 6.2 6.6 13.7 0.1 5.1-0.3 6.7-2.7 10.1l-2.8 4.1-16.7 0.4c-9.2 0.2-21.9 0.2-28.3 0-14.1-0.5-14.1-0.5-14.7-14.3-0.4-8.9-0.2-9.9 1.9-12.9l2.4-3.2 25.5 0.4c17.6 0.3 26.5 0.8 28.8 1.7z" fill="#2e3464"/>
  <path d="m825.9 208.9c-8.2 0.5-10.2 1-14 3.4-4.4 2.8-9.2 9.1-13.7 17.7-1.2 2.5-3.3 6.3-4.6 8.5-1.3 2.2-3.7 6.6-5.5 9.7-1.7 3.2-4.5 8.4-6.2 11.5-1.8 3.2-4 7.3-5 9.1-0.9 1.8-2.3 3.9-2.9 4.7-1.9 2.2-5.8 1.8-7.3-0.8-5.3-8.5-7.6-12.5-12.9-22.2-3.4-6.1-8.1-14.9-10.5-19.6-10.9-21-13-22.1-41.1-21.7l-19.7 0.3-0.3 52.2-0.2 52.2 13.2 0.3c9.9 0.2 13.5 0 14.5-1 0.7-0.8 1.1-1.8 0.8-2.3-0.4-0.5-0.1-15.8 0.5-34.1 0.9-27 1.4-33.6 2.6-34.8 1.3-1.3 1.7-1.2 3.4 1 1.1 1.4 2.7 4.1 3.7 6 1 1.9 3.7 6.7 6.1 10.6 2.3 3.9 4.2 7.4 4.2 7.7 0 0.4 1.9 3.9 4.3 7.9 7.9 13.4 13.7 23.7 13.7 24.7 0 0.4 0.7 1.4 1.5 2.1 0.8 0.7 1.5 1.9 1.5 2.7 0 0.8 1.4 3.2 3 5.3 2.8 3.5 3.6 3.9 9.3 4.5 3.4 0.3 9.1 0.3 12.6-0.2 6.7-0.8 7.9-1.8 11.1-9.2 0.6-1.3 1.9-3.6 2.9-5 1.1-1.5 3-4.7 4.3-7.1 1.3-2.5 4.3-7.7 6.6-11.7 2.3-3.9 4.2-7.4 4.2-7.8 0-0.3 1.4-2.6 3-5 1.7-2.4 3-4.6 3-4.9 0-0.4 2-4 4.5-8 2.5-4.1 4.5-7.7 4.5-8.1 0-1.7 5.5-7.5 7.1-7.5 1.8 0 1.9 1.4 1.9 36.4 0 27.9 0.3 36.6 1.3 37.3 0.7 0.6 7 0.8 15 0.5l13.7-0.4v-51.2c0-28.1-0.4-51.6-0.8-52.2-0.9-1.4-20.4-2.3-33.3-1.5z" fill="#2e3464"/>
  <path d="m1123.3 208.8c-3.1 0.2-5.7 0.9-6.5 1.9-1 1.2-1.4 9.5-1.8 36.4-0.3 19.1-0.8 35-1.2 35.4-1.1 1.2-4.4-1.3-8.9-6.6-9.6-11.4-11.6-13.8-16.4-19.9-2.7-3.4-5.5-7.1-6.1-8.2-0.6-1-1.8-2.4-2.6-3.1-0.9-0.7-4.4-4.8-7.8-9.2-21.2-27.1-20.1-26.5-48.8-26.5-16.5 0-21.2 0.3-22.1 1.4-0.8 0.9-1.3 16.7-1.8 51.8-0.6 49.1-0.6 50.6 1.3 51.4 1 0.5 8 0.8 15.5 0.6l13.6-0.3 0.7-35c0.4-19.3 1-35.7 1.3-36.5 1-2.7 3.9-1.4 7.8 3.7 5.4 6.9 12.7 15.9 14.5 18 0.8 0.9 7.4 9.2 14.5 18.5 7.2 9.2 16.2 20.1 20.2 24.1l7.1 7.3 25.4-0.2 25.3-0.3 0.3-44c0.3-42-0.1-56.8-1.6-59.1-0.8-1.2-13.8-2.2-21.9-1.6z" fill="#2e3464"/>
  <path d="m1181.6 208.8c-16.3 0.1-25.4 0.6-26.3 1.3-2.1 1.8-1.8 20.2 0.4 22 1.3 1.1 11.4 1.5 54.2 1.7 28.9 0.2 56.4-0.1 61.1-0.5l8.5-0.8 0.3-10.5c0.1-5.8-0.1-11-0.5-11.6-0.9-1.2-54.5-2.1-97.7-1.6z" fill="#2e3464"/>
  <path d="m884 210.1c-3.2 1.3-7.7 5.6-9.8 9.4-1.5 2.6-1.7 7.9-2 41.9-0.3 43-0.4 42.3 6.1 49.1l3.8 4 53.2-0.4c29.3-0.2 53.5-0.5 54-0.8 1.3-0.8 0.8-18-0.5-19.1-0.8-0.6-16.5-1.1-40.8-1.4-39.4-0.5-43-0.8-45.1-4-0.9-1.4-0.2-53.9 0.8-54.8 2.2-1.9 16.3-3 40.4-3.1 14.5-0.1 30.2-0.4 34.9-0.7l8.5-0.7 0.3-10.3 0.3-10.2-50.8 0.1c-31.2 0-51.8 0.4-53.3 1z" fill="#2e3464"/>
  <path d="m1202.5 240.1c-0.4 0.6-0.7 17-0.8 36.5 0 29.4 0.2 35.7 1.4 36.9 1.9 1.9 27.3 3.4 28.3 1.7 0.6-1 0.8-20.7 0.6-66.3 0-4-1.7-5.2-8.7-6.4-2.1-0.4-5.7-1.3-8.1-2.1-5.1-1.7-11.8-1.8-12.7-0.3z" fill="#2e3464"/>
  <path d="m909.3 252.6c-1.7 0.8-1.6 4.4 0.2 6.8 0.8 1.1 1.5 2.7 1.5 3.5 0 0.9 1.1 2.9 2.4 4.6l2.4 3 30 0.3c31.1 0.4 34.2 0.1 34.2-3.7 0-2.1-4.4-10.9-6.6-13.1-1.2-1.3-6.4-1.5-32.2-1.7-16.9-0.1-31.3 0-31.9 0.3z" fill="#2e3464"/>
         <polyline transform="translate(7 -25) rotate(90)" points="0,0 25,43.3 50,0" fill="#4B55A3" >
 <animateMotion
   id="an"
   dur="7s"
   repeatCount="1"
   rotate="auto-reverse"
   begin="0s"
   fill="freeze"
   restart="whenNotActive">
       <mpath xlink:href="#border"/>
</animateMotion> 
    <set attributeName="fill-opacity" to="0" begin="an.end"  />  
</polyline>	
</g>
  </svg>

Update

for questions in the comments

is it possible to get the arrow to stay at the end of the animation, instead of closing the box, to leave a space open on the bottom of the ride side of the box and keep the arrow visible at the bottom right corner? – Charlie Wedel

  • To keep the arrow after the end of the animation you need to delete

    <set attributeName="fill-opacity" to="0" begin="an.end" />

  • To curb did not reach the right corner of the button must be reduced: stroke-dasharray: 3163; stroke-dasharray: 3163;
  • The position of the arrow relative to the line is adjustable

    <polyline transform="translate(80 -25) rotate(90)"

  • You can still play with the length of the triangle-marker I lengthened to 80

    points="0,0 25,80 50,0"

.shape svg {
  width:100%;
  height: auto;
}
.outline {
  stroke-dasharray: 3163;
  animation: dash 7s linear forwards;
  stroke-linejoin: round;
}

@keyframes dash {
  from {
    stroke-dashoffset: 3163;
  }
  to {
    stroke-dashoffset: 0;
  }
}
<svg id="svg2" version="1.1" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1350 370" preserveAspectRatio="xMidYMid meet">

<g transform="translate(0 10) scale(0.9)">
 <path class="outline" id="border" d="m1317.2 348c6.1-3.3 10.3-8.3 11.6-14 1.7-7.2 1.7-299.5 0.1-307.2-1.4-6.1-4.6-10.8-9.6-13.8l-3.5-2H677 38.1l-3.5 2c-4.6 2.8-8 7.5-9.4 13.2-1.7 6.8-1.7 300.5 0 307.8 1.3 5.8 5.6 10.8 11.8 14 3.9 2 6.7 2 640.2 2 629.4-0.1 636.3-0.1 640-2z" style="fill:none;stroke-width:20;stroke:#2e3464" stroke-linecap="round"/>
  <path d="m73 45.8c-3.6 0.2-6.8 0.6-7.2 1C65.4 47.2 65 69.5 65 96.3l-0.1 48.8 2.7 3.2c1.5 1.8 4.1 4.1 5.8 5.2 2.9 1.9 5.1 2 49.9 2.3 35.4 0.3 47.2 0.1 48.3-0.8 1-0.9 1.4-3.7 1.4-11.1 0-14.6 2.7-13.5-34.6-14.3-17-0.3-32.9-0.9-35.4-1.4l-4.5-0.7-0.6-6.5c-0.4-3.6-1-21.7-1.4-40.3-0.5-23.5-1.1-34-1.9-34.2-2-0.6-15-1-21.6-0.7zM244.6 46.1" fill="#2e3464"/>
  <path d="m244.6 46.1c-2.2 0.5-4.8 1.7-5.8 2.5-2 1.9-9.1 13.6-12.9 21.5-1.5 3.1-4.5 8.5-6.6 12-2.1 3.5-4.9 8.6-6.2 11.4-1.4 2.7-3.5 6.6-4.7 8.6-1.2 2-5 9-8.4 15.5-3.4 6.5-6.7 12.4-7.2 13.1-0.5 0.7-3.4 6.1-6.3 12-4.4 8.7-5.2 11-4.1 12.1 1.8 1.9 26.5 2.9 30.5 1.3 2.1-0.9 4-3.2 6.8-8.4 2.1-4 4.2-8 4.8-8.9 1.9-3.1 4.1-7.2 11.5-21.3 4-7.7 8.1-15.4 9.1-17 1-1.7 3.8-7.1 6.3-12.1 5.2-10.5 8.9-15.4 11.7-15.4 2.3 0 6.3 6.1 13.8 21 3 5.8 5.7 10.9 6.2 11.4 1.6 1.7 1 5.5-1 6.6-1.1 0.6-8.9 1-18.1 1-18.8 0-20.5 0.5-19.5 5.7 1 5.6 6.4 14.6 9.3 15.8 0.9 0.4 11.2 1 22.9 1.4 24.4 0.8 22.6 0.1 29.9 11.8 5.4 8.6 5.8 8.7 23.7 8.7 16.1-0.1 16.5-0.5 10.8-11.6-2.3-4.6-5-9.7-6.1-11.3-1-1.7-3.1-5.5-4.6-8.5-1.5-3-3.8-7.2-5.1-9.3-1.4-2.2-4.4-7.6-6.7-12-2.4-4.5-5.7-10.5-7.3-13.2-1.6-2.8-3.2-5.8-3.6-6.7-0.3-1-2.1-4.2-4-7-1.8-2.9-4.3-7.3-5.5-9.8-3.2-6.6-9.3-15.1-12.3-17.3-1.5-1.1-4.6-2.3-7-2.7-7.3-1.4-30.1-2-34.3-0.9z" fill="#2e3464"/>
  <path d="m426.7 45.9c-4.7 1-6.4 3.3-9.8 13.1-1.4 4.1-3.4 9.5-4.3 12-1 2.5-2.1 6.1-2.5 8-0.4 1.9-1.2 4.4-1.8 5.5-0.6 1.1-3.4 9-6.2 17.5-5.9 17.8-8 22.4-10.4 22.8-1.9 0.4-3.3-2.4-11.2-21.8-1.4-3.6-3.4-8.5-4.5-11-1-2.5-2.8-7-4-10-2.3-5.9-2.6-6.7-5.9-15-1.3-3-3.2-8-4.2-11.1-3-8.5-4.2-9.3-16.2-9.7-17.5-0.7-20.6 1.2-16.3 9.7 1.4 2.9 2.6 6 2.6 6.9 0 0.9 0.7 2.6 1.5 3.6 0.8 1.1 1.5 3 1.5 4.2 0 1.3 0.4 2.5 0.9 2.8 0.4 0.3 1.9 3.4 3.1 6.8 1.3 3.5 2.9 7.2 3.7 8.3 0.7 1.1 1.3 2.7 1.3 3.6 0 1 0.7 3 1.5 4.6 0.8 1.5 2.8 6.4 4.5 10.8 1.7 4.4 3.7 9.2 4.5 10.7 0.8 1.4 1.5 3.5 1.5 4.6 0 1.2 0.4 2.3 0.9 2.7 0.5 0.3 1.5 2.2 2.2 4.3 2.3 7.1 8.1 18.1 11.5 21.6 2.5 2.5 4.6 3.7 8.1 4.3 5.7 0.9 28.7 0.9 32.6-0.1 2.7-0.6 5.6-5.4 7.2-11.6 0.3-1.4 1.2-4.1 2-6 0.7-1.9 2.7-8.2 4.4-14 1.7-5.8 3.6-11.9 4.2-13.5 0.5-1.7 1.9-5.9 3.1-9.5 4.9-15.4 6-18 7.8-18 1.8 0 6 6.7 6 9.4 0 3 15.9 50.8 18 54.4 1.1 1.7 3.8 4.4 6.1 5.9 4.2 2.7 4.6 2.8 20.8 3.1 19.3 0.4 19.1 0.5 23-10.3 1.3-3.3 2.6-6.4 3.1-7 0.4-0.5 1.8-3.8 3-7.3 1.3-3.4 2.7-6.5 3.1-6.8 0.5-0.3 0.9-1.3 0.9-2.4 0-1 1.4-4.5 3-7.8 1.7-3.4 3-6.5 3-7.1 0-0.6 0.7-2.7 1.6-4.8 0.9-2.1 2.2-5.2 2.9-6.8 0.7-1.7 2.6-6.4 4.3-10.5 1.6-4.1 5-12.5 7.5-18.5 7.4-18 7.2-17.4 5.5-19.1-2.1-2.2-7.5-2.7-18.3-1.9-11.4 0.8-12.2 1.4-16.1 11.9-1.4 3.9-3.9 9.9-5.5 13.3-1.6 3.5-2.9 6.8-2.9 7.5 0 1.5-4.6 13.4-10.4 27.1-0.9 2.1-1.6 4.3-1.6 5 0 1.8-7 14.7-7.9 14.7-2.1 0-5.6-8.1-11.6-27-6.3-19.7-7.7-23.7-8.9-26.5-0.7-1.7-2.1-5.7-3.1-9-0.9-3.3-2-6.5-2.5-7-0.4-0.6-1-2.2-1.4-3.7-1.2-5-4.5-6.2-18.5-6.5-6.9-0.1-14.3 0.2-16.4 0.6z" fill="#2e3464"/>
  <path d="M587.3 45.7C566.2 46 565 46.1 564 48.1c-1.3 2.3-1.6 104.7-0.3 106 2.4 2.3 28.7 2.8 31 0.6 0.4-0.5 1-18.6 1.3-40.4 0.5-37.6 0.6-39.5 2.4-40.9 1.6-1.1 7.8-1.4 33.2-1.4h31.3l2.7 3.5c2.3 3 2.6 4.5 2.7 10.9 0 8.1-0.5 9.3-5.9 12.6-3 1.9-5.8 2.2-31.1 3.1-15.3 0.6-28.2 1.4-28.7 1.9-1.6 1.6 6.5 19.2 9.8 21.6 1.6 1.1 6.4 1.4 21.1 1.4 22.2 0 25 0.4 29 3.6 2.9 2.3 3 2.6 3.3 12.9 0.4 10.4 0.4 10.6 3 11.7 2.9 1.2 23.5 1.5 27 0.4 2.9-1 4-7.2 3.1-18.2-0.9-10.6-3.3-16.3-8.5-19.5-3.2-1.9-5.4-4.6-5.4-6.6 0-0.5 1.6-1.7 3.6-2.8 7.9-4.3 11.3-13 11.4-29.3 0-16-4.2-25-14.2-30.2-3.7-1.9-6.6-2.3-25.3-3.1-11.5-0.4-27.7-0.7-36-0.6-8.2 0.1-25 0.3-37.2 0.4z" fill="#2e3464"/>
  <path d="m746.5 45.9c-19.4 0.6-20.1 0.7-24 3.2-2.2 1.5-5.2 4.1-6.6 5.8-3.3 3.9-3.6 7.6-4.5 47.1-0.8 35.5-0.1 41.2 5.9 47.7 7.2 7.9 3.3 7.4 63 6.7 32.4-0.4 53.7-1.1 54.5-1.7 0.8-0.6 1.2-4 1.2-10.3 0-7.9-0.3-9.5-1.7-10.2-1-0.5-19.8-1.2-41.8-1.6-22-0.3-41.4-0.8-43.2-1.2-3.1-0.6-3.2-0.8-4-7.3-1.3-10.8-0.8-50.8 0.7-52.6 1.1-1.3 5.4-1.5 28.9-1.5 31.4-0.1 56.8-1.3 58.5-3 0.6-0.6 1.1-4.7 1.1-9.6 0-7-0.3-8.8-1.7-9.8-3.2-2.4-38.4-3-86.3-1.7z" fill="#2e3464"/>
  <path d="m856.5 45.9-8 0.6-0.6 23.5c-0.3 12.9-0.3 37.3-0.1 54.2 0.5 30.1 0.6 30.7 2.6 31.2 3.8 1 27.4 0.7 28.1-0.4 0.4-0.6 0.6-16.3 0.5-35-0.1-33.8 0.6-42 3.3-42 1.5 0 5.3 4 11.2 11.5 2.2 2.7 4.4 5.5 5 6.1 0.5 0.6 2.8 3.5 5 6.3 2.2 2.9 5.4 6.9 7.1 8.9 1.6 2 5.2 6.6 8 10.2 4.2 5.5 10.9 13.9 17.2 21.5 1 1.1 2.6 3.2 3.8 4.7 4.6 6.1 8.1 7.5 22 8.7 12.9 1.1 33.1 0.6 35.6-1 1-0.7 1.3-11 1.4-53.1 0.1-31.3-0.2-53-0.8-54.1-0.8-1.6-2.3-1.7-15.1-1.5l-14.2 0.3-0.8 36.5c-0.4 20.1-0.9 37.1-1.2 37.7-0.9 2.5-4.4 1.2-7.6-2.8-1.8-2.3-4.8-5.9-6.7-8-2-2.1-4.2-5-5.1-6.3-0.9-1.3-4.3-5.7-7.6-9.7-3.3-4-10.8-13.2-16.6-20.5-12.8-16-18.6-22.5-21.9-24.6-4.6-3-24.8-4.3-44.5-2.9z" fill="#2e3464"/>
  <path d="m1054.6 46c-10.2 0.6-17.2 1.4-19.7 2.4-2.2 0.9-4.9 1.6-6 1.6-1.3 0-4.6 2.5-8.3 6.2-9.2 9.4-9.9 12.4-10.4 42.3-0.4 27.1 0.6 34.5 6 42.5 3.2 4.8 10.7 11 13.3 11 0.9 0 3 0.7 4.8 1.6 2.7 1.5 8.4 1.7 45.2 1.8 38.8 0.1 42.7-0.1 50.4-1.9 7.5-1.8 9-2.5 13.2-6.6 3.9-3.8 4.9-5.5 5.4-9.3 0.4-2.6 0.4-5.1-0.1-5.6-0.5-0.5-22.4-1.3-48.6-1.7l-47.6-0.8-2.7-2.5c-1.4-1.3-3.5-4.3-4.6-6.5-1.9-3.8-2-5.6-1.7-22.1 0.3-20.1 0.7-21.1 7.3-24.7 3.9-2.1 5.4-2.2 49.6-2.8 25-0.3 46.1-0.9 46.7-1.3 1.7-1 1.5-6.1-0.3-7.6-0.8-0.7-1.5-2-1.5-2.9-0.1-4.6-12.2-11.1-22.9-12.2-12.4-1.3-50.4-1.8-67.5-0.9z" fill="#2e3464"/>
  <path d="m1197.8 46-23.7 0.8-4.8 2.9c-2.8 1.7-5.7 4.6-7 6.9-2.2 3.9-2.3 4.3-2.3 46v42.2l6.5 6.1 6.6 6.1 35.7-0.1c19.6 0 43.8-0.4 53.6-0.8 20.5-0.9 20.6-0.9 20.6-9.7 0-7.2-0.9-11.1-2.9-12-0.9-0.4-19.6-1-41.6-1.5-22.5-0.4-41.1-1.2-42.6-1.7-2.5-1-2.6-1.2-3.3-14.4-0.9-15.4-0.9-15.1 0-32.5l0.6-13.2 4.2-0.5c2.2-0.3 21.3-0.7 42.2-0.8 30.3-0.3 38.5-0.6 39.8-1.7 1.3-1.1 1.6-3.2 1.6-10.2 0-12.2 0.5-11.9-18.8-11.9-8.6 0-21.3-0.2-28.2-0.4-6.9-0.2-23.2-0.1-36.2 0.4z" fill="#2e3464"/>
  <path d="m755.4 90.9c-6.4 1.6-6.6 2.4-2.4 10.8 5.1 10.2 2.2 9.5 39.4 9.1 21.8-0.2 32.9-0.7 33.6-1.4 0.8-0.8 0.1-3.2-2.4-8.7-2.6-5.8-4.2-8-6.3-8.9-3.3-1.3-57.1-2.2-61.9-0.9z" fill="#2e3464"/>
  <path d="m1211.3 90.7c-15.2 0.5-15.5 0.8-11.3 9.5 5.1 11 2.4 10.3 39.1 10.3 20.7 0 32.2-0.4 32.8-1 2-2-3-13.7-7.2-16.8-2.1-1.6-4.8-1.9-21.8-2.1-10.7-0.2-24.9-0.1-31.6 0.1z" fill="#2e3464"/>
  <path d="m95 208.9c-19.7 0.7-22.2 1.6-28.7 10.5-2.3 3-2.3 3.2-2.2 37.5 0 19 0.4 37.9 0.8 42 0.7 7 0.9 7.5 5.2 11.6l4.5 4.3 29.5 0.7c16.2 0.4 40.2 0.3 53.4-0.1l24-0.9 0.9-5.8c1.2-8.1-0.1-13.9-3.4-14.8-1.4-0.4-20.1-0.7-41.6-0.8-36.5-0.1-39.2-0.2-40.7-1.9-1.4-1.6-1.7-4.4-1.7-17.9 0-8.9 0.3-16.9 0.6-17.8 0.6-1.4 0.9-1.3 3 0.6 1.3 1.2 2.4 2.6 2.4 3.1 0 0.5 1.6 3.4 3.5 6.4l3.6 5.6 30.7-0.4c16.9-0.2 31.5-0.8 32.5-1.2 2.3-1.1 2.2-2.4-1.2-8.7-5.1-9.5-4.6-9.4-41-9.1-22.5 0.2-31.7-0.1-32.7-0.9-1.8-1.5-1.9-15.2-0.1-16.7 0.7-0.6 17.7-1.5 41.7-2.2 25-0.7 41-1.5 41.7-2.2 1.7-1.4 1.8-16.8 0-19.1-1.1-1.6-4.4-1.8-34.7-2.1-18.4-0.2-40.9-0.1-50 0.3z" fill="#2e3464"/>
  <path d="m238 209c-25.9 0.7-31.2 1.9-38.2 8.7-7.8 7.5-9.4 12.9-10.7 35.3-0.8 12.3-0.6 18.3 0.6 29 1.4 12.1 1.9 14 4.8 18.6 5.8 9.1 13.8 13.4 25.4 13.5 4.2 0 10.3 0.4 13.6 0.9 3.3 0.4 20.9 0.3 39-0.1 33.4-0.9 42.8-2 48-5.6 2.7-1.8 4-1.7 8.5 1.2 4.6 2.9 7.8 3.2 8.7 0.7 0.4-0.9 2-3.6 3.5-5.9 4.1-6 4.6-9.6 1.7-12.1-1.3-1.1-3.7-3.1-5.3-4.4l-2.9-2.5-0.2-22.4c-0.3-36-3.2-44.2-18.5-51.5l-6.5-3.1-24.5-0.5c-13.5-0.2-34.6-0.1-47 0.2zm55.8 25.9c6 3.1 7.1 5 8.4 14.2 1.4 10.4 0.6 15.9-2.3 15.9-2.4 0-12-5.2-19.4-10.4-7.4-5.3-9.2-4.9-14.6 3-2.4 3.6-4.8 7.2-5.4 7.9-1.5 2.2 4.9 8.1 13.5 12.4 11 5.4 13.1 7.1 12.8 9.5-0.3 2-1 2.1-20.3 2.7-25.4 0.9-36.7 0-39.9-3-4.3-4-5.8-12-5.4-28.2 0.4-17.1 1.6-20.6 8.1-23.8 3.9-2 5.9-2.1 32.5-2.1 25.8 0 28.6 0.2 32 1.9z" fill="#2e3464"/>
  <path d="m355.1 208.8c-2.9 0.6-3.6 1.3-4.4 4.1-0.4 1.9-0.7 19.2-0.4 38.5 0.4 36.2 0.5 37.3 4.8 47.1 2.6 6 6.1 9.5 12.4 12.4 5.7 2.7 7.7 3.1 22.6 4 11.2 0.7 24.5 0.7 41.9 0 24.8-1 25.7-1.1 32.6-4 12.6-5.3 16.9-11.8 18.5-28.7 1.2-11.8 0.7-70.1-0.6-72.2-1-1.5-27.2-1.3-28.2 0.2-0.4 0.7-1 16.9-1.3 36-0.5 33-0.6 34.8-2.6 37.4-1.1 1.5-3.3 3.7-4.8 4.8-2.6 2-4 2.1-28.7 2.1h-26l-4.5-4.7-4.4-4.7-0.1-9.8c-0.2-19.8-1.5-61.2-1.9-61.6-0.9-0.8-21.4-1.5-24.9-0.9z" fill="#2e3464"/>
  <path d="m505.8 208.7c-3.6 0.3-6.1 1-7 2-1 1.3-1.3 11.5-1.3 52.2v50.6l16.1 0.3 16.2 0.2 0.7-19.5c0.4-10.7 0.6-33.6 0.3-51-0.3-26-0.6-31.7-1.8-32.9-1.6-1.5-13.8-2.5-23.2-1.9z" fill="#2e3464"/>
  <path d="m558.2 208.9c-8.4 0.4-11.5 1-12.2 2.1-0.6 0.9-1 22.1-1 52.1v50.6l14.3 0.5c7.8 0.3 14.5 0.3 15 0.1 0.4-0.2 0.7-9.5 0.8-20.6 0-20.7 0.9-26.9 3.9-27.5 1-0.2 2.2 1.2 3.3 4 1 2.4 3.1 7.1 4.8 10.6l2.9 6.3 31.3-0.3c35.1-0.3 34.3-0.2 42.1-8.3 7-7.3 10.8-23.6 8.7-37.5-2.2-14-7-23.1-14.6-27.1-8.4-4.5-12.3-4.9-51-5.3-20.3-0.2-42.1-0.1-48.3 0.3zm75.6 26c4.4 1.7 6.5 6.2 6.6 13.7 0.1 5.1-0.3 6.7-2.7 10.1l-2.8 4.1-16.7 0.4c-9.2 0.2-21.9 0.2-28.3 0-14.1-0.5-14.1-0.5-14.7-14.3-0.4-8.9-0.2-9.9 1.9-12.9l2.4-3.2 25.5 0.4c17.6 0.3 26.5 0.8 28.8 1.7z" fill="#2e3464"/>
  <path d="m825.9 208.9c-8.2 0.5-10.2 1-14 3.4-4.4 2.8-9.2 9.1-13.7 17.7-1.2 2.5-3.3 6.3-4.6 8.5-1.3 2.2-3.7 6.6-5.5 9.7-1.7 3.2-4.5 8.4-6.2 11.5-1.8 3.2-4 7.3-5 9.1-0.9 1.8-2.3 3.9-2.9 4.7-1.9 2.2-5.8 1.8-7.3-0.8-5.3-8.5-7.6-12.5-12.9-22.2-3.4-6.1-8.1-14.9-10.5-19.6-10.9-21-13-22.1-41.1-21.7l-19.7 0.3-0.3 52.2-0.2 52.2 13.2 0.3c9.9 0.2 13.5 0 14.5-1 0.7-0.8 1.1-1.8 0.8-2.3-0.4-0.5-0.1-15.8 0.5-34.1 0.9-27 1.4-33.6 2.6-34.8 1.3-1.3 1.7-1.2 3.4 1 1.1 1.4 2.7 4.1 3.7 6 1 1.9 3.7 6.7 6.1 10.6 2.3 3.9 4.2 7.4 4.2 7.7 0 0.4 1.9 3.9 4.3 7.9 7.9 13.4 13.7 23.7 13.7 24.7 0 0.4 0.7 1.4 1.5 2.1 0.8 0.7 1.5 1.9 1.5 2.7 0 0.8 1.4 3.2 3 5.3 2.8 3.5 3.6 3.9 9.3 4.5 3.4 0.3 9.1 0.3 12.6-0.2 6.7-0.8 7.9-1.8 11.1-9.2 0.6-1.3 1.9-3.6 2.9-5 1.1-1.5 3-4.7 4.3-7.1 1.3-2.5 4.3-7.7 6.6-11.7 2.3-3.9 4.2-7.4 4.2-7.8 0-0.3 1.4-2.6 3-5 1.7-2.4 3-4.6 3-4.9 0-0.4 2-4 4.5-8 2.5-4.1 4.5-7.7 4.5-8.1 0-1.7 5.5-7.5 7.1-7.5 1.8 0 1.9 1.4 1.9 36.4 0 27.9 0.3 36.6 1.3 37.3 0.7 0.6 7 0.8 15 0.5l13.7-0.4v-51.2c0-28.1-0.4-51.6-0.8-52.2-0.9-1.4-20.4-2.3-33.3-1.5z" fill="#2e3464"/>
  <path d="m1123.3 208.8c-3.1 0.2-5.7 0.9-6.5 1.9-1 1.2-1.4 9.5-1.8 36.4-0.3 19.1-0.8 35-1.2 35.4-1.1 1.2-4.4-1.3-8.9-6.6-9.6-11.4-11.6-13.8-16.4-19.9-2.7-3.4-5.5-7.1-6.1-8.2-0.6-1-1.8-2.4-2.6-3.1-0.9-0.7-4.4-4.8-7.8-9.2-21.2-27.1-20.1-26.5-48.8-26.5-16.5 0-21.2 0.3-22.1 1.4-0.8 0.9-1.3 16.7-1.8 51.8-0.6 49.1-0.6 50.6 1.3 51.4 1 0.5 8 0.8 15.5 0.6l13.6-0.3 0.7-35c0.4-19.3 1-35.7 1.3-36.5 1-2.7 3.9-1.4 7.8 3.7 5.4 6.9 12.7 15.9 14.5 18 0.8 0.9 7.4 9.2 14.5 18.5 7.2 9.2 16.2 20.1 20.2 24.1l7.1 7.3 25.4-0.2 25.3-0.3 0.3-44c0.3-42-0.1-56.8-1.6-59.1-0.8-1.2-13.8-2.2-21.9-1.6z" fill="#2e3464"/>
  <path d="m1181.6 208.8c-16.3 0.1-25.4 0.6-26.3 1.3-2.1 1.8-1.8 20.2 0.4 22 1.3 1.1 11.4 1.5 54.2 1.7 28.9 0.2 56.4-0.1 61.1-0.5l8.5-0.8 0.3-10.5c0.1-5.8-0.1-11-0.5-11.6-0.9-1.2-54.5-2.1-97.7-1.6z" fill="#2e3464"/>
  <path d="m884 210.1c-3.2 1.3-7.7 5.6-9.8 9.4-1.5 2.6-1.7 7.9-2 41.9-0.3 43-0.4 42.3 6.1 49.1l3.8 4 53.2-0.4c29.3-0.2 53.5-0.5 54-0.8 1.3-0.8 0.8-18-0.5-19.1-0.8-0.6-16.5-1.1-40.8-1.4-39.4-0.5-43-0.8-45.1-4-0.9-1.4-0.2-53.9 0.8-54.8 2.2-1.9 16.3-3 40.4-3.1 14.5-0.1 30.2-0.4 34.9-0.7l8.5-0.7 0.3-10.3 0.3-10.2-50.8 0.1c-31.2 0-51.8 0.4-53.3 1z" fill="#2e3464"/>
  <path d="m1202.5 240.1c-0.4 0.6-0.7 17-0.8 36.5 0 29.4 0.2 35.7 1.4 36.9 1.9 1.9 27.3 3.4 28.3 1.7 0.6-1 0.8-20.7 0.6-66.3 0-4-1.7-5.2-8.7-6.4-2.1-0.4-5.7-1.3-8.1-2.1-5.1-1.7-11.8-1.8-12.7-0.3z" fill="#2e3464"/>
  <path d="m909.3 252.6c-1.7 0.8-1.6 4.4 0.2 6.8 0.8 1.1 1.5 2.7 1.5 3.5 0 0.9 1.1 2.9 2.4 4.6l2.4 3 30 0.3c31.1 0.4 34.2 0.1 34.2-3.7 0-2.1-4.4-10.9-6.6-13.1-1.2-1.3-6.4-1.5-32.2-1.7-16.9-0.1-31.3 0-31.9 0.3z" fill="#2e3464"/>
         <polyline transform="translate(80 -25) rotate(90)" points="0,0 25,80 50,0" fill="#4B55A3" >
 <animateMotion
   id="an"
   dur="7s"
   repeatCount="1"
   rotate="auto-reverse"
   begin="0s"
   fill="freeze"
   restart="whenNotActive">
       <mpath xlink:href="#border"/>
</animateMotion> 
 <!--   <set attributeName="fill-opacity" to="0" begin="an.end"  />  -->
</polyline>	
</g>
  </svg>
like image 113
Alexandr_TT Avatar answered Feb 05 '23 07:02

Alexandr_TT


You can't animate a marker using a stroke-dash-array. The position of the "draw/no-draw" array is being slid along the path, but the path itself doesn't move, which means the marker doesn't move.

like image 22
Michael Mullany Avatar answered Feb 05 '23 05:02

Michael Mullany