Skip to content

Instantly share code, notes, and snippets.

@VICTORVICKIE
Last active December 5, 2022 02:30
Show Gist options
  • Save VICTORVICKIE/cf01188f759ab881b18fbd9e0376c203 to your computer and use it in GitHub Desktop.
Save VICTORVICKIE/cf01188f759ab881b18fbd9e0376c203 to your computer and use it in GitHub Desktop.
Display the source blob
Display the rendered blob
Raw
<svg id="z12354" 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>
@keyframes zk {
to {
stroke-dashoffset:0;
}
}
svg.acjk path[clip-path] {
--t:1s;
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="z12354d1" d="M660 211C637 211 616 221 597 232C570 245 542 252 514 261C464 274 414 285 363 291C319 294 273 293 231 278C211 270 195 254 174 248C167 248 162 257 167 263C181 293 209 313 239 325C284 343 335 344 384 340C462 332 538 307 615 290C639 284 665 281 686 267C695 261 705 254 709 244C712 234 706 224 697 221C685 215 672 211 660 211Z"></path>
<path id="z12354d2" d="M334 128C328 130 318 134 320 143C325 154 337 158 346 165C356 171 369 178 369 192C370 213 365 233 363 254C347 370 335 488 345 606C349 642 354 679 366 715C376 742 389 768 410 788C422 797 441 795 449 781C459 764 457 743 448 726C439 710 424 699 415 682C402 655 399 624 396 595C388 503 397 411 415 321C422 287 429 252 447 223C454 208 462 192 459 175C455 160 441 152 427 147C398 136 366 130 334 128Z"></path>
<path id="z12354d3a" d="M559 431C556 431 552 435 555 438C565 455 581 471 580 492C580 512 567 529 558 545C517 612 461 670 402 721C361 754 315 780 264 792C249 795 232 795 220 784C207 771 208 751 210 734C216 690 244 653 278 625C306 602 337 580 372 565C372 552 372 540 373 527C326 543 282 568 241 596C201 625 165 663 151 712C139 749 143 793 168 824C183 843 206 856 230 857C278 860 324 841 364 817C440 770 506 708 558 636C581 602 602 567 619 530C626 514 632 497 629 481C625 467 615 456 604 447C591 437 575 431 559 431Z"></path>
<path id="z12354d3b" d="M602 484C565 485 528 489 492 494C447 501 405 515 363 531C363 543 363 556 363 568C414 548 467 530 523 524C563 518 604 515 644 519C689 524 736 537 769 569C793 591 806 622 807 654C808 675 806 697 800 717C776 774 725 817 671 846C627 871 580 890 531 902C521 906 509 909 501 917C498 921 497 925 498 930C549 927 600 918 650 906C715 889 780 861 830 814C861 784 887 745 891 701C899 631 861 557 796 526C736 496 668 484 602 484Z"></path>
<defs>
<clipPath id="z12354c1"><use xlink:href="#z12354d1"></use></clipPath>
<clipPath id="z12354c2"><use xlink:href="#z12354d2"></use></clipPath>
<clipPath id="z12354c3a"><use xlink:href="#z12354d3a"></use></clipPath>
<clipPath id="z12354c3b"><use xlink:href="#z12354d3b"></use></clipPath>
</defs>
<path style="--d:1s;" pathLength="3333" clip-path="url(#z12354c1)" d="M 174,258 251,308 440,306 697,241"></path>
<path style="--d:2s;" pathLength="3333" clip-path="url(#z12354c2)" d="M 331,137 420,185 373,388 367,632 409,728 431,777"></path>
<path style="--d:3s;" pathLength="3333" clip-path="url(#z12354c3a)" d="M 570,440 610,484 460,727 200,836 181,682 342,556 466,514 641,499 754,520 838,606 845,763 703,869 508,922"></path>
<path style="--d:3s;" pathLength="3333" clip-path="url(#z12354c3b)" d="M -170,442 -210,484 -60,727 200,836 181,682 342,556 466,514 641,499 754,520 838,606 845,763 703,869 508,922"></path>
<g visibility="visible">
<circle cx="190.77384763987874" cy="268.8921088570641" r="40" stroke="#000" fill="#fff" stroke-width="5"></circle>
<text x="190.77384763987874" y="288.8921088570641" text-anchor="middle" font-family="arial" font-weight="normal" fill="#000" font-size="60">1</text>
<circle cx="348.6030670810557" cy="146.49378898753565" r="40" stroke="#000" fill="#fff" stroke-width="5"></circle>
<text x="348.6030670810557" y="166.49378898753565" text-anchor="middle" font-family="arial" font-weight="normal" fill="#000" font-size="60">2</text>
<circle cx="583.4534558799262" cy="454.79880146791885" r="40" stroke="#000" fill="#fff" stroke-width="5"></circle>
<text x="583.4534558799262" y="474.79880146791885" text-anchor="middle" font-family="arial" font-weight="normal" fill="#000" font-size="60">3</text>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment