Make svg path animation repeat

Question

I have an svg animation element from this project with the following contents:

<svg id="z20013" class="acjk" version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
<![CDATA[
@keyframes zk {
        to {
                stroke-dashoffset:0;
        }
}
svg.acjk path[clip-path] {
        --t:0.8s;
        animation:zk var(--t) linear forwards var(--d);
        stroke-dasharray:3337;
        stroke-dashoffset:3339;
        stroke-width:128;
        stroke-linecap:round;
        fill:none;
        stroke:#000;
}
svg.acjk path[id] {fill:#ccc;}
]]>
</style>
<path id="z20013d1" d="M254 304C247 299 236 295 209 291C200 289 188 291 185 295C180 300 182 307 189 320C215 368 237 433 254 516C258 540 267 560 282 576C296 591 304 593 307 582C308 575 311 566 310 557C307 532 307 532 306 519C303 495 273 372 267 344C264 330 265 312 254 304Z"/>
<path id="z20013d2" d="M752 475C760 450 769 426 777 402C787 370 805 343 828 322C845 305 841 291 821 276C801 261 782 246 762 234C749 225 734 225 717 232C690 241 613 253 535 264C496 269 496 269 476 272C386 284 289 299 254 304C240 307 253 344 267 344C271 344 278 343 286 341C362 322 425 313 476 307C515 302 515 302 534 300C580 294 624 287 687 284C699 283 719 286 724 293C734 308 723 366 693 465C689 485 745 494 752 475Z"/>
<path id="z20013d3" d="M530 530C596 522 674 518 764 514C772 513 776 509 778 503C778 497 770 487 752 475C735 465 713 461 693 465C635 475 580 483 530 491C493 496 493 496 475 499C415 507 358 513 306 519C294 521 297 557 310 557C313 557 317 557 321 557C343 555 444 539 475 536C512 532 512 532 530 530Z"/>
<path id="z20013d4" d="M475 536C475 768 468 879 488 916C495 928 505 924 512 910C523 881 530 755 530 530C530 504 530 504 530 491C530 458 532 354 534 300C535 276 535 276 535 264C537 193 545 146 559 122C564 111 559 100 545 89C528 76 505 64 475 57C461 53 450 58 441 67C435 72 434 79 444 88C462 105 474 124 475 147C476 179 476 221 476 272C476 295 476 295 476 307C476 365 475 464 475 499C475 524 475 524 475 536Z"/>
<defs>
        <clipPath id="z20013c1"><use xlink:href="#z20013d1"/></clipPath>
        <clipPath id="z20013c2"><use xlink:href="#z20013d2"/></clipPath>
        <clipPath id="z20013c3"><use xlink:href="#z20013d3"/></clipPath>
        <clipPath id="z20013c4"><use xlink:href="#z20013d4"/></clipPath>
</defs>
<path style="--d:1s;" pathLength="3333" clip-path="url(#z20013c1)" d="M190 298L232 337L295 584"/>
<path style="--d:2s;" pathLength="3333" clip-path="url(#z20013c2)" d="M262 311L738 260L784 305L716 468"/>
<path style="--d:3s;" pathLength="3333" clip-path="url(#z20013c3)" d="M314 526L699 491L773 502"/>
<path style="--d:4s;" pathLength="3333" clip-path="url(#z20013c4)" d="M445 72L515 120L497 914"/>
</svg>

I embed this animation in another page, using something like the following:

<img src="svgsJa/20013.svg"></img>

This works, but I would like to make the stroke order animation to start over one second after completion. This means that the entire image needs to turn gray again, and then start the animation.

I've tried adding infinite to the animation attribute in the CSS, but that makes all of the stroke animations repeat independently of each other, which looks quite chaotic. How can I make the entire stroke order sequence repeat. Please explain how your solution works.

Answer 1

Although it must be possible to set the animation within the SVG so that the desired result is obtained, I found it easier to use JS and CSS to animate the clip-paths, stop animating them, start animating them again and so on.

This may not be acceptable as it puts the svg within the page, but in case it's useful here is the snippet:

 function finished() { clipPaths.forEach(clipPath => { clipPath.style.animation = 'none'; // go back to all gray again }); setTimeout(start, 1000); //start again } function start() { clipPaths.forEach(clipPath => { clipPath.style.animation = 'zk var(--t) linear forwards var(--d)'; }); setTimeout(finished, 5800); // the time to finish all the painting plus 1 second } const clipPaths = document.querySelectorAll('svg.acjk path[clip-path]'); start();

 <svg id="z20013" class="acjk" version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <style> <![CDATA[ @keyframes zk { to { stroke-dashoffset:0; } } svg.acjk path[clip-path] { --t:0.8s; stroke-dasharray:3337; stroke-dashoffset:3339; stroke-width:128; stroke-linecap:round; fill:none; stroke:#000; } svg.acjk path[id] {fill:#ccc;} ]]> </style> <path id="z20013d1" d="M254 304C247 299 236 295 209 291C200 289 188 291 185 295C180 300 182 307 189 320C215 368 237 433 254 516C258 540 267 560 282 576C296 591 304 593 307 582C308 575 311 566 310 557C307 532 307 532 306 519C303 495 273 372 267 344C264 330 265 312 254 304Z"/> <path id="z20013d2" d="M752 475C760 450 769 426 777 402C787 370 805 343 828 322C845 305 841 291 821 276C801 261 782 246 762 234C749 225 734 225 717 232C690 241 613 253 535 264C496 269 496 269 476 272C386 284 289 299 254 304C240 307 253 344 267 344C271 344 278 343 286 341C362 322 425 313 476 307C515 302 515 302 534 300C580 294 624 287 687 284C699 283 719 286 724 293C734 308 723 366 693 465C689 485 745 494 752 475Z"/> <path id="z20013d3" d="M530 530C596 522 674 518 764 514C772 513 776 509 778 503C778 497 770 487 752 475C735 465 713 461 693 465C635 475 580 483 530 491C493 496 493 496 475 499C415 507 358 513 306 519C294 521 297 557 310 557C313 557 317 557 321 557C343 555 444 539 475 536C512 532 512 532 530 530Z"/> <path id="z20013d4" d="M475 536C475 768 468 879 488 916C495 928 505 924 512 910C523 881 530 755 530 530C530 504 530 504 530 491C530 458 532 354 534 300C535 276 535 276 535 264C537 193 545 146 559 122C564 111 559 100 545 89C528 76 505 64 475 57C461 53 450 58 441 67C435 72 434 79 444 88C462 105 474 124 475 147C476 179 476 221 476 272C476 295 476 295 476 307C476 365 475 464 475 499C475 524 475 524 475 536Z"/> <defs> <clipPath id="z20013c1"><use xlink:href="#z20013d1"/></clipPath> <clipPath id="z20013c2"><use xlink:href="#z20013d2"/></clipPath> <clipPath id="z20013c3"><use xlink:href="#z20013d3"/></clipPath> <clipPath id="z20013c4"><use xlink:href="#z20013d4"/></clipPath> </defs> <path style="--d:1s;" pathLength="3333" clip-path="url(#z20013c1)" d="M190 298L232 337L295 584"/> <path style="--d:2s;" pathLength="3333" clip-path="url(#z20013c2)" d="M262 311L738 260L784 305L716 468"/> <path style="--d:3s;" pathLength="3333" clip-path="url(#z20013c3)" d="M314 526L699 491L773 502"/> <path style="--d:4s;" pathLength="3333" clip-path="url(#z20013c4)" d="M445 72L515 120L497 914"/> </svg>

Answer 2

This answer is just improving on A Haworth's answer, as JavaScript does make this question easier when resetting several path animations. My solution simply makes the timing more dynamic, since the animation time will be dependent on how many strokes the character will have. The following HTML sample uses a 13-stroke character.

 const undraw = () => { svgPaths.forEach(svgPath => { svgPath.style.animation = 'none'; // Resets lines to gray. }); setTimeout(draw, 1000); // Start drawing black lines again. } const draw = () => { svgPaths.forEach(svgPath => { svgPath.style.animation = ''; // Defaults animation back to CSS style definition. }); setTimeout(undraw, finalTiming); // Resets the draw after the time, dynamic to each SVG. } // Get all path elements. const svgPaths = document.querySelectorAll('svg path[clip-path]'); // Get the animation delay from the last path in milliseconds and add one second. let finalPath = svgPaths[svgPaths.length-1]; let finalTiming = parseInt(window.getComputedStyle(finalPath).animationDelay.split('s')[0]) * 1000 + 1800; draw(); // Start the initial drawing.

 <svg id="z138965" class="acjk" version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <style> <![CDATA[ @keyframes zk { to { stroke-dashoffset:0; } } svg.acjk path[clip-path] { --t:0.8s; animation:zk var(--t) linear forwards var(--d); stroke-dasharray:3337; stroke-dashoffset:3339; stroke-width:128; stroke-linecap:round; fill:none; stroke:#000; } svg.acjk path[id] {fill:#ccc;} ]]> </style> <path id="z138965d1" d="M531 264C535 218 544 170 558 120C559 113 555 104 543 96C523 82 504 77 490 74C479 71 472 72 468 78C463 82 462 90 468 99C479 115 487 172 489 270C489 284 531 278 531 264Z"/> <path id="z138965d2" d="M696 245C637 249 582 256 531 264C503 268 503 268 489 270C438 277 391 286 347 298C334 301 331 294 334 280C337 262 340 244 345 226C348 211 347 198 341 189C333 176 320 166 305 157C298 152 291 150 285 152C278 154 276 162 281 174C290 202 292 229 287 256C281 281 274 300 263 311C251 321 246 332 251 341C256 351 266 359 277 367C285 373 293 374 300 368C326 341 419 315 581 289C631 280 669 276 693 278C704 278 707 245 696 245Z"/> <path id="z138965d3" d="M693 278C693 294 696 307 701 319C705 330 711 333 721 327C737 315 749 278 769 222C778 194 790 181 793 178C800 169 801 158 795 149C785 135 769 121 749 106C741 99 732 98 724 101C718 102 712 109 716 118C718 124 727 142 724 177C721 203 707 226 696 245C690 254 693 267 693 278Z"/> <path id="z138965d4" d="M579 445C621 436 660 426 698 420C714 417 719 411 713 402C706 392 693 384 675 382C646 377 616 392 577 401C542 408 542 408 524 412C475 422 351 441 192 465C155 468 160 485 205 495C217 495 252 492 269 491C366 481 503 460 534 454C564 448 564 448 579 445Z"/> <path id="z138965d5" d="M205 495C223 525 228 573 205 663C186 732 144 801 69 870C62 876 62 881 70 881C106 878 144 854 181 807C236 736 249 677 267 599C271 577 276 545 282 527C286 509 279 500 269 491C254 476 195 476 205 495Z"/> <path id="z138965d6" d="M422 563C452 554 511 534 513 533C517 529 518 523 515 519C510 512 500 507 485 506C468 504 451 508 437 515C417 523 398 532 378 538C355 545 329 549 304 555C284 558 282 566 297 574C318 586 352 583 388 573C411 566 411 566 422 563Z"/> <path id="z138965d7" d="M422 653C452 644 511 624 513 623C517 619 518 613 515 609C510 602 500 597 485 596C468 594 451 598 437 605C417 613 398 622 378 628C355 635 329 639 304 645C284 648 282 656 297 664C318 676 352 673 388 663C411 656 411 656 422 653Z"/> <path id="z138965d8" d="M393 893C379 880 368 864 356 850C347 839 337 827 338 824C338 821 342 820 348 820C348 820 382 825 391 813C394 807 393 803 394 791C396 713 399 689 388 663C384 652 414 645 422 653C434 663 438 671 438 680C437 796 442 843 432 859C419 878 402 901 393 893Z"/> <path id="z138965d9" d="M301 709C302 734 292 760 277 792C251 844 268 847 305 803C320 786 342 753 357 737C364 730 350 717 338 709C323 698 300 688 301 709Z"/> <path id="z138965d10" d="M509 759C514 768 519 776 526 780C533 782 538 782 544 776C551 768 555 749 550 731C543 705 532 697 510 684C501 678 485 674 483 675C479 675 474 679 474 687C472 702 493 730 509 759Z"/> <path id="z138965d11" d="M664 755C757 894 847 975 933 986C951 988 960 971 955 948C949 924 944 862 944 758C943 749 942 743 938 743C934 742 931 747 929 756C921 780 912 804 905 828C894 858 883 875 873 875C857 875 833 859 800 832C766 804 731 769 701 724C699 722 698 721 697 719C686 703 676 687 667 671C608 573 579 497 579 443C578 428 577 413 577 399C577 382 580 367 584 355C587 341 575 324 548 312C520 299 485 297 487 314C489 341 516 367 524 412C526 426 530 440 534 454C557 548 592 634 637 711C645 725 654 740 664 755Z"/> <path id="z138965d12" d="M637 711C595 754 548 791 501 826C494 830 494 835 499 837C517 844 557 826 620 787C635 776 651 767 664 755C675 743 686 731 697 719C697 718 697 718 698 718C722 691 745 654 770 607C777 592 786 578 796 566C801 559 803 552 800 546C796 538 784 527 765 515C750 505 740 500 734 502C724 504 719 510 720 520C721 566 703 616 667 671C657 684 648 698 637 711Z"/> <path id="z138965d13" d="M758 377C775 388 792 402 810 417C819 424 828 427 839 426C845 425 850 420 853 412C855 402 852 388 845 370C838 353 806 339 749 332C738 330 731 331 728 333C724 335 723 341 726 349C727 355 739 364 758 377Z"/> <defs> <clipPath id="z138965c1"><use xlink:href="#z138965d1"/></clipPath> <clipPath id="z138965c2"><use xlink:href="#z138965d2"/></clipPath> <clipPath id="z138965c3"><use xlink:href="#z138965d3"/></clipPath> <clipPath id="z138965c4"><use xlink:href="#z138965d4"/></clipPath> <clipPath id="z138965c5"><use xlink:href="#z138965d5"/></clipPath> <clipPath id="z138965c6"><use xlink:href="#z138965d6"/></clipPath> <clipPath id="z138965c7"><use xlink:href="#z138965d7"/></clipPath> <clipPath id="z138965c8"><use xlink:href="#z138965d8"/></clipPath> <clipPath id="z138965c9"><use xlink:href="#z138965d9"/></clipPath> <clipPath id="z138965c10"><use xlink:href="#z138965d10"/></clipPath> <clipPath id="z138965c11"><use xlink:href="#z138965d11"/></clipPath> <clipPath id="z138965c12"><use xlink:href="#z138965d12"/></clipPath> <clipPath id="z138965c13"><use xlink:href="#z138965d13"/></clipPath> </defs> <path style="--d:1s;" pathLength="3333" clip-path="url(#z138965c1)" d="M 473,84 519,130 503,267"/> <path style="--d:2s;" pathLength="3333" clip-path="url(#z138965c2)" d="M 288,161 316,199 298,302 319,333 439,296 692,265"/> <path style="--d:3s;" pathLength="3333" clip-path="url(#z138965c3)" d="M 724,107 761,165 713,325"/> <path style="--d:4s;" pathLength="3333" clip-path="url(#z138965c4)" d="M 178,476 709,405"/> <path style="--d:5s;" pathLength="3333" clip-path="url(#z138965c5)" d="M 221,494 253,536 222,696 169,792 70,874"/> <path style="--d:6s;" pathLength="3333" clip-path="url(#z138965c6)" d="M 296,564 513,525"/> <path style="--d:7s;" pathLength="3333" clip-path="url(#z138965c7)" d="M 296,654 513,615"/> <path style="--d:8s;" pathLength="3333" clip-path="url(#z138965c8)" d="M 416,658 408,838 387,854 344,827"/> <path style="--d:9s;" pathLength="3333" clip-path="url(#z138965c9)" d="M 333,706 298,811"/> <path style="--d:10s;" pathLength="3333" clip-path="url(#z138965c10)" d="M 485,680 536,778"/> <path style="--d:11s;" pathLength="3333" clip-path="url(#z138965c11)" d="M497 317L548 354L562 482L626 645L763 839L858 913L923 932L936 750"/> <path style="--d:12s;" pathLength="3333" clip-path="url(#z138965c12)" d="M731 513L757 561L698 674L623 757L506 832"/> <path style="--d:13s;" pathLength="3333" clip-path="url(#z138965c13)" d="M732 337L848 415"/> </svg>