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

              
                <h1 class="line mask">Mask</h1>
<h1 class="line your">YOUR</h1>
<h1 class="line lives">can save lives</h1>

<svg  viewBox="30 0 500 400" >
  <g id="socke">
    <g id="Fallschirm">
      <path d="M84.69 31c-7.28-.8-16.94 18.5-18.07 31.77-.03.45-15.73-.08-24.3 6.95-2.74-10.27-4.44-24.49 3.11-30.29 0 0 14.54-11.14 40.6-9.2" fill="#04ff00" fill-opacity=".73" stroke="#000"/>
      <path d="M92.44 58.87c7.42-2.49 15.45-3.67 23.81-4.1C92.6 19.8 79.35 27.96 72.92 42.4c9.3 4.5 15.24 9.63 19.52 16.47z" fill="#4aff00" stroke="#000"/>
      <path d="M42.53 69.84l53 33.41-29-40.4" fill="none" stroke="#a3a3a3"/>
      <path d="M92.52 58.9l10 42.85 13.52-46.8" fill="none" stroke="#a3a3a3"/>
      <path d="M55.84 34.33c-1.39 6.76-1.87 10.17-4.3 17.82 1-5.17 3.07-11.85 3.34-17.65l9.34-2.72c-1.39 11.26-6.05 19.35-5.82 20.29.13.5 3.95-9.75 4.9-19.96" fill="none" stroke="#000"/>
    </g>
    <g fill-rule="nonzero">
      <path d="M75.02 111.96a31.29 31.29 0 00-5.98 4.63c-.76.9-.99-.5-.2-2.85.62-1.89 2.2-4.46 4.85-6.66 1.56-1.27 4.97-3.1 7.05-4.17a69.8 69.8 0 0110.78-3.7c.42-.11-.5.7-.65 1.16-.73 2.14-15.37 11.34-15.37 11.34l-.48.25z" fill="#010101"/>
      <path d="M95.64 137.83c.25 1.52.03 1.63-1.55 1.83a4.1 4.1 0 01-3.16-.79c-.43-.4-.5-1.27-.09-2.06.26-.5.51-.67.65-1.3.14-.59.26-.73.37-.95.11-.2.14-.4.17-1.78s0-3.98.14-5.08c.14-1.13 5.02.51 5.02.51s-1.16 2.88-1.47 3.58c-.3.7-.28 2.06-.28 2.34 0 .29-.11.85-.2.88-.08.03.29.76.12 1.18-.12.4.25 1.41.28 1.64z" fill="#010101"/>
      <path d="M97.5 94.7c-.17-1.07 0-3.19.23-3.53.7-.95 4.42-1.07 5.21.06.34.5.31 1.7.26 2.45-.06.77-.26 2.4-.28 2.94-.03.4-4.12 1.01-5.02-.06-.26-.28-.4-1.86-.4-1.86z" fill="#010101"/>
      <path d="M105.8 135.1c1.71 1.23 3.04 1.46 3.91 1.91.88.45.65 1.33-.81 1.58-1.19.23-3.05-.22-4.3-.22-1.23 0-4 .14-4.73-.37-.85-.6-.48-1.7-.48-1.7.23-.61.79-2 .62-3.12-.17-1.13-.4-1.75-.82-2.8-.42-1.04-.73-3.6-.34-3.75.4-.14.29 0 .8.11.5.12 1.07.29 2.17.29 1.1 0 2.3-.17 2.73-.26.43-.08.76-.17.62.7-.14.88-.56 2.52-.59 3.79-.03 1.27-.03 2.73.06 2.99.08.25.7.53 1.15.84z" fill="#010101"/>
      <g fill="#8ac640">
        <path d="M99.76 97.52c-3.1 2.68-9.11 3.41-18.03 6.86-2.28.87-8.38 3.5-9.84 6.23 4.94-2.85 6.77 1.07 7.16 5.1.37 3.78 2.26 5.76 7.11 5.65 5-.12 6.52 2.79 7.9 6.2 2.68-13.06 6.97-15.6 9.73-17.83 5.87-4.76-1.35-13.17-4.03-12.21z"/>
        <path d="M99.76 97.52c-7.45 2.6-14.81 3.24-23.47 8.58-2.06 1.27-6.4 4.14-7.25 9.64 3.16-3.5 10.46-7.9 19.4-10.69 4.52-1.4 7.82-2.34 11.83-3.9-.29-1.8-.29-2.5-.51-3.63z"/>
      </g>
      <path d="M109.26 112.98s-.53 1.83-1.6 2.42c0 0-.8.29-2.37-.59-.46-.25-.8-1.13-.77-1.4.03-.69.46-1 .46-1s.45-.76.98-.73c.54.03 1.44.11 1.72-.14.26-.28 1.64.5 1.58 1.44z" fill="#010101"/>
      <path d="M97.75 95.24s-.1 1.43-.3 2.34c-.03.17-.88.25-1.5.5 1.18 3.39 8.32 3.36 9.25 1.7-.45-.31-1.35-.8-1.78-.96-.42-.17-.4-.14-.42-.93-.03-.8-.08-2.26-.14-2.65-.06-.4-4.43-.4-5.1 0z" fill="#010101"/>
      <path d="M98.04 95.24s0 .81-.09 1.6c-.03.37-.05.6-.11.88-.03.17.96.84 1.24 2.34 1.35 3.02 4.49 1.52 5.78.08-.45-.3-1.18-.73-2.03-1.07-.42-.17-.22-.53-.25-1.32-.03-.8-.14-1.95-.2-2.37-.06-.43-3.67-.54-4.34-.14z" fill="#f0efef"/>
      <path d="M97.75 95.24s-.02.5-.1 1.1c.36.36.84.87 1.2 1.18.26.23.88.2 1.44.2.51 0 .96.05 1.16-.06.45-.22 1.1-.79 1.47-1.21-.03-.5-.06-.99-.09-1.21-.03-.4-4.4-.4-5.08 0z" fill="#010101"/>
      <path d="M100.32 97.38a6.3 6.3 0 01-1.04-.08c-.14-.03-.28-.12-.4-.17l-.62-.48c-.45-.34-.48-.54-.48-.62.2-1.78-.05-3.28-.05-3.28s-.2-.76.87-.96c1.07-.2 1.72-.22 1.72-.22s.68 0 1.72.22c1.07.2.88.96.88.96s-.26 1.5-.06 3.28c0 .08-.03.28-.48.62-.4.28-.7.59-1.01.64-.32.06-.71.09-1.05.09z" fill="#010101"/>
      <path d="M100.32 90.83c-1.86 0-2.23.51-2.76 1.08-.12.14-.03.98.17 2.79h.25s-.17-.5-.14-1.1c.03-.6.14-.56.05-.7-.1-.18-.33-.46.17-.74.51-.28 1.3.23 2.26.26.96-.03 1.78-.54 2.29-.26.5.28.28.57.17.73-.12.17.02.12.05.71.03.6-.14 1.1-.14 1.1h.25c.17-1.8.29-2.6.2-2.74-.48-.62-.96-1.1-2.82-1.12z" fill="#010101"/>
      <path d="M109.29 113.17s-.56 1.61-1.6 2.2c-.23-.1-.2-.28-.4-.53-.06-.09-.25-.14-.34-.23-.08-.08-.06-.22-.2-.33-.11-.12-.2-.03-.3-.12-.12-.11-.15-.25-.23-.33-.06-.06-.28-.09-.34-.15-.14-.14-1.38-.4-1.33-.67.12-.43.34-.74.34-.74s.54-.79 1.07-.76c.54.03 1.05.14 1.33-.11.3-.28 2.08.86 2 1.77z" fill="#010101"/>
      <path d="M105.6 100.6s1.77-.43 2.99.73a3.2 3.2 0 01.76 3.55c.3.37.87 1.39.45 2.6 1.86 1.58 1.07 4.13-.64 5.58 0 0-.36-1.51-1.96-1.52.06-.56-1.46-1.02-.76-2.48-1.07-.26-1.04-.99-1.21-1.9-.14-.9.37-6.57.37-6.57z" fill="#010101"/>
      <path d="M104.95 101.39s2.06-1.05 3.27.14c1.21 1.18.87 2.48.5 3.38.32.37 1.05 1.41.6 2.65-.08.28-.7.28-1.16 1.02 1.13-.65 1.84-.48 2.09.34.4 1.27-.5 2.7-1.27 3.55 0-.03 0 .03 0 0-.11.42-.25 1.24-1.1 2.14-.42.46-.76.4-1.24.29-.56-.14-.76-.4-1.55-.82-.45-.26-.2-.57-.2-.82 0-.06.06-.14.14-.25.06-.14.23-.37.48-.62 0 0 .37-.51.9-.48.54.02 1.1-.09 1.25-.23 0-.99-1.13-1.01-.74-2.7.03-.1.17-.23.62-.29-.67-.14-.98-.17-1.46-.62-.34-.31-.6-.7-.68-1.21-.17-.88-.45-5.47-.45-5.47z" fill="#f0efef"/>
      <path d="M99 99.6a5.1 5.1 0 00-2.71-1.8c-.48-.14-.8.26-1.27.54-.14-.09-.76-.37-1.1-.17-.34.2-.57.4-.9.53-.17-.08-.62-.08-1 .06a2.8 2.8 0 00-1.46 1.1c-.34 1.21 5.98.31 5.98.31l2.46-.56z" fill="#010101"/>
      <path d="M99.05 99.6c-.9-.3-.76-1.35-2.76-1.51-.4-.03-.65.28-.93.47.14.15.28.37.36.6-.25-.29-.7-.65-1.15-.74-.43-.08-.7.23-1.16.45.09.09.17.23.28.4-.4-.25-.67-.34-1.21-.14-.37.11-1.07.42-1.6 1.18-.35 1.22 5.69-.14 5.69-.14l2.48-.56z" fill="#8ac640"/>
      <path d="M104.36 100.06s0-.31-.03-.6c0-.05-.23-.2-.23-.25l-.05-.05s.45-.26.79-.12c.36.12.56.6.56.6.65-.23.7.02 1.01.36.68-.14.77.12 1.19.74 0 0-.5-.09-1.5.08-.95.14-1.74-.79-1.74-.76z" fill="#010101"/>
      <path d="M104.24 99.92s.17-.14.12-.17c.3-.17.73-.37.93.17.64-.23.73.08 1.04.42.79-.36.85.09.9.28-.25 0-.62.03-1.13.09-.95.14-1.89-.82-1.86-.8z" fill="#8ac640"/>
      <path d="M94.65 99.21s1.61.57 2.96.48c1.36-.11 3.67-.22 4.91.51 0 0 1.27-.45 2.46-.14 1.18.3 3.35 2.34 2.7 4.48-.05.14-.42.37-.84.51 0 0 .22.96-.17 1.75-.4.76-1.27 2.23-1.3 4.26-.03.34-.08 1.04-.14 1.38-2.2-.08-5.58-.9-8.91-.84.02-.37.14-.6.17-.96-.17-.93-.23-1.41-.4-2.12a9.33 9.33 0 01-3.16-2.96c-.93-1.5 1.72-6.35 1.72-6.35z" fill="#010101"/>
      <path d="M105.54 114.44s1.75 6.27-.31 8.9c0 0 .31 1.2-.4 2.5-.1.56-.25 1.07-.33 1.64-.37 2.34-1 3.32-1.16 7.08l-1.7-.03s-.19-2.7-.78-4.15c-.34-.82-1.67-1.92-1.61-3.02.06-.84.23-1.55 1.66-2.68.12-1.63-1.52-3.18-1.26-9.28l5.89-.96z" fill="#010101"/>
      <path d="M105.03 114.2c.45 2.87 1.5 7.13-.4 9.21.1.4.15.96.04 1.61-.06.34-.17.7-.31 1.1-.29.68-.4 1.67-.48 2.26-.37 2.34-.37 2.45-.54 6.2l-1.7-.02s-.19-2.71-.78-4.15c-.34-.82-1.05-1.52-1.1-2.62-.06-.85.53-2.54 1.94-2.49-.08-3.4-1.66-2.73-2.08-9.84l5.41-1.27z" fill="#f0efef"/>
      <path d="M94.65 99.21s.62.2 1.3.26c.68.05 1.41 0 2.06-.03 1.35-.11 3.27-.25 4.54.48 0 0 .7-.23 1.47-.17.33.03.67.3 1.07.42 1.24.31 2.42 2.37 1.89 4.23-.06.14-.45 0-.9.14.08.4.14 1.3-.32 2.26-.47.96-1.1 2.2-.98 4.57-2.96-.14-4.29-.34-7.22-.48a16.9 16.9 0 01-.45-2.62c.4-.2.62-.37.93-.7-.85.13-1.19.08-1.7-.2a8.43 8.43 0 01-1.86-1.78c-.05-.06-.36.87-1.07.9-.25-.37.82-1.41.62-1.8-.7-1.44.62-5.48.62-5.48z" fill="#f0efef"/>
      <path d="M105.26 111.85s.05 1.01.05 1.27c0 .28.23 1.13.26 1.52-.31.54-1.67 1.75-4.12 2.2-2.43.51-5.64-3.3-5.64-3.3a26.49 26.49 0 01.65-2.25c.25-.37 8.8.56 8.8.56z" fill="#010101"/>
      <path d="M104.64 111.94c0 .7.11 1.2.2 1.66.14.82.36 1.35.36 1.89 0 1.64-2.14 1.35-3.95 1.4-2.42.52-4.48-3.3-4.48-3.3.17-.64.28-1.37.53-2 .03-.33.09-.75.12-.95 3.44 0 5.86.2 7.27.33.06.32 0 .85-.05.96z" fill="#f0efef"/>
      <path d="M101.93 115.57s-1.5-3.32-5.98-2.34c-1.07 3.02-2.51 6.49-1.58 10.24-.93 1.27-2 1.98-2 4.32 0 2.34.11 2.73.11 2.73l3.3.17s1.07-1.38 1.5-2.87a6.1 6.1 0 00.14-2.06c.1-.17.59-.57.65-1.33 0 0 1.6-.85 2.53-2.9.88-1.87.65-3.47 1.33-5.96z" fill="#010101"/>
      <path d="M101.93 115.57c-.09-.3-1.21-3.35-5.39-2.45-2.45 6.54-1.55 9.25-1.18 10.44-1.67 2.11-2.43 2.56-2.1 6.85h2.21c1.01-1.6 1.24-2.2 1.3-4.32 0-.08-.31.17-.54.46.17-.88.65-1.05 1.02-1.58.17-.23.3-.57.3-1.02a7.3 7.3 0 003.14-4.71c.34-1.18.73-3.13 1.24-3.67z" fill="#f0efef"/>
      <path d="M94.96 111.03s.76.03 1.44.26c.65.22.65.36.9.64.26.29.88.71.77 1.13-.06.23-.2.29-.4.48-.08.09-.7.76-.85.85l-.28.2-.42.28c-.28.14-.48.22-.8.2 0 0-.7-.03-1.15-.51 0 0-.05-.23.06-.34 0 0-.6-.5-.76-.85a1.43 1.43 0 01-.06-1.07c.06-.25 1.16-.96 1.55-1.27z" fill="#010101"/>
      <path d="M95.67 138.48l-.09.7s-.25.31-2.14.29c-1.92-.03-2.43-.62-2.6-.94l-.1-.73s.36-.53.44-.53c.62.05 2.74.9 4.2 1.12.15 0 .17.06.29.09z" fill="#010101"/>
      <path d="M99.76 137.04c0 .31-.03.31-.03.62.34.25 1.18.4 2.8.37 2.33-.06 4.5.7 7.16.25l.02-.5-.25-.04-9.4-.76-.3.06z" fill="#010101"/>
      <path d="M101.82 138.03h.7c1.53-.06 2.96.28 4.52.36.81-.02 1.83-.22 1.74-.81l-8-.68c-.49.53-.12.98 1.04 1.13z" fill="#010101"/>
      <path d="M92.62 126.15a8.3 8.3 0 004.77 1.04c-.06.54-.03 1.58-1.27 3.42a9.15 9.15 0 00-1.27 4.48c.03.45.28.85-.06 1.44.11.37.57 1.1.8 1.55.22.45.33.96-1.16.99-1.53.03-3.98-.14-3.64-1.32.17-.63.65-1.27.7-1.53.06-.25.06-1.01.54-1.52.42-1.41.28-2.77.2-4.04-.15-1.32-.17-3.44.4-4.5z" fill="#010101"/>
      <path d="M95.24 103.16c2-2.68.31-4.82-2.9-4.17-1.3.25-2.6 1.15-2.68 2.79-.42.06-1.38.11-1.86 1.86-.37 1.36-.57 1.6-1.22 2.29-.42.48.03 1.46.34 2.17 1.05 2.42 4.26 2.65 6.43 4.48.74-.2 1.5-1.01 1.73-1.55-1.84-2.17-1.44-3.02-2.18-4.14a3.52 3.52 0 002.34-3.73z" fill="#010101"/>
      <path d="M94.85 103c.11-.18.3-.54.4-.68.02-.03.33.5.36.47.76-1.24.96-3.04.09-3.21-.2-.03-.57-.11-.88-.23-.56-.2-1.07-.2-1.97-.02-1.24.22-2.49 1.12-2.49 2.42 0 .09.88.34 1.13 1.38-.42-.59-1.15-1.24-2.03-.67-.93.59-.45 1.94-1.7 3.35-.41.48-.36 1.05.1 2.17.73 1.78 4.2 2.74 6.09 4.43.45-.2.76-.65.98-.98a10.01 10.01 0 01-2.14-3.47 5.7 5.7 0 00-1.95-2.43c.51.2.9.4 1.13.56.26.17.62.2.96.09 1.21-.42 1.86-2.12 1.92-3.19z" fill="#f0efef"/>
      <path d="M107.12 103.44c-.09 1.08-.88.54-1.3.34a6.57 6.57 0 00-2.68-.62c-.99 0-2.25.09-3.35.37-1.53.42-1.98.4-2.66.05-.67-.36-1.86-1.26-1.86-1.26s-.03.28.26.64a5.2 5.2 0 002.28 1.39c.54.17.96.05 1.44-.06 2.51-.62 5.16-.73 7.39.62.11.06.5-.11.68-.37.22-.36-.2-1.1-.2-1.1z" fill="#010101"/>
      <path d="M94.28 114.2c.23.13.51.22.82.47 0 0-.25 0-.36-.11a4.06 4.06 0 01-.46-.37z" fill="#0a1825"/>
      <path d="M102.44 91.82c-.09-.25-.7-.7-2.15-.7-1.55 0-2 .48-2.03.73l-.14 1.36s0 .45.03 1.12c.03.45.14.7.2 1.3.05.62.22 1.02.53 1.52.14.09.26.17.4.2.56.11 1.55.14 2.08 0 .31-.08.71-.62.8-1.1.1-.6.22-1.01.25-1.38.05-.37.08-1.19.11-1.41a5.93 5.93 0 00-.08-1.64z" fill="#f0efef"/>
      <path d="M99.47 126.69s1.5.65 5.2.08c0 0-1.05 5.25-.57 7.87 0 0 .48.68 4.04 1.98 0 0 1.58.4 1.52 1.18 0 0 .06.17-1.86.11-1.92-.05-3.73-.4-5-.4s-2.62.06-2.84-.3c-.26-.34.05-1.21.42-1.72.4-.54.28-.93.25-1.9-.08-2.5-2-5.1-1.15-6.9z" fill="#010101"/>
      <path d="M99.17 127.17c-.2.28.02 1.35.3 2.4.29 1.04.9 1.66 1.05 3.38.14 1.7.17 1.92-.31 2.9-.48 1-.62 1.9 1.04 1.92 1.67.03 2.57-.03 4.26.23 1.7.25 2.29.34 3.22.2.93-.14 1.12-.46.73-.74-.4-.28-2.03-.59-2.74-1.15-.67-.51-2.6-1.36-2.62-1.58-.08-.77-.11-3.53.03-4.43l.4-2.54c.05-.34.33-.68-.15-.57-.48.12-2.28.37-3.64.29-1.35-.09-1.49-.4-1.58-.31z" fill="#8ac640"/>
      <path d="M100.12 135.88c.48.23 1.19.4 1.72.4 0 0-.2.93.12 1.5.3.56-2.26.22-2.26.22l-.11-2 .53-.12z" fill="#010101" fill-opacity=".3"/>
      <path d="M107.6 138.3c.45-.13.76-.64.4-1.12-.4-.48-.74-.56-.23-.6.5-.02 2.37 1.1 2.37 1.1l-.96.88-1.58-.25z" fill="#010101" fill-opacity=".3"/>
      <path d="M99.08 128.27a11.55 11.55 0 005.42-.17c.81-.29.48.3.48.3l-.46.43s-1.07.42-2.82.4c-2.05-.03-2.68-.26-2.68-.26l.06-.7z" fill="#010101" fill-opacity=".3"/>
      <path d="M99.14 129.68c.65.22 1.63.28 2.48.25.84-.03 1.97-.03 2.8-.34.33-.11.13.37.13.37l-.14.25s-1.1.4-2.82.37c-2.06-.03-2.42-.2-2.42-.2l-.03-.7z" fill="#010101" fill-opacity=".3"/>
      <path d="M99.47 126.69s2.46.87 5.22.28c0 0-1.07 5.05-.59 7.64 0 0 .48.68 4.03 1.98 0 0 1.58.4 1.53 1.18 0 0 .05.17-1.86.11-1.92-.05-3.73-.39-5-.39s-2.62.06-2.85-.31c-.25-.34.06-1.21.43-1.72.4-.54.28-.93.25-1.89-.08-2.48-2-5.08-1.16-6.88z" fill="#010101" fill-opacity="0"/>
      <path d="M99.47 126.69s2.46.84 5.22.25c0 0-1.07 5.08-.59 7.67 0 0 .48.68 4.03 1.98 0 0 1.58.4 1.53 1.18 0 0 .05.17-1.86.11-1.92-.05-3.76-.59-5-.39-1.32.23-2.62.14-2.85-.31-.2-.37.06-1.21.43-1.72.4-.54.28-.93.25-1.89-.08-2.48-2-5.08-1.16-6.88z" fill="#010101" fill-opacity="0"/>
      <path d="M97.28 109.9c0 .2 2.2 1.3 3.4 1.53 1.22.22 3.76 0 4.15-.09l-.05.4s-3.02.45-5.33-.17c-2.32-.62-2.06-.76-2.06-.76l-.11-.9z" fill="#010101"/>
      <g fill="#f0efef">
        <path d="M92.56 133.97c.34.16 1.56.47 2.34.3.12-.02 0-1.94.32-2.82.45-1.2 1.18-2.2 1.52-4.34a17.65 17.65 0 01-3.25-.65c-.9 2.77-.59 5.14-.93 7.5z"/>
        <path d="M94.45 135.74c.2.06.34.28.4.14.11-.25-.2-.73-.23-1.07v-.03c-.25-.22-1.97-.25-1.86-.14-.2.37-.5.31-.62 1.05-.06.36.4.05.82.02-.76.51-1.64 1.16-1.78 1.72-.17.8.11 1.02.96 1.44.73.17 1.6.2 2.29.17.76-.14.9-.5.67-1.01-.34-.76-.56-1.75-.65-2.29z"/>
      </g>
      <path d="M94.76 99.1c.93.54 2.23.4 2.71.37.11 0 1.24-.2 1.3-.17.11.03.11.11.11.11s-.42.23-1.38.28c-.9.06-1.97 0-2.57-.28-.7-.31-.17-.31-.17-.31z" fill="#010101"/>
      <path d="M104.36 99.64c.16.1 1.26.53 1.74 1.04.43.45.2.42.12.31a6.73 6.73 0 00-1.33-.87c-.34-.15-.76-.4-.76-.46 0-.05.23-.02.23-.02z" fill="#010101"/>
      <path d="M94.62 111.34c.82-.05 1.67.14 2.2.7.29.29.74.6.68.88 0 .09-.17.31-.31.48-.08.11-.34.37-.42.45-.12.09-.51.4-.6.45-.08.06-.2.2-.28.23-.28.14-.59.03-.87-.11s.06-.17-.25-.4c-.77-.53-1.19-.9-.88-1.94.03-.2.34-.43.73-.74z" fill="#f0efef"/>
      <path d="M87.43 104.88c-2.54 1.02-9 4.23-10.83 5.22 1.52.96 2.23 3.27 2.45 5.61l.09.65c.03.2.05.34.08.43 0 .02 0 .08.03.1 1.66-4.53 7.62-9.33 7.84-9.7.11-.16-.14-.9.26-1.6.5-.9 1.5-1.3.08-.7z" fill="#010101" fill-opacity=".4"/>
      <path d="M93.47 126.18c1.3-2.6 1.32-5.08 1.3-7.98 0-1.22.87-2.94.42-2.46-1.7 1.9-5.95 5.45-9.03 5.64 4.32-.14 6 2.04 7.3 4.8z" fill="#010101" fill-opacity=".4"/>
      <path d="M74.12 112.5c1.6-1.16 9.93-5.59 11.93-6.2 2-.66 1.38-1.42 1.38-1.42s-8.12 3.5-12.97 6.52" fill="#010101"/>
      <path d="M97.81 104.35c-.65-.26-1.16.5-.99 1.24.17.73 1.7 1.55 1.61 4.23-.05 2.2-.53 3.1-.53 3.1l-1.08-1.35s-.17-3.05-.53-3.5c-.37-.45-1.53-1.27-1.98-1.7-.45-.42.51-.98.45-1.77-.05-.76.48-2.28.48-2.28l2.57 2.03z" fill="#010101" fill-opacity=".4"/>
      <path d="M101.73 116.36c-.06 2.12.42 5.25.62 6.75.2 1.49.45 1.6 0 2.28-.45.65-1.04 1.72-1.04 1.72l-1.95-.17s1.55-1.97 1.64-2.34c.08-.37-.8-3.16-.8-3.16l1.53-5.08z" fill="#010101" fill-opacity=".4"/>
      <path d="M97.98 96.62c.4.87.88 1.27 1.64 1.52.45.17 2.22.4 2.93-.4.31-.36.11-1.35.11-1.35l-1.6 1.3-2.18-.4-.25-.64-.65-.03z" fill="#010101" fill-opacity=".4"/>
      <path d="M98.15 98.56c.73.48 2.57.93 3.07 1.02.51.11 1.33-.54 1.73-.7.42-.2 1.15-.32 2 .45.08.08-.2.45-.2.45-.03-.03-.2-.03-.42-.14-.23-.12-.43-.2-.77-.17-1.4.17-1.63.65-2.87.36-1.24-.28-1.55-.5-2.77-.45" fill="#8ac640" stroke="#010101" stroke-width=".22" stroke-linecap="butt" stroke-miterlimit="10"/>
      <path d="M97.9 98.65c.93.4 2.73.82 3.24.93.5.11 1.32-.4 1.72-.65.7-.45 1.6-.08 2.03.4.28.3.4.5.4.59 0 .11-.34 0-.34 0-.2-.09-.43-.12-.6-.23-.22-.11-.45-.28-.78-.25-1.41.17-1.7.65-2.91.36-1.21-.28-1.52-.53-2.82-.45" fill="#8ac640"/>
      <path d="M93.52 125c-.05-.06.06-.12 0-.12-.36 0-.87-.28-1.15-.67-1.22-1.75-3-2.91-6.2-2.83-4.83.12-6.75-1.86-7.12-5.64-.2-2.06-.76-4.06-1.92-5.19l-.67.43c1.3 1.12 1.72 2.96 2 5.47.45 3.78 3.5 5.53 7.05 5.58 3.7.06 5.02.82 6.4 2.68.46.6.96.8 1.36.88l.25-.6z" fill="#010101"/>
      <path d="M106.61 106.86c.09.42.31 1.24.76 1.63.2.2.23.26.06.26l-1.41-.06-.34-.6.93-1.23z" fill="#010101" fill-opacity=".4"/>
    </g>
  </g>
  <path id="motionPath" d="M50 90c136.98 46.3 284.74 59.64 440 50-114.17 32.4-238.14 61.26-390 80 182.87-51.58 300.03-49.9 370-10-86.55 33.51-213.74 50.6-360 60 104.6 36.16 320 145 700 -20" fill="none" stroke="#a3a3a3" stroke-width="1"/>
  <circle class="turn01" cx="485" cy="140"/>
  <circle class="turn02" cx="100" cy="220"/>
  <circle class="turn03" cx="470" cy="210"/>
  <circle class="turn04" cx="110" cy="270"/>
</svg>


              
            
!

CSS

              
                
body{
  background:grey; 
  margin:0;
  height:2000px;
}

svg{ 
  position: absolute;
  overflow:visible; 
  width:50%;
}
#socke{visibility:hidden}
#motionPath{stroke:none;}

circle{
  r: 10;
  stroke: none;
  fill: transparent;
}
.line{
  position: absolute;
  top: 0;
  left: 0;
  font-family: sans-serif;
  margin: 0;
  color: #6f6f6f;
  visibility:hidden;
  opacity:0;
}
.your{
  font-size: 6vw;
  top: 2vw;
  left: 23px;
}
.mask{
  font-size:40vw;
}
.lives{
  left: 36vw;
  top: 7vw;
  font-size: 6vw;
}
              
            
!

JS

              
                gsap.registerPlugin(MotionPathPlugin);


var hero = document.querySelectorAll('#socke');

gsap.set(hero,{autoAlpha:1})

var action = gsap.timeline({})
.to(hero, {
  motionPath: {
    path:"#motionPath", 
    align:"#motionPath", 
    alignOrigin: [0.5, 0.5],
    start:0.01
  },
  duration:10, ease:"none",
  onUpdate: function() {
    if (Draggable.hitTest(hero, ".turn01")){
      gsap.to(hero, {scaleX: -0.5,duration:0.2});
    } else if (Draggable.hitTest(hero, ".turn02")) {
      gsap.to(hero, {scaleX: 1,duration:0.2});
    } else if (Draggable.hitTest(hero, ".turn03")) {
      gsap.to(hero, {scaleX: -0.5,duration:0.2});
    } else if (Draggable.hitTest(hero, ".turn04")) {
      gsap.to(hero, {scaleX: 1,duration:0.2});
    }
  }
},1)
.to(hero, {scale: 2,duration:2, ease:'none'},'-=2')
.to('.line',{autoAlpha:1, opacity:1, duration:1, stagger:1.4},2)



              
            
!
999px

Console