Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ 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

Auto Save

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 class="js-animation-s1 w-full pointer-events-none">
    <svg class="mix-blend-multiply" viewBox="0 0 2202 626">
        <path class="infinity" d="M1 625C113 412.333 450.8 51.8 906 311 1475 635 2109 152 2201 1" fill="none" stroke="blue"/>
        <path class="s1 " d="M1 44c-1 6 0 13 4 18l4 7c4 5 4 12 10 15 5 3 10 1 14 2 5 0 10 2 15 6 2 1 4 2 5 5v6l-6 1-5-3-10-4c-3 0-7 1-8 5 0 3 2 7 5 9 5 5 10 11 18 14 6 2 14 2 22 1 2-1 6-1 8-3 5-2 6-8 8-14 1-5 3-11 2-17s-4-12-8-15l-7-4-6-4c-7-6-17-6-25-7l-6-3c-4-2-6-7-5-11 0-4 3-8 6-9 2-1 5-1 6 1l1 1c1 4 4 5 7 6s7 0 10-1c5-2 10-6 11-12 1-5 0-10-2-14l-5-9c-4-4-8-6-13-7-4-2-9-4-15-4-9 0-23 8-29 16L5 27 1 44Z" fill="#F2C938"/>
        <path class="s2 mix-blend-multiply" d="M65 12h-4V5l-1-3c-1-2-4-1-5 0l-3 1-6-1-15 6c-4 2-10 6-15 11l-4 5c-4 4-7 9-9 15l-3 9 1 4v3c0 8 4 15 11 19l8 1c8 5 18 7 28 5h1c2 2 2 5 2 8v3l-5 9-22 11-10 4h1l-1 2v4h-2v-1h-1l1 1-1 1v1l1 2-5-1v1l5 1 2 2-2-1v1l3 1 3 1 4 1h6v1l1-1c8-2 15-6 21-11 7-4 15-11 23-22 5-8 7-14 6-20-1-3-3-7-6-10 0-3-1-5-3-7-5-5-13-5-18-4h-1l-6-3-8-2-8-2-1-5 2-3 9-6c6-3 11-8 15-13v-1h2l3-3 6-7Zm-5-1v1h-1l1-5v4Zm-1 1h-2V9l-2-2V5c1-1 4-1 5 1l-1 6Zm-9 2 1-2h-2l-1-1 4-1 1 1-2 2-1 1Zm0 4v-1h1l-1 1Zm-8 10-7 3 3-2v1l1-1 10-7-7 6Zm-8 9-2 2-4 1 6-3Zm41 41-2-4v-3l2 7Zm-61 40h1v2l-1-2Zm3 0-2 2v-2h2Zm4-3 7-2-4 2v-1l-3 1Zm5-4h1l-4 2-2 1 5-3Zm22-32h-3l-17-4 8-2h3c4 1 7 3 10 6h-1ZM2 52v-2l1 1v2l-1-1Zm21-30 6-2-4 2-7 5 5-5Zm24-10v-1h1l-1 1-2 1 2-1Zm-2 0-1-1h3-1l-1 1Zm0 2 2-1v2h-2v-1Zm4 3h-1v-1l1 1ZM31 34l-3 4 2-3 1-1Zm-4 16 4 6-4-3-1-3h1Zm41 25-1-2c2 2 3 6 2 9l-1-7Zm-4-8c4 1 6 5 7 8l-1 5c0-3-1-7-3-9l-3-4Zm-1 31-1 1 2-4 1-2 2-3-1 4-3 4Zm-41 31h-1l-1-1 1 1h1l10-4v1l-3 2v1l8-4v-1l-1 1-1 1c-2 2-4 3-7 3h-6Zm-6-4v-2l2 1h1l-2 1h-1Zm15-52h3-2l-1 1v-1Zm-11-3 2 1h-1l-1-1ZM4 47h2l-1 1v5l-1-1v-5Zm5 12 1 1 3 4v1l-1-1-3-4v-1Zm-1-6 1 2v3H8v-5Zm1 4 1 2-1-1v-1Zm-1 6 1 1v1l-2-3 1 1Zm-4-8v-2l1 1-1 1Zm2 2 1 1 1 2-2-3Zm0-1v-3 1l1 3-1-1Zm3 8 5 3 1 2-4-2-2-3ZM5 46l1-2v2H5Zm31-34h1l2-1-1 1-8 5-4 2 10-7Zm8 6h-1l-5 1 6-2v1Zm-2 3h-1l-1 1 2-1Zm2 0-1 1 1-1Zm-9 5-3 2 6-5h2l-3 2-2 1Zm-9 17-1 2 1-3v1Zm1 11 2 2-3-2-1-2 2 2Zm9 6 1 1h-3l-5-2-6-5 1-4 1 4 6 4 5 2Zm31 17 1 3v2l-1-4v-1Zm-4-7-1-1h1l1 2-1-1Zm0 24v1-1Zm-25 29 1-1-3 2 2-1Zm-14 1 3-1h3l-2 1h-4Zm29-32-1 3-2 2v-1l3-4Zm-2-12h-1l3 1v3l-2-4Zm-3-3-2-3 1 1 5 5-2-1-2-2Zm-26-7h-1l1-1v1ZM8 53v-1 1Zm0-13-1 2v1l1-3Zm8 8 1-1v2l-1-1Zm2-16 1-1-1 1Zm8-4-3 2 1-2 12-6c-4 1-7 4-10 6Zm12-7-1 1-2 1-1 1 4-3Zm-8 9h-1l-1 1h-1l3-1Zm-1 2-3 2-2 2 4-4h1Zm-4 3v-1l1-1-1 2Zm2-5h-1v1l1-1Zm-5 9 1-1v1l-1 1v-1Zm-1-6-1 1v-1l1-1v1Zm-2 0v1l-2 3 1-2 1-2Zm33 32 3 3h-2c-3-1-6-2-9-1l-2-1 3-1h7Zm8 10 2 4-2-4Zm6 3-1-1v-2l1 3Zm-1 4-1-3 1-1v4Zm0 1-1 1v-2l-1-2 2 3Zm-2 9-3 3 1-6 2-2v5ZM42 71l-1-1h5l-2 1h-2Zm-3-2-5 1h-4l5-1h4ZM14 47l-1 1h-1l2-1Zm2 3 1 1v4l-1-3v-2Zm-3-10v1l-1 2 1-3Zm8 20 1 1-3-3 2 2Zm-4-21-1 3h-1v-1l2-2Zm-2 1 1-1v-1h2l-3 2Zm4 2h-1v1l1-1Zm3 4-2 1v-2h1l1 1Zm6 18-2-1-1-1 3 2Zm4 1h-1l-4-1h-1l6 1Zm-11 0h2v1h1l-3-1Zm-3-6h-1v-3 1l1 2Zm-2-5v3l-1-2-1-3v-1h1v2l1 1Zm6 4-2-4 2 4Zm0 5-1-1-2-1v-2l4 3 1 1h-2Zm-2 0h1l1 2-2-1v-1Zm3 1 2 1h-2v-1Zm-1-8-2-7 2 5v2Zm-6-13 1-1-1 2v1h-1l1-2Zm1 2h1v1l-1-1Zm2 4 1 8-2-4 1-4Zm-5 0v-1h1l-1 1Zm3 11v2l-3-1-1-2v-4l1-1v2l3 4Zm0 2v1l-1-1h-1 2Zm-5-11 1 2v5l-1-2v-5Zm2 10 1 2 2 1-1 1v-1h-1l-1-3Zm3 4 1-1 1 1 1 2-4-2h1Zm1-2h1v1l-1-1Zm5 4-1-1 3 1h-2Zm38 22-2 2v-2l2-2v2Zm-3 11 1-4 3-2-4 6Zm-8 10v-1l5-5-1 2-4 4Zm4-2h-1v1l1-1Zm-22 15 3-1 1-1-4 2Zm11-5 3-3h1l-4 3Zm-2 0-3 2-1 1 4-3Zm-3 0h-1l5-3-2 2-2 1Zm14-21h1v1l-2 4-2 1 1-2 1-2 1-2Zm8-20-2-1-4-1v-2l-1-1h1l6 5Zm-13-7h-1 4-3Zm0 1 2 1-4-1h2Zm1 0h1l3 1 1 1 1 2-2-1-1-1-3-2Zm4 4 2 2 1 4-3-6Zm3 3c2 3 3 7 3 11h-1c1-3 0-5-2-7v-4Zm3 14h-1v-1l1-1v2Zm-4 3v-1l3-3-1 2-2 2Zm3-5-2 2v-9c2 2 2 5 2 7Zm-2-3-1 5v-3l1-3v1Zm-6 14-2 2 3-2h-1Zm-7 7 3-3h1l-3 3h-1Zm2-1 4-3 2-1-1 1-5 3Zm9-9 1-2 2-1-4 6 1-3Zm4-4v-1l-2 6-1 1 3-6Zm-9 17-3 1-1 1 3-2 4-5-3 5Zm-15 8h-2l6-2-4 2Zm7-1v-1h2-1l-1 1Zm12-9-1 2h-1l-2 2 4-4Zm2-3 2-1v1h-1l-1 1v-1Zm-3 1 1-1 4-7 2-2-2 5-5 5Zm6-5 3-4-3 4Zm2-6-2 1 1-5 2-2-1 6Zm0-8c0-4-2-8-4-11v-1l3 1 2 1 1 2v5l-2 3Zm-1-15 1 2-6-4 5 2Zm-4-4h1l1 1-2-1Zm2 2-3-1-4-1h4l3 2Zm-8-3-3-1 6 1h-3Zm-2 0h-4l2-1 2 1Zm-5-1h-1 2-1Zm3 5 6 2h1l-5-1-2-1Zm7 3 2 2v3l-6-6 4 1Zm2 17 1-1v2l-1 1v-2Zm-6 9 1-1 2-1-7 6 4-4Zm-27 19h1-1Zm2 0 10-5 2-1-12 6Zm2 0 13-7v-1l-10 8h-3Zm4 0 17-12 2-2-2 3v1l5-6 3-3 1-1c-2 5-6 9-10 12l-1 1-2 1-4 2-8 4h-1Zm1 0h1l-5 2 4-2Zm1 2 4-2 3-1-2 1-4 2-4 1 3-1Zm5-1 1-1-1 1Zm12-5 2-3v1h-1l-1 2Zm14-28 1-2 1-1v1l-2 2Zm-2-16h-1l-2-3 2 2 1 1Zm-4-4-1-1 2 1h-1Zm-11-4h-4 4Zm-1 1h-2v1l-3-1h5Zm-3 1h-5l1-1 4 1Zm-6-2h-2l-1-1 5 1h-2Zm-2-3-4 1-1-1-3-1-2-3 1-2c1 2 3 4 6 5l3 1ZM21 50l-1-2 3-1 1 1v1l-2 4-1-3Zm-3-10-1 1 2-4v1l-1 2Zm-1-3 2-2v1l-2 1Zm-1-1-1 2-1 1v-1l2-2Zm-2 3v1l-1-1h1Zm0 2h1l-1 1v1-2Zm-2-2h-1v-1h1v1Zm2 6v1l-1 1v-2h1Zm-3-3v2h-1v-1l1-1Zm-3 1v1l-1 2 1-4 1-2-1 3Zm-1 4v1-1Zm6 16 1 1 1 1 5 2v1l-5-2-2-3Zm8 5v1l-1 1-2-2-2-1 5 1Zm2 1h2l-1 1-1-1Zm3 0Zm-2-1h-1l2-1-1 1Zm10-2h1l2 1-3-1Zm2 2h-7l4-1 3 1Zm-6 3 10-1 1 1H31v1l-1-1Zm24 12v4l-1-2 1-2Zm-38 38 10-5-7 4h-1l-2 1Zm6-1h4l-1 1-1 1h-1v1h-5l-1-1 5-2Zm18 2v-1 1Zm2-2 1-1 1-1-2 2Zm7-5 1-1-1 1Zm14-29h1-1Zm2-1v-1 2-1Zm2-5 1 4v1l-2 2 1-7Zm-5-12-3-3 2 2 1 1Zm-1 1 4 8-1 1-3-3-4-7 4 1Zm-4-1-3-2-2-1h1l7 3h-3Zm-2-3h1l2 1-3-1Zm-18-2h-3l4-1h2l-3 1Zm2-2h-1 2-1ZM24 47h-1l1-1v1Zm-1-1-1-2 2-1h1l-1 2-1 1Zm3-6-4 3h-1l1-2 5-3-1 2Zm0-14 7-5 9-2c-6 1-11 4-16 7Zm14-9h1l-6 2 5-2Zm5-2h-3l1-1h2v1Zm-3-1-7 2 5-3h3l-1 1Zm-12 3h1l3-1-3 2-4 2 3-3Zm4 2-6 3-2 1 3-2 5-2Zm-7 5h-1l-2 2 1-1 2-1Zm-3 1h-1l2-2-1 2Zm1 1-1 1-2 2v-1l3-2Zm-5 2 1-1 1-1-2 2Zm2 1h1l-1 2-1 1v-1l1-2Zm-4 1-3 3-3 1 2-2 6-4-2 2Zm-3 4h-1l-1 3h-2l1-2 3-1Zm-4 26 1 1v1l-1-2Zm-1-4v-1 2-1Zm4 11h1l1 1-2-1Zm4 3 2 1h-2l-1-1-2-2 3 2Zm6 2 2 1-3-1h-1 2Zm1 0h4v1l-4-1Zm3-1h1v1l-1-1Zm0-3h-1l-1-1h1l1 1Zm0-1 3-1h1l-3 2h-1v-1Zm11 5 3-1 2 2h-5v-1Zm6 2 3 3-6-4 3 1Zm8 11-1 3v-5l1 2Zm0 3-1 5v-3l1-3v1Zm-28 37h1v1l-6 1 2-2h3Zm39-26-7 8 4-5 3-3Zm5-14 4-9v3l-4 13v-7Zm-2-10v1l-1-1-1-5v1l2 4Zm-3-6-2-3h-1l3 3Zm-3-4-1-1-3-3h1l4 4h-1Zm-3-2h-3l-4-2h5l2 2Zm-6-1-9 1-1-1 5-1 5 1Zm-11 0h-1 1Zm-5-2-1-1 3 1h-2Zm-4-2-1-1-2-1 3 2Zm-6-7-1-1v-1l1 2Zm-1-3h-1v-2l1-1v3Zm8-17 5-4-1 1-4 3Zm0-1-3 2 1-2 6-4 2-1-6 5Zm6-2 4-3h2l-6 3Zm2-2h-1l1-1 2-3 5-3-2 2-5 5Zm6-4 2-2-3 2h1Zm3-2-3 2v1l3-3Zm-4-2 1-1h1v1h-2Zm-2-6-4 1 4-2v1Zm-5 1 1-1 3-1-4 2Zm1-2h-2l6-3-4 3Zm1-4-2 2h-3l5-2Zm-5 3L21 20l10-8 5-2ZM22 25l-1 1-6 4 7-5Zm-7 4 1-2-1 2Zm-1 2h-1l-2 2 1-1 2-1Zm-2 3-1 1v1l1-2Zm-3-1-1 2v-2l2-2-1 2Zm0 2-1 1v1l1-2Zm-2 0v1l-1 1 1-2Zm0 2-2 3v1H4v-1l3-3Zm-4 7-1 1 1-3v2Zm0 3 2-4-1 2v2l-1 2v-2Zm7 20-5-8v-2l1 3 4 7 2 2-1-1-1-1Zm5 4h3l5 2 3 2h-6l-7-5 2 1Zm26 33-6 4-3 1 9-5Zm-21 11 3-2 7-3 5-1h-1l-14 6Zm1 1h1l3-1 12-7h2l-13 8-7 1 2-1Zm2 1-7 3 2-2 5-1Zm-8 6v1l1 1h-1v-2Zm1 3 2 2h-1l-1-2Zm1-1h4l-1 1-1 2-2-3Zm6 6 5-1 3-1-1 1-7 1Zm51-46-5 10v1l-4 5v-1l3-5 6-15v-4l1 5-1 4Zm-1-14-1-2 1 1v1Zm-2-3 1 4c-1-3-4-6-8-9l6 3 1 2Zm-8-5c5 3 8 7 10 11l-1 1-2 7c1-2 2-4 1-7 0-4-4-8-8-9l-4-4h3l1 1Zm-4-2h-1l-1-1 4 1h-2Zm-2 0h-1l-2-2h2l1 2Zm-2-1-7 1h-2l1-1h-5l-5-1 7-1 7 1h2l2 1Zm-20-2-2-1h-1l7 1h1-5Zm-9-9v-2l1 2h-1Zm1-6-1 1v-2h1v1Zm1-4 5-6 6-3-11 9Zm20-25v1-2h1v1h-1Zm0-4v1h-1l-5-1 3-2h2l1 2Zm4-1V8l2 1h-2Zm2 1-1 1v-1h1Zm0 2 1-2v3h-1v-1Zm2 0-1-2h1v2Zm-1-5-4-2h3l1 2Zm0 1h-4l-3-1 2-1c1 0 3 0 5 2Zm-3 1-4 1V8h2l2 1Zm-5-3h-1 2-1Zm4 8 2-2v1l-2 1Zm3 0h1l-1 1v-1Zm2 0-1 3h-1l2-3Zm-1 3 2-1-1 1h-1Zm2-2-1 1 1-2h1l-1 1Zm0-1v-1h1v1h-1ZM55 2c1 0 4-1 5 1v2l-6-1-1-1 2-1Zm-2 2-3 1h-2l4-2 1 1ZM17 20c6-6 14-12 22-15l7-2h5l-5 2-12 5-17 10Zm-4 4 11-8-7 7-4 5-4 4 4-8ZM4 36l6-9-2 6-4 4v-1Zm-1 3 3-4-2 5-1 1v-2Zm-2 9c-1-3 0-5 1-8l1 1a10 10 0 0 0-1 8v2l-1-3Zm11 25A20 20 0 0 1 2 53l1 1v1l1 4c0 4 3 7 7 10l7 6-6-2Zm9 3 6-1c5 2 11 4 18 4-8 2-16 0-24-3Zm29 20h-1l1-1v1Zm-34 19v-1h3l-3 2-1 1 1-2Zm0 2 4-1-2 1h-4 2Zm-1 4v1h-1l1-1Zm-3 0h1l-1 1v-1Zm0 1v1h2v2h-1l-1-3Zm1 4h2l2 2h-2l-2-2Zm6 4-2-1 3 1h-1Zm16-2 2-1 2-2v1l4-3 4-2c-4 3-8 6-12 7Zm14-9-4 2 5-5 6-4 3-4c-2 4-6 8-10 11Zm24-50c3 3 4 6 5 9 1 6-1 12-6 20-6 9-13 16-20 20l10-12 8-10c3-4 5-10 5-15 1-4 0-8-2-11v-1Zm-3-7 2 5-1-1-6-6c-3-2-7-3-10-3 5 0 11 1 15 5Zm-6-2 5 5-6-3-7-3-2-1 10 2Zm-11-3 1 1h-1l-1-1h1Zm-1 1h-5l4-1 1 1Zm-7-4 5 3-6 1-5-1c-3 0-6 0-8-2l-2-4 8 2 8 1Zm-17-4-1-3v-1l1 4Zm2-10-2 3v-2l2-1Zm1 1 2-2 2-1-4 3Zm7-6-4 3v-1l12-10-8 8Zm8-6-4 4 6-7 2-1-4 4Zm5-6 1-1h1l-2 1Zm1-2v-1h1l-1 1Zm2 1h-1v-1l1 1Zm-4-6v-1l3-1v2l-1 1-2-1Zm4 4 1-1-1 2v-1Zm4-1-3 1 2-2h1v1Zm6-6-1 2-4 3-1-1h-1l2-3 1-2 4 1Z" fill="#F2C938"/>
        <path class="s3 mix-blend-overlay" d="m28 97-17 1 2-24c11 2 20 1 29-3 3-2 6-3 7-5 2-1 2-3 1-4l-4-2-9 1-15 1-11-2c-4-2-6-5-8-10a29 29 0 0 1 7-33L29 5l17-5h15l-2 23-11-1-12 4c-4 1-6 3-8 5-1 1-2 3-1 4 0 2 2 3 4 3l10-1 14-2c4 0 8 1 11 3 4 1 7 4 8 9 3 6 3 11 2 17-1 5-4 11-9 15-5 5-12 9-19 13l-20 5Z" fill="#F2C938"/>
        <path class="s4 mix-blend-overlay" d="m56 44-2 1h-1c-3-1-6 0-9 1v-7c1-4 4-6 7-7l4-1 6-3h1L59 5l-9-2-7-3S16 7 5 25c-6 10-6 23-1 33 1 2 2 5 4 6 4 4 10 6 16 6l17 1c3 1 5 2 6 4s0 4-1 6l-5 3c-5 2-10 3-15 2l-2 17v2l6 5 6 5 3 2h2c9-1 17-3 25-7l8-5c3-1 5-3 7-6 5-5 8-11 10-19v-6l-1-6c-6-13-20-23-34-24Zm-28-3c-1-3-2-5 1-8 2-3 6-5 9-6 5-3 4-3 10-4L43 2l7 2 8 3 2 20-5 2-4 2c-3 1-7 3-8 7v8h-8c-2-1-5-2-7-5Zm62 33v6c-2 10-8 18-16 24l-9 5c-8 4-17 6-26 7l-2-2-6-5-3-3c9 3 18 3 26-1 10-4 17-12 22-21l2-9c1-5-1-10-3-14-1-3-2-7-5-9-2-3-5-4-8-5l-2-1c12 2 24 11 29 23l1 5Z" fill="#F2C938"/>
        <path class="s5 mix-blend-overlay" d="M18 79C5 74-6 49 14 47c7 0 27 5 27-2s-27 2-35-8c-9-10-8-25 8-33s38-1 33 13c-4 13-26 2-25 9 1 9 35-7 46 9 15 20-15 59-50 44Z" fill="#F2C938"/>
    </svg>
</div>

<div class="js-animation-s2 rotate-45 w-full pointer-events-none">
    <svg class="mix-blend-multiply" viewBox="0 0 2202 626">
        <path class="infinity" d="M1 625C113 412.333 450.8 51.8 906 311 1475 635 2109 152 2201 1" fill="none" stroke="green"/>
        <path class="s1" d="M1 44c-1 6 0 13 4 18l4 7c4 5 4 12 10 15 5 3 10 1 14 2 5 0 10 2 15 6 2 1 4 2 5 5v6l-6 1-5-3-10-4c-3 0-7 1-8 5 0 3 2 7 5 9 5 5 10 11 18 14 6 2 14 2 22 1 2-1 6-1 8-3 5-2 6-8 8-14 1-5 3-11 2-17s-4-12-8-15l-7-4-6-4c-7-6-17-6-25-7l-6-3c-4-2-6-7-5-11 0-4 3-8 6-9 2-1 5-1 6 1l1 1c1 4 4 5 7 6s7 0 10-1c5-2 10-6 11-12 1-5 0-10-2-14l-5-9c-4-4-8-6-13-7-4-2-9-4-15-4-9 0-23 8-29 16L5 27 1 44Z" fill="#F2C938"/>
        <path class="s2 mix-blend-multiply" d="M65 12h-4V5l-1-3c-1-2-4-1-5 0l-3 1-6-1-15 6c-4 2-10 6-15 11l-4 5c-4 4-7 9-9 15l-3 9 1 4v3c0 8 4 15 11 19l8 1c8 5 18 7 28 5h1c2 2 2 5 2 8v3l-5 9-22 11-10 4h1l-1 2v4h-2v-1h-1l1 1-1 1v1l1 2-5-1v1l5 1 2 2-2-1v1l3 1 3 1 4 1h6v1l1-1c8-2 15-6 21-11 7-4 15-11 23-22 5-8 7-14 6-20-1-3-3-7-6-10 0-3-1-5-3-7-5-5-13-5-18-4h-1l-6-3-8-2-8-2-1-5 2-3 9-6c6-3 11-8 15-13v-1h2l3-3 6-7Zm-5-1v1h-1l1-5v4Zm-1 1h-2V9l-2-2V5c1-1 4-1 5 1l-1 6Zm-9 2 1-2h-2l-1-1 4-1 1 1-2 2-1 1Zm0 4v-1h1l-1 1Zm-8 10-7 3 3-2v1l1-1 10-7-7 6Zm-8 9-2 2-4 1 6-3Zm41 41-2-4v-3l2 7Zm-61 40h1v2l-1-2Zm3 0-2 2v-2h2Zm4-3 7-2-4 2v-1l-3 1Zm5-4h1l-4 2-2 1 5-3Zm22-32h-3l-17-4 8-2h3c4 1 7 3 10 6h-1ZM2 52v-2l1 1v2l-1-1Zm21-30 6-2-4 2-7 5 5-5Zm24-10v-1h1l-1 1-2 1 2-1Zm-2 0-1-1h3-1l-1 1Zm0 2 2-1v2h-2v-1Zm4 3h-1v-1l1 1ZM31 34l-3 4 2-3 1-1Zm-4 16 4 6-4-3-1-3h1Zm41 25-1-2c2 2 3 6 2 9l-1-7Zm-4-8c4 1 6 5 7 8l-1 5c0-3-1-7-3-9l-3-4Zm-1 31-1 1 2-4 1-2 2-3-1 4-3 4Zm-41 31h-1l-1-1 1 1h1l10-4v1l-3 2v1l8-4v-1l-1 1-1 1c-2 2-4 3-7 3h-6Zm-6-4v-2l2 1h1l-2 1h-1Zm15-52h3-2l-1 1v-1Zm-11-3 2 1h-1l-1-1ZM4 47h2l-1 1v5l-1-1v-5Zm5 12 1 1 3 4v1l-1-1-3-4v-1Zm-1-6 1 2v3H8v-5Zm1 4 1 2-1-1v-1Zm-1 6 1 1v1l-2-3 1 1Zm-4-8v-2l1 1-1 1Zm2 2 1 1 1 2-2-3Zm0-1v-3 1l1 3-1-1Zm3 8 5 3 1 2-4-2-2-3ZM5 46l1-2v2H5Zm31-34h1l2-1-1 1-8 5-4 2 10-7Zm8 6h-1l-5 1 6-2v1Zm-2 3h-1l-1 1 2-1Zm2 0-1 1 1-1Zm-9 5-3 2 6-5h2l-3 2-2 1Zm-9 17-1 2 1-3v1Zm1 11 2 2-3-2-1-2 2 2Zm9 6 1 1h-3l-5-2-6-5 1-4 1 4 6 4 5 2Zm31 17 1 3v2l-1-4v-1Zm-4-7-1-1h1l1 2-1-1Zm0 24v1-1Zm-25 29 1-1-3 2 2-1Zm-14 1 3-1h3l-2 1h-4Zm29-32-1 3-2 2v-1l3-4Zm-2-12h-1l3 1v3l-2-4Zm-3-3-2-3 1 1 5 5-2-1-2-2Zm-26-7h-1l1-1v1ZM8 53v-1 1Zm0-13-1 2v1l1-3Zm8 8 1-1v2l-1-1Zm2-16 1-1-1 1Zm8-4-3 2 1-2 12-6c-4 1-7 4-10 6Zm12-7-1 1-2 1-1 1 4-3Zm-8 9h-1l-1 1h-1l3-1Zm-1 2-3 2-2 2 4-4h1Zm-4 3v-1l1-1-1 2Zm2-5h-1v1l1-1Zm-5 9 1-1v1l-1 1v-1Zm-1-6-1 1v-1l1-1v1Zm-2 0v1l-2 3 1-2 1-2Zm33 32 3 3h-2c-3-1-6-2-9-1l-2-1 3-1h7Zm8 10 2 4-2-4Zm6 3-1-1v-2l1 3Zm-1 4-1-3 1-1v4Zm0 1-1 1v-2l-1-2 2 3Zm-2 9-3 3 1-6 2-2v5ZM42 71l-1-1h5l-2 1h-2Zm-3-2-5 1h-4l5-1h4ZM14 47l-1 1h-1l2-1Zm2 3 1 1v4l-1-3v-2Zm-3-10v1l-1 2 1-3Zm8 20 1 1-3-3 2 2Zm-4-21-1 3h-1v-1l2-2Zm-2 1 1-1v-1h2l-3 2Zm4 2h-1v1l1-1Zm3 4-2 1v-2h1l1 1Zm6 18-2-1-1-1 3 2Zm4 1h-1l-4-1h-1l6 1Zm-11 0h2v1h1l-3-1Zm-3-6h-1v-3 1l1 2Zm-2-5v3l-1-2-1-3v-1h1v2l1 1Zm6 4-2-4 2 4Zm0 5-1-1-2-1v-2l4 3 1 1h-2Zm-2 0h1l1 2-2-1v-1Zm3 1 2 1h-2v-1Zm-1-8-2-7 2 5v2Zm-6-13 1-1-1 2v1h-1l1-2Zm1 2h1v1l-1-1Zm2 4 1 8-2-4 1-4Zm-5 0v-1h1l-1 1Zm3 11v2l-3-1-1-2v-4l1-1v2l3 4Zm0 2v1l-1-1h-1 2Zm-5-11 1 2v5l-1-2v-5Zm2 10 1 2 2 1-1 1v-1h-1l-1-3Zm3 4 1-1 1 1 1 2-4-2h1Zm1-2h1v1l-1-1Zm5 4-1-1 3 1h-2Zm38 22-2 2v-2l2-2v2Zm-3 11 1-4 3-2-4 6Zm-8 10v-1l5-5-1 2-4 4Zm4-2h-1v1l1-1Zm-22 15 3-1 1-1-4 2Zm11-5 3-3h1l-4 3Zm-2 0-3 2-1 1 4-3Zm-3 0h-1l5-3-2 2-2 1Zm14-21h1v1l-2 4-2 1 1-2 1-2 1-2Zm8-20-2-1-4-1v-2l-1-1h1l6 5Zm-13-7h-1 4-3Zm0 1 2 1-4-1h2Zm1 0h1l3 1 1 1 1 2-2-1-1-1-3-2Zm4 4 2 2 1 4-3-6Zm3 3c2 3 3 7 3 11h-1c1-3 0-5-2-7v-4Zm3 14h-1v-1l1-1v2Zm-4 3v-1l3-3-1 2-2 2Zm3-5-2 2v-9c2 2 2 5 2 7Zm-2-3-1 5v-3l1-3v1Zm-6 14-2 2 3-2h-1Zm-7 7 3-3h1l-3 3h-1Zm2-1 4-3 2-1-1 1-5 3Zm9-9 1-2 2-1-4 6 1-3Zm4-4v-1l-2 6-1 1 3-6Zm-9 17-3 1-1 1 3-2 4-5-3 5Zm-15 8h-2l6-2-4 2Zm7-1v-1h2-1l-1 1Zm12-9-1 2h-1l-2 2 4-4Zm2-3 2-1v1h-1l-1 1v-1Zm-3 1 1-1 4-7 2-2-2 5-5 5Zm6-5 3-4-3 4Zm2-6-2 1 1-5 2-2-1 6Zm0-8c0-4-2-8-4-11v-1l3 1 2 1 1 2v5l-2 3Zm-1-15 1 2-6-4 5 2Zm-4-4h1l1 1-2-1Zm2 2-3-1-4-1h4l3 2Zm-8-3-3-1 6 1h-3Zm-2 0h-4l2-1 2 1Zm-5-1h-1 2-1Zm3 5 6 2h1l-5-1-2-1Zm7 3 2 2v3l-6-6 4 1Zm2 17 1-1v2l-1 1v-2Zm-6 9 1-1 2-1-7 6 4-4Zm-27 19h1-1Zm2 0 10-5 2-1-12 6Zm2 0 13-7v-1l-10 8h-3Zm4 0 17-12 2-2-2 3v1l5-6 3-3 1-1c-2 5-6 9-10 12l-1 1-2 1-4 2-8 4h-1Zm1 0h1l-5 2 4-2Zm1 2 4-2 3-1-2 1-4 2-4 1 3-1Zm5-1 1-1-1 1Zm12-5 2-3v1h-1l-1 2Zm14-28 1-2 1-1v1l-2 2Zm-2-16h-1l-2-3 2 2 1 1Zm-4-4-1-1 2 1h-1Zm-11-4h-4 4Zm-1 1h-2v1l-3-1h5Zm-3 1h-5l1-1 4 1Zm-6-2h-2l-1-1 5 1h-2Zm-2-3-4 1-1-1-3-1-2-3 1-2c1 2 3 4 6 5l3 1ZM21 50l-1-2 3-1 1 1v1l-2 4-1-3Zm-3-10-1 1 2-4v1l-1 2Zm-1-3 2-2v1l-2 1Zm-1-1-1 2-1 1v-1l2-2Zm-2 3v1l-1-1h1Zm0 2h1l-1 1v1-2Zm-2-2h-1v-1h1v1Zm2 6v1l-1 1v-2h1Zm-3-3v2h-1v-1l1-1Zm-3 1v1l-1 2 1-4 1-2-1 3Zm-1 4v1-1Zm6 16 1 1 1 1 5 2v1l-5-2-2-3Zm8 5v1l-1 1-2-2-2-1 5 1Zm2 1h2l-1 1-1-1Zm3 0Zm-2-1h-1l2-1-1 1Zm10-2h1l2 1-3-1Zm2 2h-7l4-1 3 1Zm-6 3 10-1 1 1H31v1l-1-1Zm24 12v4l-1-2 1-2Zm-38 38 10-5-7 4h-1l-2 1Zm6-1h4l-1 1-1 1h-1v1h-5l-1-1 5-2Zm18 2v-1 1Zm2-2 1-1 1-1-2 2Zm7-5 1-1-1 1Zm14-29h1-1Zm2-1v-1 2-1Zm2-5 1 4v1l-2 2 1-7Zm-5-12-3-3 2 2 1 1Zm-1 1 4 8-1 1-3-3-4-7 4 1Zm-4-1-3-2-2-1h1l7 3h-3Zm-2-3h1l2 1-3-1Zm-18-2h-3l4-1h2l-3 1Zm2-2h-1 2-1ZM24 47h-1l1-1v1Zm-1-1-1-2 2-1h1l-1 2-1 1Zm3-6-4 3h-1l1-2 5-3-1 2Zm0-14 7-5 9-2c-6 1-11 4-16 7Zm14-9h1l-6 2 5-2Zm5-2h-3l1-1h2v1Zm-3-1-7 2 5-3h3l-1 1Zm-12 3h1l3-1-3 2-4 2 3-3Zm4 2-6 3-2 1 3-2 5-2Zm-7 5h-1l-2 2 1-1 2-1Zm-3 1h-1l2-2-1 2Zm1 1-1 1-2 2v-1l3-2Zm-5 2 1-1 1-1-2 2Zm2 1h1l-1 2-1 1v-1l1-2Zm-4 1-3 3-3 1 2-2 6-4-2 2Zm-3 4h-1l-1 3h-2l1-2 3-1Zm-4 26 1 1v1l-1-2Zm-1-4v-1 2-1Zm4 11h1l1 1-2-1Zm4 3 2 1h-2l-1-1-2-2 3 2Zm6 2 2 1-3-1h-1 2Zm1 0h4v1l-4-1Zm3-1h1v1l-1-1Zm0-3h-1l-1-1h1l1 1Zm0-1 3-1h1l-3 2h-1v-1Zm11 5 3-1 2 2h-5v-1Zm6 2 3 3-6-4 3 1Zm8 11-1 3v-5l1 2Zm0 3-1 5v-3l1-3v1Zm-28 37h1v1l-6 1 2-2h3Zm39-26-7 8 4-5 3-3Zm5-14 4-9v3l-4 13v-7Zm-2-10v1l-1-1-1-5v1l2 4Zm-3-6-2-3h-1l3 3Zm-3-4-1-1-3-3h1l4 4h-1Zm-3-2h-3l-4-2h5l2 2Zm-6-1-9 1-1-1 5-1 5 1Zm-11 0h-1 1Zm-5-2-1-1 3 1h-2Zm-4-2-1-1-2-1 3 2Zm-6-7-1-1v-1l1 2Zm-1-3h-1v-2l1-1v3Zm8-17 5-4-1 1-4 3Zm0-1-3 2 1-2 6-4 2-1-6 5Zm6-2 4-3h2l-6 3Zm2-2h-1l1-1 2-3 5-3-2 2-5 5Zm6-4 2-2-3 2h1Zm3-2-3 2v1l3-3Zm-4-2 1-1h1v1h-2Zm-2-6-4 1 4-2v1Zm-5 1 1-1 3-1-4 2Zm1-2h-2l6-3-4 3Zm1-4-2 2h-3l5-2Zm-5 3L21 20l10-8 5-2ZM22 25l-1 1-6 4 7-5Zm-7 4 1-2-1 2Zm-1 2h-1l-2 2 1-1 2-1Zm-2 3-1 1v1l1-2Zm-3-1-1 2v-2l2-2-1 2Zm0 2-1 1v1l1-2Zm-2 0v1l-1 1 1-2Zm0 2-2 3v1H4v-1l3-3Zm-4 7-1 1 1-3v2Zm0 3 2-4-1 2v2l-1 2v-2Zm7 20-5-8v-2l1 3 4 7 2 2-1-1-1-1Zm5 4h3l5 2 3 2h-6l-7-5 2 1Zm26 33-6 4-3 1 9-5Zm-21 11 3-2 7-3 5-1h-1l-14 6Zm1 1h1l3-1 12-7h2l-13 8-7 1 2-1Zm2 1-7 3 2-2 5-1Zm-8 6v1l1 1h-1v-2Zm1 3 2 2h-1l-1-2Zm1-1h4l-1 1-1 2-2-3Zm6 6 5-1 3-1-1 1-7 1Zm51-46-5 10v1l-4 5v-1l3-5 6-15v-4l1 5-1 4Zm-1-14-1-2 1 1v1Zm-2-3 1 4c-1-3-4-6-8-9l6 3 1 2Zm-8-5c5 3 8 7 10 11l-1 1-2 7c1-2 2-4 1-7 0-4-4-8-8-9l-4-4h3l1 1Zm-4-2h-1l-1-1 4 1h-2Zm-2 0h-1l-2-2h2l1 2Zm-2-1-7 1h-2l1-1h-5l-5-1 7-1 7 1h2l2 1Zm-20-2-2-1h-1l7 1h1-5Zm-9-9v-2l1 2h-1Zm1-6-1 1v-2h1v1Zm1-4 5-6 6-3-11 9Zm20-25v1-2h1v1h-1Zm0-4v1h-1l-5-1 3-2h2l1 2Zm4-1V8l2 1h-2Zm2 1-1 1v-1h1Zm0 2 1-2v3h-1v-1Zm2 0-1-2h1v2Zm-1-5-4-2h3l1 2Zm0 1h-4l-3-1 2-1c1 0 3 0 5 2Zm-3 1-4 1V8h2l2 1Zm-5-3h-1 2-1Zm4 8 2-2v1l-2 1Zm3 0h1l-1 1v-1Zm2 0-1 3h-1l2-3Zm-1 3 2-1-1 1h-1Zm2-2-1 1 1-2h1l-1 1Zm0-1v-1h1v1h-1ZM55 2c1 0 4-1 5 1v2l-6-1-1-1 2-1Zm-2 2-3 1h-2l4-2 1 1ZM17 20c6-6 14-12 22-15l7-2h5l-5 2-12 5-17 10Zm-4 4 11-8-7 7-4 5-4 4 4-8ZM4 36l6-9-2 6-4 4v-1Zm-1 3 3-4-2 5-1 1v-2Zm-2 9c-1-3 0-5 1-8l1 1a10 10 0 0 0-1 8v2l-1-3Zm11 25A20 20 0 0 1 2 53l1 1v1l1 4c0 4 3 7 7 10l7 6-6-2Zm9 3 6-1c5 2 11 4 18 4-8 2-16 0-24-3Zm29 20h-1l1-1v1Zm-34 19v-1h3l-3 2-1 1 1-2Zm0 2 4-1-2 1h-4 2Zm-1 4v1h-1l1-1Zm-3 0h1l-1 1v-1Zm0 1v1h2v2h-1l-1-3Zm1 4h2l2 2h-2l-2-2Zm6 4-2-1 3 1h-1Zm16-2 2-1 2-2v1l4-3 4-2c-4 3-8 6-12 7Zm14-9-4 2 5-5 6-4 3-4c-2 4-6 8-10 11Zm24-50c3 3 4 6 5 9 1 6-1 12-6 20-6 9-13 16-20 20l10-12 8-10c3-4 5-10 5-15 1-4 0-8-2-11v-1Zm-3-7 2 5-1-1-6-6c-3-2-7-3-10-3 5 0 11 1 15 5Zm-6-2 5 5-6-3-7-3-2-1 10 2Zm-11-3 1 1h-1l-1-1h1Zm-1 1h-5l4-1 1 1Zm-7-4 5 3-6 1-5-1c-3 0-6 0-8-2l-2-4 8 2 8 1Zm-17-4-1-3v-1l1 4Zm2-10-2 3v-2l2-1Zm1 1 2-2 2-1-4 3Zm7-6-4 3v-1l12-10-8 8Zm8-6-4 4 6-7 2-1-4 4Zm5-6 1-1h1l-2 1Zm1-2v-1h1l-1 1Zm2 1h-1v-1l1 1Zm-4-6v-1l3-1v2l-1 1-2-1Zm4 4 1-1-1 2v-1Zm4-1-3 1 2-2h1v1Zm6-6-1 2-4 3-1-1h-1l2-3 1-2 4 1Z" fill="#F2C938"/>
        <path class="s3 mix-blend-overlay" d="m28 97-17 1 2-24c11 2 20 1 29-3 3-2 6-3 7-5 2-1 2-3 1-4l-4-2-9 1-15 1-11-2c-4-2-6-5-8-10a29 29 0 0 1 7-33L29 5l17-5h15l-2 23-11-1-12 4c-4 1-6 3-8 5-1 1-2 3-1 4 0 2 2 3 4 3l10-1 14-2c4 0 8 1 11 3 4 1 7 4 8 9 3 6 3 11 2 17-1 5-4 11-9 15-5 5-12 9-19 13l-20 5Z" fill="#F2C938"/>
        <path class="s4 mix-blend-overlay" d="m56 44-2 1h-1c-3-1-6 0-9 1v-7c1-4 4-6 7-7l4-1 6-3h1L59 5l-9-2-7-3S16 7 5 25c-6 10-6 23-1 33 1 2 2 5 4 6 4 4 10 6 16 6l17 1c3 1 5 2 6 4s0 4-1 6l-5 3c-5 2-10 3-15 2l-2 17v2l6 5 6 5 3 2h2c9-1 17-3 25-7l8-5c3-1 5-3 7-6 5-5 8-11 10-19v-6l-1-6c-6-13-20-23-34-24Zm-28-3c-1-3-2-5 1-8 2-3 6-5 9-6 5-3 4-3 10-4L43 2l7 2 8 3 2 20-5 2-4 2c-3 1-7 3-8 7v8h-8c-2-1-5-2-7-5Zm62 33v6c-2 10-8 18-16 24l-9 5c-8 4-17 6-26 7l-2-2-6-5-3-3c9 3 18 3 26-1 10-4 17-12 22-21l2-9c1-5-1-10-3-14-1-3-2-7-5-9-2-3-5-4-8-5l-2-1c12 2 24 11 29 23l1 5Z" fill="#F2C938"/>
        <path class="s5 mix-blend-overlay" d="M18 79C5 74-6 49 14 47c7 0 27 5 27-2s-27 2-35-8c-9-10-8-25 8-33s38-1 33 13c-4 13-26 2-25 9 1 9 35-7 46 9 15 20-15 59-50 44Z" fill="#F2C938"/>
    </svg>
</div>
              
            
!

CSS

              
                
              
            
!

JS

              
                const val = { distance: 0 };

const path1 = document.querySelector('.js-animation-s1 .infinity');
const path2 = document.querySelector('.js-animation-s2 .infinity');

const path1S1 = document.querySelector('.js-animation-s1 .s1');
const path1S2 = document.querySelector('.js-animation-s1 .s2');
const path1S3 = document.querySelector('.js-animation-s1 .s3');
const path1S4 = document.querySelector('.js-animation-s1 .s4');
const path1S5 = document.querySelector('.js-animation-s1 .s5');

const path2S1 = document.querySelector('.js-animation-s2 .s1');
const path2S2 = document.querySelector('.js-animation-s2 .s2');
const path2S3 = document.querySelector('.js-animation-s2 .s3');
const path2S4 = document.querySelector('.js-animation-s2 .s4');
const path2S5 = document.querySelector('.js-animation-s2 .s5');

gsap.to(val, {
    distance: path1.getTotalLength(),
    delay: 1,
    repeat: -1,
    repeatDelay: 20,
    duration: 5,
    ease: "power1",
    onUpdate: () => {
        const point = path1.getPointAtLength(val.distance);
        path1S1.style.transform = 'translate(' + point.x + 'px, ' + point.y + 'px)';
    }
});

gsap.to(val, {
    distance: path1.getTotalLength(),
    delay: 1,
    repeat: -1,
    repeatDelay: 20,
    duration: 5,
    ease: "power2",
    onUpdate: () => {
        const point = path1.getPointAtLength(val.distance);
        path1S2.style.transform = 'translate(' + (point.x+10) + 'px, ' + (point.y+10) + 'px)';
    }
});

gsap.to(val, {
    distance: path1.getTotalLength(),
    delay: 1,
    repeat: -1,
    repeatDelay: 20,
    duration: 5,
    ease: "power3",
    onUpdate: () => {
        const point = path1.getPointAtLength(val.distance);
        path1S3.style.transform = 'translate(' + (point.x+20) + 'px, ' + (point.y+20) + 'px)';
    }
});

gsap.to(val, {
    distance: path1.getTotalLength(),
    delay: 1,
    repeat: -1,
    repeatDelay: 20,
    duration: 5,
    ease: "power4",
    onUpdate: () => {
        const point = path1.getPointAtLength(val.distance);
        path1S4.style.transform = 'translate(' + (point.x+30) + 'px, ' + (point.y+30) + 'px)';
    }
});

gsap.to(val, {
    distance: path1.getTotalLength(),
    delay: 1,
    repeat: -1,
    repeatDelay: 20,
    duration: 5,
    ease: "expo",
    onUpdate: () => {
        const point = path1.getPointAtLength(val.distance);
        path1S5.style.transform = 'translate(' + (point.x+50) + 'px, ' + (point.y+60) + 'px)';
    }
});

gsap.to(val, {
    distance: path2.getTotalLength(),
    delay: 10,
    repeat: -1,
    repeatDelay: 20,
    duration: 6,
    ease: "power1",
    onUpdate: () => {
        const point = path2.getPointAtLength(val.distance);
        path2S1.style.transform = 'translate(' + point.x + 'px, ' + point.y + 'px)';
    }
});

gsap.to(val, {
    distance: path2.getTotalLength(),
    delay: 10,
    repeat: -1,
    repeatDelay: 20,
    duration: 6,
    ease: "power2",
    onUpdate: () => {
        const point = path2.getPointAtLength(val.distance);
        path2S2.style.transform = 'translate(' + (point.x+10) + 'px, ' + (point.y+10) + 'px)';
    }
});

gsap.to(val, {
    distance: path2.getTotalLength(),
    delay: 10,
    repeat: -1,
    repeatDelay: 20,
    duration: 6,
    ease: "power3",
    onUpdate: () => {
        const point = path2.getPointAtLength(val.distance);
        path2S3.style.transform = 'translate(' + (point.x+20) + 'px, ' + (point.y+20) + 'px)';
    }
});

gsap.to(val, {
    distance: path2.getTotalLength(),
    delay: 10,
    repeat: -1,
    repeatDelay: 20,
    duration: 6,
    ease: "power4",
    onUpdate: () => {
        const point = path2.getPointAtLength(val.distance);
        path2S4.style.transform = 'translate(' + (point.x+30) + 'px, ' + (point.y+30) + 'px)';
    }
});

gsap.to(val, {
    distance: path2.getTotalLength(),
    delay: 10,
    repeat: -1,
    repeatDelay: 20,
    duration: 6,
    ease: "expo",
    onUpdate: () => {
        const point = path2.getPointAtLength(val.distance);
        path2S5.style.transform = 'translate(' + (point.x+50) + 'px, ' + (point.y+60) + 'px)';
    }
});
              
            
!
999px

Console