Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div style="visibility: hidden">
  <svg width="1001" height="1000" viewBox="0 0 1001 1000" fill="none" xmlns="http://www.w3.org/2000/svg"><defs>
      <linearGradient id="17-background" x2="0" y2="1">
        <stop offset="0" stop-color="#17FFAB" />
        <stop offset="1" stop-color="#3368FF" />
      </linearGradient>

      <linearGradient id="17-primary" x2="0" y2="1">
        <stop offset="0" stop-color="#17FFAB" />
        <stop offset="1" stop-color="#3368FF" />
      </linearGradient>

      <linearGradient id="17-secondary" x2="0" y2="1">
        <stop offset="0" stop-color="#B517FF" />
        <stop offset="1" stop-color="#E31221" />
      </linearGradient>

      <linearGradient id="17-tertiary" x2="0" y2="1">
        <stop offset="0" stop-color="#FF83C1" />
        <stop offset="1" stop-color="#FFDE17" />
      </linearGradient>
    </defs>
  <g id="Frame 23">
  <rect width="1000" height="1000" transform="translate(0.55127)" id="background" fill="url(#17-background)" />
  <g id="color_two" fill="url(#17-secondary)">
  <path id="Vector" d="M699.619 247.55H302.684C290.991 247.55 279.776 252.195 271.508 260.464C263.239 268.732 258.594 279.947 258.594 291.64V707.912C258.594 719.606 263.239 730.82 271.508 739.088C279.776 747.357 290.991 752.002 302.684 752.002H699.619C711.312 752.002 722.526 747.357 730.795 739.088C739.063 730.82 743.709 719.606 743.709 707.912V291.634C743.707 279.942 739.061 268.729 730.793 260.462C722.524 252.195 711.311 247.55 699.619 247.55ZM727.563 330.818V689.748V704.466C727.563 708.451 726.778 712.397 725.253 716.078C723.728 719.76 721.492 723.105 718.674 725.922C715.856 728.74 712.51 730.975 708.828 732.499C705.147 734.024 701.2 734.808 697.215 734.807H305.119C301.134 734.808 297.187 734.024 293.505 732.499C289.824 730.975 286.478 728.74 283.66 725.922C280.842 723.105 278.606 719.76 277.081 716.078C275.556 712.397 274.771 708.451 274.771 704.466V689.792V295.043C274.776 286.997 277.975 279.281 283.665 273.592C289.356 267.903 297.072 264.705 305.119 264.702H697.184C701.169 264.701 705.115 265.485 708.797 267.01C712.479 268.534 715.825 270.769 718.643 273.587C721.461 276.404 723.697 279.749 725.222 283.431C726.747 287.112 727.532 291.058 727.532 295.043L727.563 330.818Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_2" d="M506.116 386.208C506.09 386.687 506.249 387.158 506.562 387.522C506.874 387.887 507.315 388.117 507.793 388.164C513.49 388.758 519.124 389.845 524.634 391.412C524.873 391.482 525.123 391.504 525.371 391.476C525.619 391.448 525.858 391.371 526.075 391.249C526.292 391.126 526.483 390.962 526.635 390.765C526.788 390.568 526.899 390.342 526.963 390.101L544.58 323.929C533.309 320.568 521.723 318.372 510.003 317.378L506.116 386.208Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_3" d="M469.79 389.546C469.934 390.004 470.25 390.39 470.671 390.621C471.092 390.852 471.587 390.912 472.051 390.788C477.664 389.34 483.392 388.382 489.171 387.925C489.418 387.908 489.66 387.841 489.881 387.73C490.102 387.618 490.299 387.464 490.46 387.275C490.62 387.087 490.742 386.868 490.817 386.632C490.892 386.396 490.92 386.147 490.898 385.9L484.769 317.039C472.902 317.746 461.141 319.675 449.67 322.796L469.79 389.546Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_4" d="M540.894 395.674C540.705 396.114 540.693 396.609 540.859 397.058C541.026 397.506 541.358 397.874 541.788 398.084C546.838 400.601 551.665 403.541 556.22 406.871C556.42 407.019 556.648 407.127 556.89 407.186C557.132 407.245 557.384 407.255 557.63 407.215C557.876 407.175 558.112 407.086 558.323 406.953C558.534 406.82 558.716 406.647 558.859 406.442L597.838 350.591C588.482 343.662 578.447 337.699 567.888 332.793L540.894 395.674Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_5" d="M436.773 405.617C437.066 406.009 437.5 406.27 437.983 406.345C438.467 406.419 438.96 406.3 439.357 406.014C444.118 402.632 449.167 399.675 454.447 397.178C454.67 397.075 454.87 396.929 455.037 396.748C455.204 396.567 455.333 396.355 455.417 396.124C455.501 395.893 455.539 395.648 455.528 395.403C455.517 395.157 455.458 394.916 455.353 394.694L425.645 331.254C414.667 336.076 404.22 342.026 394.472 349.008L436.773 405.617Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_6" d="M569.93 418.932C573.744 422.956 577.217 427.291 580.312 431.892C580.45 432.1 580.627 432.278 580.835 432.416C581.043 432.554 581.276 432.649 581.521 432.696C581.766 432.742 582.017 432.739 582.261 432.686C582.505 432.633 582.735 432.532 582.939 432.389L638.66 393.267C632.226 383.692 624.854 374.782 616.653 366.67L569.936 416.349C569.601 416.695 569.413 417.157 569.412 417.639C569.411 418.121 569.596 418.584 569.93 418.932Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_7" d="M668.035 489.682C668.033 483.348 667.684 477.019 666.991 470.723L598.726 478.796C598.251 478.854 597.816 479.092 597.512 479.462C597.208 479.833 597.058 480.305 597.093 480.783C597.249 483.068 597.335 485.378 597.335 487.701C597.335 490.806 597.186 493.867 596.907 496.898C596.901 496.999 596.901 497.101 596.907 497.202H667.861C667.966 494.73 668.035 492.209 668.035 489.682Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_8" d="M322.13 489.684C322.13 492.211 322.198 494.733 322.304 497.235H397.518C397.226 494.13 397.071 490.938 397.071 487.734C397.071 486.306 397.102 484.884 397.164 483.468C397.188 482.986 397.024 482.513 396.707 482.149C396.389 481.786 395.943 481.559 395.462 481.518L322.732 475.265C322.341 480.021 322.111 484.828 322.111 489.684H322.13Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_9" d="M589.869 445.286C589.442 445.501 589.114 445.873 588.953 446.324C588.792 446.775 588.811 447.27 589.006 447.708C591.192 452.707 592.962 457.879 594.297 463.17C594.355 463.411 594.462 463.639 594.609 463.838C594.757 464.038 594.943 464.206 595.156 464.332C595.37 464.459 595.606 464.542 595.852 464.576C596.098 464.61 596.348 464.594 596.588 464.53L662.649 446.72C659.809 435.618 655.867 424.828 650.881 414.51L589.869 445.286Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_10" d="M397.453 466.35C397.693 466.406 397.941 466.414 398.184 466.373C398.427 466.332 398.659 466.244 398.868 466.113C399.076 465.982 399.257 465.81 399.399 465.609C399.541 465.408 399.641 465.18 399.695 464.94C401.016 459.263 402.835 453.713 405.128 448.354C405.323 447.908 405.336 447.404 405.164 446.949C404.992 446.495 404.65 446.125 404.209 445.919L338.801 415.547C333.603 426.476 329.575 437.925 326.785 449.701L397.453 466.35Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_11" d="M351.588 393.129L411.538 432.406C411.951 432.675 412.452 432.769 412.934 432.669C413.416 432.569 413.838 432.283 414.109 431.872C417.376 427.019 421.06 422.46 425.119 418.248C425.464 417.899 425.658 417.428 425.658 416.938C425.658 416.447 425.464 415.976 425.119 415.627L374.819 365.458C366.135 373.849 358.349 383.123 351.588 393.129Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  </g>
  <path id="Vector_12" d="M356.668 706.667C317.13 706.667 295.128 692.528 295.128 676.028C295.128 675.941 295.128 675.854 295.128 675.767C294.685 680.227 294.685 684.72 295.128 689.18C296.488 705.618 317.124 719.82 356.668 719.82C387.568 719.82 444.134 707.773 444.134 665.875C444.136 663.749 443.964 661.626 443.619 659.528C437.825 695.937 385.83 706.667 356.668 706.667Z" fill="black" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_13" d="M394.89 661.886C385.725 661.886 363.99 665.55 344.348 665.55C338.811 665.599 333.284 665.072 327.855 663.979C325.756 665.55 325.234 667.649 325.234 670.27C325.286 672.79 326.187 675.219 327.793 677.163H327.83C333.261 678.255 338.79 678.782 344.33 678.734C363.971 678.734 385.706 675.07 394.872 675.07C396.67 675.02 398.462 675.305 400.156 675.908C402.64 673.629 404.056 671.108 404.056 668.457C404.056 663.979 400.653 661.886 394.89 661.886Z" fill="black" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_14" d="M295.652 567.871C295.652 567.672 295.652 567.48 295.652 567.287C295.124 571.262 295.372 576.422 295.652 581.017C296.273 592.748 300.955 602.988 309.599 610.794C312.497 608.31 315.639 606.125 318.976 604.273C304.308 596.151 295.652 583.321 295.652 567.871Z" fill="black" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_15" d="M297.737 633.866C297.737 633.477 297.314 633.412 297.263 633.797C296.713 637.913 297.018 643.372 297.718 646.987C298.569 651.396 299.799 656.166 302.27 660.581C304.421 658.625 306.869 657.023 309.523 655.836C301.668 649.838 297.737 641.461 297.737 633.866Z" fill="black" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_16" d="M359.809 537.232C348.01 537.232 341.217 545.615 341.217 560.538C341.223 562.795 341.376 565.05 341.676 567.288C343.409 556.389 349.817 550.384 359.79 550.384C372.9 550.384 379.786 563.959 381.575 576.708C381.915 574.566 382.081 572.4 382.071 570.231C382.071 556.085 375.259 537.232 359.809 537.232Z" fill="black" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_17" d="M357.45 612.914C350.674 612.922 343.916 612.22 337.286 610.822C333.877 613.964 333.094 616.845 333.094 619.466C333.085 620.583 333.371 621.683 333.923 622.654C334.475 623.626 335.273 624.434 336.237 624.999C336.553 624.657 336.889 624.316 337.267 623.968C343.897 625.369 350.655 626.072 357.431 626.067C397.758 626.067 427.348 603.805 427.348 575.525C427.355 573.346 427.174 571.171 426.807 569.023C422.579 594.068 394.56 612.914 357.45 612.914Z" fill="black" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_18" d="M441.359 519.7C440.949 516.54 440.067 514.112 438.316 513.683C439.993 515.062 441.005 517.217 441.359 519.7Z" fill="black" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_19" d="M425.543 550.854C426.796 554.527 427.416 558.387 427.375 562.268C435.795 553.996 441.496 542.757 441.496 534.945C441.496 531.92 442.005 525.301 441.428 520.233C441.485 520.751 441.514 521.271 441.515 521.792C441.515 530.2 434.97 542.471 425.543 550.854Z" fill="black" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_20" d="M581.885 656.129C559.046 656.129 544.26 652.602 543.682 641.847C543.241 645.877 543.633 650.87 543.633 654.341C543.633 665.599 558.536 669.245 581.867 669.245C604.912 669.245 620.368 665.842 620.368 654.341C620.368 650.727 620.859 645.405 620.368 641.133V641.195C620.387 652.726 604.912 656.129 581.885 656.129Z" fill="black" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_21" d="M644.72 587.518C644.72 561.592 640.007 551.905 627.699 551.905C616.701 551.905 607.827 560.543 607.535 588.04V600.205C608.001 573.503 616.813 565.051 627.68 565.051C639.988 565.051 644.701 574.738 644.701 600.665V617.878C644.701 616.605 644.701 615.295 644.701 613.966L644.72 587.518Z" fill="black" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_22" d="M670.385 656.129C647.08 656.129 632.151 652.465 632.151 641.226C632.151 641.176 632.151 641.132 632.151 641.089C631.642 645.399 632.151 650.789 632.151 654.372C632.151 665.63 647.055 669.275 670.385 669.275C693.43 669.275 709.923 665.872 709.923 654.086C709.923 650.689 710.42 645.647 709.923 641.393C709.483 652.807 693.126 656.129 670.385 656.129Z" fill="black" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_23" d="M493.356 656.12C469.759 656.12 453.812 652.457 453.812 640.931C453.812 640.837 453.689 640.825 453.674 640.918C453.029 644.681 453.459 649.58 453.762 654.084C454.582 665.572 469.765 669.298 493.338 669.298C516.115 669.298 531.839 665.895 531.839 654.394C531.839 650.619 532.46 644.968 531.839 640.608C531.839 640.819 531.839 641.024 531.839 641.229C531.851 652.717 516.14 656.12 493.356 656.12Z" fill="black" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_24" d="M452.489 554.834C452.489 559.802 455.892 563.217 462.965 565.31C466.368 566.359 467.678 574.215 467.678 582.331V616.485C467.678 615.672 467.678 614.84 467.678 613.97V569.185C467.678 561.068 466.368 553.207 462.965 552.163C455.892 550.064 452.489 546.661 452.489 541.687C452.459 539.891 452.928 538.123 453.843 536.577C450.986 540.961 452.489 551.369 452.489 554.834Z" fill="black" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_25" d="M556.208 587.518C556.208 561.853 551.756 551.905 539.181 551.905C528.183 551.905 519.309 560.543 519.018 588.04V600.205C519.483 573.503 528.332 565.051 539.162 565.051C551.737 565.051 556.184 574.987 556.184 600.665V617.878C556.184 616.605 556.184 615.295 556.184 613.966L556.208 587.518Z" fill="black" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_26" d="M702.368 696.447C702.813 693.889 703.002 691.109 702.718 688.628C702.611 687.69 702.377 687.872 702.459 688.812C702.661 691.138 702.203 693.475 701.138 695.552C700.073 697.63 698.443 699.366 696.437 700.56C694.43 701.754 692.127 702.358 689.793 702.303L464.959 698.614C462.978 698.576 461.089 697.772 459.688 696.371C458.287 694.97 457.483 693.081 457.445 691.1C457.419 689.855 457.7 688.622 458.264 687.511C456.265 690.66 456.699 698.807 456.762 702.173C456.8 704.153 457.604 706.041 459.005 707.441C460.406 708.841 462.295 709.644 464.275 709.68L689.116 713.369C696.177 713.506 698.94 708.979 700.654 703.893C701.126 702.508 702.101 697.863 702.368 696.447Z" fill="black" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <g id="color_three" fill="url(#17-tertiary)">
  <path id="Vector_27" d="M544.566 323.931L560.34 264.701H512.952L509.978 317.379C521.701 318.373 533.292 320.568 544.566 323.931Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_28" d="M484.771 317.044L480.108 264.701H432.18L449.673 322.788C461.144 319.672 472.906 317.747 484.771 317.044Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_29" d="M597.877 350.584L657.814 264.701H597.157L567.927 332.786C578.486 337.692 588.52 343.655 597.877 350.584Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_30" d="M425.639 331.246L394.484 264.701H331.479L394.466 349C404.214 342.018 414.661 336.068 425.639 331.246Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_31" d="M709.891 267.485L616.662 366.669C624.869 374.775 632.248 383.678 638.688 393.247L727.558 330.82V295.045C727.555 289.243 725.89 283.563 722.759 278.679C719.628 273.794 715.162 269.91 709.891 267.485Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_32" d="M668.034 489.683C668.034 492.21 667.966 494.732 667.861 497.234H727.537V689.796V463.54L666.991 470.724C667.684 477.02 668.032 483.349 668.034 489.683Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_33" d="M322.313 497.232C322.208 494.748 322.139 492.208 322.139 489.681C322.139 484.825 322.351 480.018 322.76 475.262L274.795 471.138V689.794V497.232H322.313Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_34" d="M662.645 446.716L727.532 429.223V375.818L650.877 414.506C655.864 424.824 659.806 435.614 662.645 446.716Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_35" d="M338.798 415.551L274.774 385.819V437.503L326.782 449.737C329.57 437.95 333.598 426.491 338.798 415.551Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_36" d="M374.771 365.458L283.151 274.123C277.768 279.758 274.767 287.252 274.774 295.044V342.811L351.577 393.11C358.328 383.113 366.101 373.845 374.771 365.458Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_37" d="M295.124 675.761C295.124 675.848 295.124 675.935 295.124 676.022C295.124 692.522 317.125 706.661 356.663 706.661C385.85 706.661 437.82 695.931 443.601 659.522C443.96 657.263 444.139 654.979 444.135 652.692C444.135 631.218 428.164 621.27 411.664 621.27C394.382 621.27 372.387 627.554 348.292 627.554C343.281 627.554 338.978 626.759 336.245 624.971C335.281 624.406 334.483 623.597 333.931 622.626C333.38 621.655 333.094 620.555 333.103 619.438C333.103 616.817 333.885 613.936 337.295 610.794C343.925 612.192 350.682 612.893 357.458 612.886C394.568 612.886 422.587 594.039 426.816 568.995C427.191 566.798 427.378 564.573 427.375 562.344V562.239C427.416 558.358 426.796 554.498 425.543 550.825C434.97 542.442 441.515 530.14 441.515 521.757C441.514 521.236 441.485 520.716 441.428 520.198C441.428 520.024 441.391 519.85 441.366 519.676C441.012 517.192 440 515.038 438.323 513.659C437.007 512.592 435.353 512.028 433.659 512.069C430.778 512.069 427.114 513.38 422.922 515.472C416.638 518.614 410.882 522.545 400.927 524.638C391.24 520.21 379.441 517.59 365.301 517.59C323.95 517.59 296.036 539.032 295.651 567.269C295.651 567.461 295.651 567.654 295.651 567.852C295.651 583.303 304.289 596.132 318.957 604.255C315.62 606.107 312.478 608.291 309.58 610.775C303.14 616.364 298.849 623.114 297.93 630.765C297.808 631.795 297.745 632.832 297.744 633.869C297.744 641.464 301.675 649.841 309.543 655.865C306.883 657.048 304.428 658.647 302.271 660.603C298.017 664.49 295.204 669.719 295.124 675.761ZM400.157 675.873C393.028 682.418 377.007 687.02 359.538 687.02C341.679 687.02 331.979 682.486 327.794 677.158C326.188 675.215 325.286 672.786 325.235 670.265C325.235 667.645 325.757 665.546 327.856 663.975C333.283 665.076 338.811 665.611 344.349 665.571C363.991 665.571 385.725 661.907 394.891 661.907C400.654 661.907 404.057 664 404.057 668.452C404.057 671.073 402.647 673.594 400.157 675.873ZM381.565 576.708C379.795 587.544 373.362 594.058 363.208 594.058C350.081 594.058 343.387 580.266 341.666 567.287C341.366 565.05 341.213 562.795 341.207 560.537C341.207 545.634 348.038 537.232 359.799 537.232C375.249 537.232 382.062 556.085 382.062 570.231C382.071 572.4 381.905 574.566 381.565 576.708Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_38" d="M462.991 552.162C466.394 553.205 467.704 561.067 467.704 569.183V613.962C467.704 614.832 467.704 615.664 467.704 616.477C467.593 623.985 466.866 629.015 463.792 630.195C458.514 631.958 454.216 634.448 453.856 640.205C453.856 640.447 453.856 640.683 453.856 640.932C453.856 652.457 469.828 656.121 493.401 656.121C516.185 656.121 531.902 652.718 531.902 641.217C531.902 640.994 531.902 640.789 531.902 640.596C531.604 634.815 527.3 632.778 522.506 630.76C519.097 628.139 519.097 623.426 519.097 613.993V588.036C519.364 560.539 528.263 551.901 539.261 551.901C551.836 551.901 556.288 561.837 556.288 587.514V613.962C556.288 615.291 556.288 616.601 556.288 617.874C556.207 623.879 555.717 628.996 552.904 630.723C547.936 632.586 543.738 634.914 543.738 641.199C543.738 641.422 543.738 641.633 543.769 641.82C544.346 652.563 559.132 656.102 581.972 656.102C605.017 656.102 620.473 652.699 620.473 641.199V641.137C620.442 634.927 616.008 632.809 611.307 630.723C607.643 628.102 607.644 623.389 607.644 613.956V588.036C607.904 560.539 616.809 551.901 627.807 551.901C640.115 551.901 644.828 561.588 644.828 587.514V613.962C644.828 615.291 644.828 616.601 644.828 617.874C644.741 623.879 644.251 628.996 641.444 630.723C636.476 632.542 632.346 634.883 632.284 641.062C632.284 641.105 632.284 641.149 632.284 641.199C632.284 652.457 647.188 656.102 670.518 656.102C693.259 656.102 709.64 652.78 710.038 641.372C710.038 641.217 710.038 641.068 710.038 640.913C710.038 634.629 705.852 632.275 699.829 630.176C696.687 628.872 696.159 624.68 696.159 613.944V566.562C696.159 534.352 680.187 517.591 654.789 517.591C631.191 517.591 614.425 530.949 605.557 548.759C600.589 528.067 586.176 517.591 566.273 517.591C543.75 517.591 527.518 530.688 519.134 548.231V544.039C519.134 527.546 518.613 518.902 504.734 518.902C494.518 518.902 471.2 523.869 459.166 531.731C456.682 533.246 455.011 534.836 453.974 536.575C453.06 538.121 452.591 539.89 452.621 541.686C452.515 546.66 455.918 550.069 462.991 552.162Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_39" d="M464.927 698.621L689.762 702.31C691.43 702.353 693.089 702.06 694.642 701.449C696.194 700.838 697.608 699.921 698.8 698.753C699.992 697.586 700.936 696.19 701.578 694.65C702.221 693.11 702.547 691.457 702.537 689.789C702.528 688.12 702.184 686.47 701.525 684.938C700.866 683.405 699.906 682.02 698.702 680.865C697.498 679.71 696.073 678.809 694.514 678.216C692.955 677.622 691.292 677.347 689.625 677.408L464.828 683.308C463.45 683.349 462.108 683.763 460.945 684.504C459.782 685.245 458.841 686.286 458.221 687.518C457.657 688.629 457.375 689.862 457.401 691.107C457.439 693.09 458.245 694.981 459.649 696.382C461.052 697.784 462.944 698.586 464.927 698.621Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  </g>
  <g id="color_one" fill="url(#17-primary)">
  <path id="Vector_40" d="M344.325 678.698C338.786 678.746 333.257 678.22 327.826 677.127H327.789C331.974 682.455 341.674 686.989 359.533 686.989C377.002 686.989 393.023 682.387 400.152 675.842C398.457 675.238 396.666 674.954 394.867 675.004C385.702 675.035 363.967 678.698 344.325 678.698Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_41" d="M359.79 550.387C349.817 550.387 343.408 556.392 341.676 567.29C343.396 580.269 350.09 594.061 363.218 594.061C373.371 594.061 379.804 587.547 381.574 576.711C379.786 563.962 372.899 550.387 359.79 550.387Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_42" d="M667.858 497.23H596.91V497.317H397.537C397.537 497.317 397.537 497.262 397.537 497.23H274.774V704.497C274.774 708.482 275.559 712.428 277.084 716.11C278.609 719.791 280.845 723.136 283.663 725.954C286.481 728.771 289.827 731.006 293.508 732.531C297.19 734.055 301.137 734.839 305.122 734.838H697.187C701.172 734.839 705.118 734.055 708.8 732.531C712.482 731.006 715.828 728.771 718.646 725.954C721.464 723.136 723.7 719.791 725.225 716.11C726.75 712.428 727.535 708.482 727.535 704.497V497.23H667.858ZM459.045 531.732C471.092 523.877 494.398 518.903 504.613 518.903C518.492 518.903 519.014 527.547 519.014 544.04V548.207C527.397 530.664 543.63 517.568 566.153 517.568C586.056 517.568 600.456 528.044 605.437 548.735C614.335 530.925 631.096 517.568 654.668 517.568C680.067 517.568 696.038 534.334 696.038 566.539V613.939C696.038 624.675 696.566 628.842 699.709 630.171C705.732 632.27 709.918 634.624 709.918 640.908C709.918 641.063 709.918 641.212 709.918 641.368C710.414 645.621 709.918 650.682 709.918 654.061C709.918 665.859 693.424 669.25 670.379 669.25C647.074 669.25 632.145 665.58 632.145 654.346C632.145 650.763 631.661 645.373 632.145 641.063C632.207 634.884 636.368 632.543 641.305 630.724C644.112 628.998 644.602 623.893 644.689 617.876V600.662C644.689 574.736 639.976 565.048 627.668 565.048C616.801 565.048 607.989 573.494 607.523 600.202V613.963C607.523 623.39 607.523 628.103 611.187 630.73C615.888 632.817 620.322 634.909 620.353 641.144C620.825 645.416 620.353 650.738 620.353 654.352C620.353 665.878 604.903 669.256 581.852 669.256C558.546 669.256 543.617 665.586 543.617 654.352C543.617 650.881 543.226 645.888 543.667 641.858C543.667 641.641 543.636 641.43 543.636 641.237C543.636 634.953 547.828 632.593 552.802 630.761C555.615 629.035 556.105 623.93 556.186 617.913V600.662C556.186 575.003 551.74 565.048 539.165 565.048C528.304 565.048 519.486 573.494 519.02 600.202V613.963C519.02 623.39 519.02 628.103 522.429 630.73C527.223 632.748 531.527 634.785 531.825 640.566C532.446 644.913 531.825 650.577 531.825 654.352C531.825 665.878 516.108 669.256 493.324 669.256C469.726 669.256 454.556 665.53 453.779 654.067C453.456 649.273 452.991 644.032 453.829 640.188C454.171 634.431 458.468 631.941 463.765 630.177C466.87 628.998 467.565 623.968 467.677 616.46V582.361C467.677 574.245 466.367 566.39 462.964 565.34C455.891 563.248 452.488 559.844 452.488 554.864C452.488 551.399 450.985 540.991 453.86 536.607C454.891 534.837 456.568 533.248 459.045 531.732ZM689.083 713.39L464.243 709.664C462.263 709.627 460.374 708.824 458.973 707.425C457.571 706.025 456.767 704.136 456.729 702.156C456.667 698.79 456.232 690.643 458.232 687.494C458.852 686.263 459.793 685.221 460.956 684.48C462.119 683.739 463.461 683.326 464.839 683.284L689.636 677.385C691.635 677.324 693.618 677.747 695.418 678.617C697.218 679.488 698.782 680.78 699.976 682.384C703.081 684.998 703.261 691.183 702.348 696.43C702.099 697.871 701.106 702.491 700.634 703.882C698.907 708.98 696.144 713.508 689.083 713.39ZM297.719 647.012C296.825 642.398 296.577 634.779 297.924 630.786C298.843 623.135 303.134 616.379 309.574 610.796C300.93 602.991 296.26 592.751 295.627 581.02C295.372 576.425 295.124 571.264 295.627 567.29C296.012 539.035 323.925 517.611 365.276 517.611C379.416 517.611 391.203 520.232 400.89 524.684C410.826 522.592 416.601 518.661 422.885 515.519C427.077 513.426 430.741 512.116 433.622 512.116C435.316 512.074 436.97 512.638 438.286 513.705C440.037 514.115 440.919 516.562 441.329 519.723C441.329 519.896 441.372 520.07 441.391 520.244C441.968 525.311 441.459 531.931 441.459 534.955C441.459 542.774 435.758 554.013 427.338 562.279V562.384C427.34 564.613 427.153 566.838 426.779 569.035C427.146 571.183 427.326 573.358 427.319 575.537C427.319 603.817 397.729 626.079 357.402 626.079C350.634 626.078 343.885 625.371 337.264 623.968C336.885 624.315 336.55 624.657 336.233 624.998C338.971 626.787 343.269 627.582 348.28 627.582C372.374 627.582 394.37 621.297 411.652 621.297C428.151 621.297 444.123 631.233 444.123 652.719C444.127 655.007 443.948 657.291 443.589 659.55C443.934 661.648 444.107 663.77 444.104 665.897C444.104 707.794 387.539 719.842 356.639 719.842C317.094 719.842 296.459 705.64 295.099 689.202C294.655 684.742 294.655 680.249 295.099 675.789C295.18 669.747 297.993 664.518 302.246 660.631C299.8 656.19 298.57 651.421 297.719 647.012Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  <path id="Vector_43" d="M582.938 432.386C582.734 432.53 582.503 432.631 582.26 432.683C582.016 432.736 581.764 432.739 581.519 432.693C581.274 432.647 581.041 432.552 580.834 432.414C580.626 432.276 580.448 432.097 580.311 431.889C577.216 427.289 573.743 422.954 569.928 418.929C569.6 418.583 569.417 418.124 569.417 417.647C569.417 417.17 569.6 416.711 569.928 416.365L616.645 366.686L709.892 267.502C705.911 265.665 701.578 264.716 697.193 264.72H657.798L597.86 350.602L558.899 406.435C558.757 406.64 558.574 406.813 558.363 406.946C558.152 407.079 557.917 407.168 557.67 407.208C557.424 407.247 557.173 407.238 556.93 407.179C556.688 407.119 556.46 407.012 556.26 406.864C551.706 403.534 546.878 400.594 541.829 398.077C541.399 397.867 541.066 397.499 540.899 397.051C540.733 396.602 540.745 396.107 540.934 395.667L567.91 332.786L597.14 264.701H560.334L544.561 323.931L526.943 390.103C526.88 390.344 526.768 390.57 526.616 390.767C526.464 390.964 526.273 391.128 526.056 391.25C525.839 391.373 525.599 391.45 525.352 391.478C525.104 391.506 524.854 391.484 524.615 391.413C519.105 389.847 513.471 388.76 507.774 388.166C507.296 388.118 506.855 387.889 506.543 387.524C506.23 387.16 506.071 386.689 506.097 386.21L509.984 317.379L512.946 264.701H480.096L484.76 317.044L490.889 385.905C490.911 386.152 490.884 386.401 490.809 386.637C490.733 386.873 490.612 387.092 490.451 387.28C490.29 387.469 490.094 387.623 489.872 387.735C489.651 387.846 489.41 387.913 489.163 387.93C483.384 388.387 477.655 389.345 472.042 390.792C471.578 390.917 471.084 390.857 470.662 390.626C470.241 390.394 469.926 390.009 469.782 389.55L449.662 322.788L432.169 264.72H394.481L425.636 331.246L455.344 394.692C455.448 394.915 455.508 395.156 455.519 395.401C455.53 395.647 455.492 395.892 455.408 396.123C455.323 396.354 455.194 396.566 455.028 396.747C454.861 396.927 454.66 397.073 454.437 397.176C449.158 399.67 444.109 402.623 439.347 406C438.951 406.286 438.457 406.405 437.974 406.331C437.491 406.256 437.056 405.995 436.764 405.603L394.462 349L331.476 264.701H305.115C301.005 264.697 296.937 265.53 293.16 267.15C289.383 268.77 285.975 271.142 283.144 274.122L374.765 365.456L425.064 415.626C425.41 415.974 425.603 416.445 425.603 416.936C425.603 417.427 425.41 417.897 425.064 418.246C421.005 422.459 417.321 427.018 414.054 431.871C413.783 432.281 413.361 432.568 412.879 432.668C412.397 432.768 411.896 432.673 411.484 432.405L351.534 393.127L274.73 342.827V385.831L338.754 415.564L404.156 445.936C404.596 446.142 404.939 446.511 405.111 446.966C405.283 447.421 405.27 447.925 405.075 448.37C402.781 453.729 400.963 459.279 399.641 464.957C399.588 465.197 399.487 465.425 399.345 465.626C399.203 465.827 399.023 465.998 398.815 466.129C398.606 466.26 398.374 466.349 398.131 466.39C397.888 466.43 397.639 466.422 397.4 466.366L326.775 449.73L274.767 437.497V471.136L322.732 475.259L395.462 481.512C395.943 481.554 396.389 481.78 396.707 482.144C397.024 482.507 397.188 482.98 397.164 483.462C397.102 484.878 397.07 486.3 397.07 487.728C397.07 490.933 397.226 494.106 397.518 497.229C397.518 497.26 397.518 497.285 397.518 497.316H596.904V497.229C596.898 497.128 596.898 497.027 596.904 496.925C597.183 493.895 597.332 490.833 597.332 487.728C597.332 485.406 597.245 483.096 597.09 480.811C597.055 480.333 597.205 479.86 597.509 479.49C597.813 479.12 598.248 478.881 598.723 478.823L666.988 470.751L727.534 463.566V429.225L662.641 446.718L596.581 464.528C596.341 464.592 596.091 464.608 595.845 464.574C595.599 464.54 595.362 464.457 595.149 464.331C594.935 464.204 594.749 464.036 594.602 463.836C594.454 463.637 594.348 463.41 594.289 463.168C592.955 457.877 591.185 452.705 588.999 447.706C588.804 447.269 588.785 446.773 588.945 446.322C589.106 445.871 589.434 445.499 589.862 445.284L650.874 414.508L727.528 375.845V330.818L638.659 393.245L582.938 432.386Z" stroke="black" stroke-width="3.10493" stroke-miterlimit="10"/>
  </g>
  </g>
  </svg>
</div>
              
            
!

CSS

              
                
              
            
!

JS

              
                import Two from 'https://cdn.skypack.dev/two.js@latest';

const two = new Two({
  type: Two.Types.canvas,
  fullscreen: true,
  autostart: true
}).appendTo(document.body);

var ref = document.body.querySelector('svg')
var svg = two.interpret(ref);

svg.center();
svg.subdivide();

two.scene.position.set(two.width / 2, two.height / 2);

var vertices = getVertices(svg);
var MAX_ITERATIONS = vertices.length;
var index = 0;

two.bind('update', function(frameCount) {

  var theta = frameCount / 10
  for (var i = 0; i < MAX_ITERATIONS; i++) {

    var v = vertices[index];
    var pct = v.absolute.x / two.width;
    var phi = Math.PI * 3 * pct;

    v.y = v.origin.y + 33 * Math.cos(phi + theta);
    index = (index + 1) % vertices.length;

  }

});

function getVertices(obj) {
  var result = [];
  var matrix;
  if (obj.children) {
    for (var i = 0; i < obj.children.length; i++) {
      var child = obj.children[i];
      result = result.concat(getVertices(child));
    }
  } else {
    matrix = Two.Utils.getComputedMatrix(obj);
    for (var j = 0; j < obj.vertices.length; j++) {
      var v = obj.vertices[j];
      v.origin = new Two.Vector().copy(v);
      v.absolute = matrix.multiply(v.x, v.y, 1);
      result.push(v);
    }
  }
  return result;
}
              
            
!
999px

Console