hanzi-writer/src/test/resources/shuai.svg

<svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="300" height="300" style="border: 1px solid rgb(204, 204, 204); background-color: rgb(238, 238, 238);">  <g stroke="lightgray" stroke-dasharray="1,1" stroke-width="1" transform="scale(4, 4)">
    <line x1="0" y1="0" x2="256" y2="256"></line>
    <line x1="256" y1="0" x2="0" y2="256"></line>
    <line x1="128" y1="0" x2="128" y2="256"></line>
    <line x1="0" y1="128" x2="256" y2="128"></line>
</g>

    <g transform="scale(1, -1) translate(0, -900)">

        <style type="text/css">        text {
            font-family: Helvetica;
            font-size: 50px;
            fill: #ffffff;
            paint-order: stroke;
            stroke: #000000;
            stroke-width: 4px;
            stroke-linecap: butt;
            stroke-linejoin: miter;
            font-weight: 800;
            }      .median-stroke {
            fill: none;
            stroke: rgb(15,15,15, 0.5);
            stroke-width: 2px;
            opacity: 1;
            }        @keyframes keyframes0 {
            from {
            stroke: rgb(187, 68, 68);
            stroke-dashoffset: 600;
            stroke-width: 128;
            }
            60% {
            animation-timing-function: step-end;
            stroke: rgb(68, 68, 255);
            stroke-dashoffset: 0;
            stroke-width: 128;
            }
            to {
            stroke: rgb(85, 85, 85);
            stroke-width: 1024;
            }
            }
            #animation-0.animated {
            animation: keyframes0 0.9s both;
            animation-delay: 0.0s;
            animation-timing-function: linear;
            }

            @keyframes keyframes1 {
            from {
            stroke: rgb(187, 68, 68);
            stroke-dashoffset: 1105;
            stroke-width: 128;
            }
            60% {
            animation-timing-function: step-end;
            stroke: rgb(68, 68, 255);
            stroke-dashoffset: 0;
            stroke-width: 128;
            }
            to {
            stroke: rgb(85, 85, 85);
            stroke-width: 1024;
            }
            }
            #animation-1.animated {
            animation: keyframes1 0.9s both;
            animation-delay: 0.9s;
            animation-timing-function: linear;
            }

            @keyframes keyframes2 {
            from {
            stroke: rgb(187, 68, 68);
            stroke-dashoffset: 565;
            stroke-width: 128;
            }
            60% {
            animation-timing-function: step-end;
            stroke: rgb(68, 68, 255);
            stroke-dashoffset: 0;
            stroke-width: 128;
            }
            to {
            stroke: rgb(85, 85, 85);
            stroke-width: 1024;
            }
            }
            #animation-2.animated {
            animation: keyframes2 0.9s both;
            animation-delay: 1.8s;
            animation-timing-function: linear;
            }

            @keyframes keyframes3 {
            from {
            stroke: rgb(187, 68, 68);
            stroke-dashoffset: 961;
            stroke-width: 128;
            }
            60% {
            animation-timing-function: step-end;
            stroke: rgb(68, 68, 255);
            stroke-dashoffset: 0;
            stroke-width: 128;
            }
            to {
            stroke: rgb(85, 85, 85);
            stroke-width: 1024;
            }
            }
            #animation-3.animated {
            animation: keyframes3 0.9s both;
            animation-delay: 2.6999998s;
            animation-timing-function: linear;
            }

            @keyframes keyframes4 {
            from {
            stroke: rgb(187, 68, 68);
            stroke-dashoffset: 1037;
            stroke-width: 128;
            }
            60% {
            animation-timing-function: step-end;
            stroke: rgb(68, 68, 255);
            stroke-dashoffset: 0;
            stroke-width: 128;
            }
            to {
            stroke: rgb(85, 85, 85);
            stroke-width: 1024;
            }
            }
            #animation-4.animated {
            animation: keyframes4 0.9s both;
            animation-delay: 3.6s;
            animation-timing-function: linear;
            }
        </style>

        <g style="opacity: 1;">
            <path d="M 165 632 Q 166 626 169 620 Q 187 581 178 427 Q 160 348 194 305 Q 204 292 214 305 Q 229 326 228 388 Q 229 577 231 590 Q 235 609 230 617 Q 224 635 186 648 Q 177 652 166 649 Q 159 645 165 632 Z" fill="rgba(221,221,221,1)"></path>
            <path d="M 328 752 Q 367 689 351 450 Q 347 353 298 237 Q 259 140 151 38 Q 136 23 133 17 Q 132 10 144 10 Q 193 14 277 111 Q 329 172 359 240 Q 386 310 398 409 Q 414 523 412 692 Q 416 714 418 726 Q 424 748 401 758 Q 349 783 332 780 Q 310 776 328 752 Z" fill="rgba(221,221,221,1)"></path>
            <path d="M 511 528 Q 496 543 476 547 Q 470 550 466 544 Q 462 537 465 525 Q 489 477 480 361 Q 471 286 478 269 Q 488 250 504 237 Q 517 227 520 238 Q 527 242 530 262 Q 534 278 532 339 Q 531 442 535 480 Q 536 487 536 493 C 537 506 534 508 511 528 Z" fill="rgba(221,221,221,1)"></path>
            <path d="M 697 526 Q 743 536 789 540 Q 819 544 822 525 Q 837 354 814 328 Q 805 322 746 333 Q 728 337 725 333 Q 722 327 733 318 Q 790 279 825 249 Q 840 236 852 251 Q 877 284 878 362 Q 872 473 882 532 Q 886 553 876 561 Q 848 585 830 595 Q 817 599 809 591 Q 802 581 698 557 L 642 547 Q 593 540 511 528 C 481 524 508 483 536 493 Q 540 499 642 517 L 697 526 Z" fill="rgba(221,221,221,1)"></path>
            <path d="M 642 517 Q 642 37 643 23 Q 643 -19 656 -40 Q 671 -56 680 -34 Q 698 14 695 334 Q 695 445 697 526 L 698 557 Q 699 702 721 737 Q 728 753 708 768 Q 683 787 640 799 Q 621 803 608 790 Q 598 781 610 769 Q 638 745 641 711 Q 642 648 642 547 L 642 517 Z" fill="rgba(221,221,221,1)"></path>
        </g>

        <g style="opacity: 1;">
            <clipPath id="clip-0">
                <path d="M 165 632 Q 166 626 169 620 Q 187 581 178 427 Q 160 348 194 305 Q 204 292 214 305 Q 229 326 228 388 Q 229 577 231 590 Q 235 609 230 617 Q 224 635 186 648 Q 177 652 166 649 Q 159 645 165 632 Z"></path>
            </clipPath>
            <path clip-path="url(#clip-0)" d="M 172 641 L 188 628 L 204 601 L 204 309" fill="none" id="animation-0" stroke-dasharray="472 944" stroke-linecap="round" class='ani-tag animated'></path>
            <clipPath id="clip-1">
                <path d="M 328 752 Q 367 689 351 450 Q 347 353 298 237 Q 259 140 151 38 Q 136 23 133 17 Q 132 10 144 10 Q 193 14 277 111 Q 329 172 359 240 Q 386 310 398 409 Q 414 523 412 692 Q 416 714 418 726 Q 424 748 401 758 Q 349 783 332 780 Q 310 776 328 752 Z"></path>
            </clipPath>
            <path clip-path="url(#clip-1)" d="M 334 766 L 377 730 L 380 718 L 382 515 L 373 403 L 361 338 L 336 256 L 283 156 L 202 61 L 141 17" fill="none" id="animation-1" stroke-dasharray="977 1954" stroke-linecap="round" class='ani-tag animated'></path>
            <clipPath id="clip-2">
                <path d="M 511 528 Q 496 543 476 547 Q 470 550 466 544 Q 462 537 465 525 Q 489 477 480 361 Q 471 286 478 269 Q 488 250 504 237 Q 517 227 520 238 Q 527 242 530 262 Q 534 278 532 339 Q 531 442 535 480 Q 536 487 536 493 C 537 506 534 508 511 528 Z"></path>
            </clipPath>
            <path clip-path="url(#clip-2)" d="M 473 538 L 492 516 L 507 485 L 504 284 L 512 240" fill="none" id="animation-2" stroke-dasharray="437 874" stroke-linecap="round" class='ani-tag animated'></path>
            <clipPath id="clip-3">
                <path d="M 697 526 Q 743 536 789 540 Q 819 544 822 525 Q 837 354 814 328 Q 805 322 746 333 Q 728 337 725 333 Q 722 327 733 318 Q 790 279 825 249 Q 840 236 852 251 Q 877 284 878 362 Q 872 473 882 532 Q 886 553 876 561 Q 848 585 830 595 Q 817 599 809 591 Q 802 581 698 557 L 642 547 Q 593 540 511 528 C 481 524 508 483 536 493 Q 540 499 642 517 L 697 526 Z"></path>
            </clipPath>
            <path clip-path="url(#clip-3)" d="M 520 526 L 548 515 L 803 563 L 824 564 L 839 554 L 851 541 L 852 531 L 853 371 L 841 309 L 831 294 L 821 295 L 730 330" fill="none" id="animation-3" stroke-dasharray="833 1666" stroke-linecap="round" class='ani-tag animated'></path>
            <clipPath id="clip-4">
                <path d="M 642 517 Q 642 37 643 23 Q 643 -19 656 -40 Q 671 -56 680 -34 Q 698 14 695 334 Q 695 445 697 526 L 698 557 Q 699 702 721 737 Q 728 753 708 768 Q 683 787 640 799 Q 621 803 608 790 Q 598 781 610 769 Q 638 745 641 711 Q 642 648 642 547 L 642 517 Z"></path>
            </clipPath>
            <path clip-path="url(#clip-4)" d="M 616 780 L 641 774 L 677 740 L 667 502 L 667 34" fill="none" id="animation-4" stroke-dasharray="909 1818" stroke-linecap="round" class='ani-tag animated'></path>
        </g>

        <g style="opacity: 1;">
            <text x="172" y="641" style="transform-origin:172px 641px; transform:scale(1,-1);">1</text>
            <text x="334" y="766" style="transform-origin:334px 766px; transform:scale(1,-1);">2</text>
            <text x="473" y="538" style="transform-origin:473px 538px; transform:scale(1,-1);">3</text>
            <text x="520" y="526" style="transform-origin:520px 526px; transform:scale(1,-1);">4</text>
            <text x="616" y="780" style="transform-origin:616px 780px; transform:scale(1,-1);">5</text>
        </g>

        <g style="opacity: 1;">
            <path d="M 172 641 L 188 628 L 204 601 L 204 309" class="median-stroke"></path>
            <path d="M 334 766 L 377 730 L 380 718 L 382 515 L 373 403 L 361 338 L 336 256 L 283 156 L 202 61 L 141 17" class="median-stroke"></path>
            <path d="M 473 538 L 492 516 L 507 485 L 504 284 L 512 240" class="median-stroke"></path>
            <path d="M 520 526 L 548 515 L 803 563 L 824 564 L 839 554 L 851 541 L 852 531 L 853 371 L 841 309 L 831 294 L 821 295 L 730 330" class="median-stroke"></path>
            <path d="M 616 780 L 641 774 L 677 740 L 667 502 L 667 34" class="median-stroke"></path>
        </g>

    </g>
</svg>