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

              
                <button id="sound-button" class="button button--icon button--active">
  <!-- Icon sound by Adrien Coquet from NounProject.com -->
  <svg class="button__copy" width="24" height="24" viewBox="0 0 24 24">
    <path d="M10.5 2.5 4.4 7.3h-3C.6 7.3 0 7.9 0 8.7v6.7c0 .8.6 1.4 1.4 1.4h3l6.2 4.7c1.1.8 2.6.1 2.6-1.3V3.8c0-1.3-1.6-2.1-2.7-1.3z" />
    <path d="M17.6 7.8c-.5-.4-1.3-.4-1.7.2-.4.5-.3 1.3.2 1.7a3 3 0 0 1-.1 4.7c-.5.4-.6 1.1-.2 1.5l.1.1c.4.5 1.2.6 1.6.2a5.3 5.3 0 0 0 .1-8.4z" />
    <path d="M20.3 4.4c-.5-.4-1.2-.3-1.7.2-.4.5-.4 1.3.2 1.7 1.7 1.4 2.8 3.5 2.8 5.8s-1.1 4.4-2.8 5.8c-.5.4-.6 1.2-.2 1.7.4.5 1.2.6 1.7.2a9.8 9.8 0 0 0 0-15.4z" />

    <line x1="0" y1="0" x2="24" y2="24" stroke="currentColor" stroke-width="4" fill="transparent" />

  </svg>

  <span class="button__border"></span>
  <span class="button__background"></span>
</button>

<button id="start-button" class="button button--secondary">
  <span class="button__copy">Start!</span>
  <span class="button__border"></span>
  <span class="button__background"></span>
</button>

<ul id="control-list">
  <li class="control-list__item">
    <button class="control-list__button button button--icon button--light" data-id="shiny">
      <svg class="button__copy" width="24" height="24" viewBox="0 0 24 24">
        <path d="M4.5 4.1l-3.6.4-.3.2a237 237 0 002.8 2.8L2.7 11l.1.3c.1.1.3.1.4 0l3.1-1.8a1405.7 1405.7 0 003.5 1.8c.1-.1.2-.2.1-.3l-.7-3.5 2.7-2.4.1-.4-.3-.2-3.6-.4L6.6.8 6.3.6 6 .8 4.5 4.1z" />
        <path d="M16.9 6.9l-2.8.3-.2.2.1.3 2.1 1.9-.6 2.7.1.3h.3l2.4-1.4 2.4 1.4h.3l.1-.3-.6-2.7 2.1-1.9.1-.3-.2-.2-2.8-.3-1.2-2.5-.2-.2-.2.2-1.2 2.5z" />
        <path d="M10.1 16.6l-3.2.4-.3.2.1.3 2.4 2.2-.7 3.2.1.3h.3l2.8-1.6a127.9 127.9 0 003.1 1.6c.3-.1.3-.2.3-.3l-.7-3.2 2.4-2.2.1-.3a50.8 50.8 0 01-3.5-.6L12 13.7l-.3-.2-.3.2-1.3 2.9z" />
      </svg>
      <span class="button__border"></span>
      <span class="button__background"></span>
    </button>
  </li>
  <li class="control-list__item">
    <button class="control-list__button button button--icon button--light" data-id="glasses">
      <!-- Glasses by yasminvisible from NounProject.com -->
      <svg class="button__copy" width="24" height="24" viewBox="0 0 24 24">
        <path fill-rule="evenodd" d="M11 9.1c-3.2-.8-6.3-1-10.2-.6-1.2.2-1.1 2 .1 2.2.3.8.5 2.4.9 3.3 1 2.3 5.6 2 7.4.8 1.1-.7 1.5-2.3 1.9-3.5.2-.7 1.6-.7 1.8 0 .5 1.2.8 2.8 1.9 3.5 1.7 1.1 6.4 1.4 7.4-.8.4-.9.5-2.4.8-3.3 1.1-.2 1.3-2 .1-2.2-3.9-.5-7-.2-10.2.6a6 6 0 0 1-1.9 0zm-6 .1c-1.2 0-2.9.2-3.1 1.1-.5 1.4.4 4.2 2.4 4.2-1.1-.6-2-2.7-1.7-3.9C2.8 9.9 4 9.4 5 9.2zm11.6.1c-1.1.1-2.7.4-2.9 1.2-.4 1.4.5 3.9 2.4 3.9-1.1-.5-2.1-2.5-1.7-3.7.1-.7 1.2-1.2 2.2-1.4z" clip-rule="evenodd" />
      </svg>
      <span class="button__border"></span>
      <span class="button__background"></span>
    </button>
  </li>
  <li class="control-list__item">
    <button class="control-list__button button button--icon button--light" data-id="bow">
      <!-- Bow by Rank Sol from NounProject.com -->
      <svg class="button__copy" width="24" height="24" viewBox="0 0 24 24">
        <path d="M16.9 6.7c2.5-1.5 4.7-2.9 4.5-3.7v-.1h-.2c-3.5 0-6.5 3.9-7.6 5.6l.2.2a54 54 0 0 1 3.1-2z" />
        <path d="m7.1 6.7 3.2 2 .2-.2C9.4 6.9 6.4 3 2.9 2.9h-.4v.5l.1-.1c.3.9 2.3 2.1 4.5 3.4z" />
        <path d="m21.7 3.3-.1-.2-.1.2c-.3.9-2.2 2-4.5 3.4l-.1.1-3.8 2.4v2.4h.1a16 16 0 0 0 6.4 1.5l2.7-.3c.8-.2 1.3-.8 1.5-1.6.2-2.4-.5-5.5-2.1-7.9z" />
        <path d="M11.1 8.6h1.8V12h-1.8V8.6z" />
        <path d="m10.9 11.7.1-2.4L7.2 7 7 6.8C4.7 5.4 2.9 4.3 2.5 3.4l-.1-.2-.1.2a12.7 12.7 0 0 0-2 7.9 2 2 0 0 0 1.5 1.6l2.7.3c2 0 4.1-.5 6.4-1.5z" />
        <path d="M10.9 12.1v-.3l-.2.1c-1.8.8-3.5 1.2-5.1 1.4-1.7 2-2.8 4-3.1 6v.2l4.1-2.2h.1L9 21.1l2.6-8.9-.7-.1c.1.1 0 .1 0 0z" />
        <path d="M18.4 13.3c-1.7-.2-3.4-.6-5.2-1.4l-.2-.1v.3l-.1.1h-.5l2.6 8.9 2.3-3.8h.1l4.1 2.2v-.2c-.3-2.1-1.3-4-3.1-6z" />
      </svg>
      <span class="button__border"></span>
      <span class="button__background"></span>
    </button>
  </li>

  <li class="control-list__item">
    <button class="control-list__button button button--icon button--light" data-id="hat">
      <!-- Hat by Syawaluddin from NounProject.com -->
      <svg class="button__copy" width="24" height="24" viewBox="0 0 24 24">
        <path d="M12 19.6c6.6 0 12-2.7 12-6 0-2-1.9-3.7-4.9-4.8l.4 1.5.2 1.8c0 .7-.3 1.3-.8 1.8-1.5 1.5-4.7 2.1-7.3 2.1-3.3 0-7.2-.9-7.2-3.5l.2-1.9.2-.9.2-1c-3 1.1-5 2.9-5 4.9 0 3.3 5.4 6 12 6z" />
        <path d="m4.9 11.3-.1 1.1c0 2.1 3.4 3.1 6.8 3.1 3.7 0 7.6-1.2 7.6-3.4l-.1-1.1c-1.2 1.6-4.6 2.4-7.5 2.4-2.6 0-5.5-.6-6.7-2.1z" />
        <path d="M11.6 12.9c3.3 0 6.6-.9 7.4-2.6-.4-2.5-1.9-5.9-7-5.9S5.4 8 5 10.6c.7 1.6 3.6 2.3 6.6 2.3z" />
      </svg>

      <span class="button__border"></span>
      <span class="button__background"></span>
    </button>
  </li>
</ul>

<ul id="social-list">
  <li class="social-list__item">
    <!-- Twitter blocks the link :( -->
    <!--
    <a href="https://twitter.com/_nicofonseca" target="_blank" rel="noopener noreferrer">
      <span class="hidden-text">Twitter</span>
      <svg height="40" width="40" viewBox="0 0 56 56">
        <path d="M52.837,15.065c-1.811,0.805-3.76,1.348-5.805,1.591c2.088-1.25,3.689-3.23,4.444-5.592c-1.953,1.159-4.115,2-6.418,2.454  c-1.843-1.964-4.47-3.192-7.377-3.192c-5.581,0-10.106,4.525-10.106,10.107c0,0.791,0.089,1.562,0.262,2.303  c-8.4-0.422-15.848-4.445-20.833-10.56c-0.87,1.492-1.368,3.228-1.368,5.082c0,3.506,1.784,6.6,4.496,8.412  c-1.656-0.053-3.215-0.508-4.578-1.265c-0.001,0.042-0.001,0.085-0.001,0.128c0,4.896,3.484,8.98,8.108,9.91  c-0.848,0.23-1.741,0.354-2.663,0.354c-0.652,0-1.285-0.063-1.902-0.182c1.287,4.015,5.019,6.938,9.441,7.019  c-3.459,2.711-7.816,4.327-12.552,4.327c-0.815,0-1.62-0.048-2.411-0.142c4.474,2.869,9.786,4.541,15.493,4.541  c18.591,0,28.756-15.4,28.756-28.756c0-0.438-0.009-0.875-0.028-1.309C49.769,18.873,51.483,17.092,52.837,15.065z" />
      </svg>
    </a>
    -->
  </li>
  <li class="social-list__item">
    <a href="https://dribbble.com/nicofonseca" target="_blank" rel="noopener noreferrer">
      <span class="hidden-text">Dribbble</span>
      <svg width="40" height="40" viewBox="0 0 512 512">
        <path d="M256 0a256 256 0 0 0 0 512c141 0 256-114.7 256-256S397 0 256 0Zm169 118a217.6 217.6 0 0 1 49.5 136c-7.2-1.3-79.4-16-152.1-6.9-1.7-3.6-3.1-7.5-4.8-11.4a655.5 655.5 0 0 0-14.4-31.6c80.5-32.8 117.2-80 121.9-86ZM256 37.8c55.5 0 106.3 20.8 145 55-4 5.5-37 49.6-114.7 78.8-35.9-65.8-75.6-119.7-81.7-128 16.4-3.9 33.6-5.8 51.4-5.8Zm-93 20.5c5.8 7.8 44.7 62 81 126.3C142 212 51.7 211.3 42 211.3a219.7 219.7 0 0 1 121-153Zm-125.8 198v-6.7a799 799 0 0 0 224.6-31 648.8 648.8 0 0 1 17.8 37.1l-8.6 2.5C158.3 294.6 98.3 394 93.3 402.3c-34.7-38.6-56-90-56-146ZM256 474.8a217 217 0 0 1-134.1-46.1c3.9-8 48.3-93.6 171.6-136.6l1.4-.6a903.9 903.9 0 0 1 46.6 165.8 215.1 215.1 0 0 1-85.5 17.5Zm121.9-37.5a940.5 940.5 0 0 0-42.5-155.8c68.6-10.8 128.6 7 136 9.5A216.8 216.8 0 0 1 378 437.3Z" />
      </svg>
    </a>
  </li>
  <li class="social-list__item">
    <a href="https://www.linkedin.com/in/nicofonseca/" target="_blank" rel="noopener noreferrer">
      <span class="hidden-text">Linkedin</span>
      <svg width="40" height="40" viewBox="0 0 512 512">
        <path d="M256 0a256.1 256.1 0 0 1 0 512 256.1 256.1 0 0 1 0-512Zm-80 399.9v-200h-66.5v200H176Zm239.6 0V285.2c0-61.4-32.8-90-76.5-90a66 66 0 0 0-60 33V200h-66.4c1 18.8 0 200 0 200h66.5V288.2c0-6 .4-12 2.2-16.2 4.8-12 15.7-24.3 34-24.3 24.1 0 33.7 18.3 33.7 45.2v107h66.5ZM143.2 103.5c-22.8 0-37.6 15-37.6 34.6 0 19.2 14.4 34.5 36.7 34.5h.4c23.2 0 37.6-15.3 37.6-34.5-.4-19.6-14.4-34.6-37.1-34.6Z" />
      </svg>
    </a>
  </li>
</ul>

<svg id="svg" preserveAspectRatio="xMidYMid slice" width="1920" height="1080" viewBox="0 0 1920 1080">
  <rect id="background" x="0" y="0" width="1920" height="1080" fill="transparent" />

  <g id="particles"></g>

  <g id="sing-circles">
    <circle class="sing-circle" cx="960" cy="540" r="320" stroke="rgba(255,255,255,0.6)" stroke-width="7" fill="transparent"></circle>
    <circle class="sing-circle" cx="960" cy="540" r="250" stroke="transparent" fill="rgba(255,255,255,0.45)"></circle>
    <circle class="sing-circle" cx="960" cy="540" r="280" stroke="rgba(255,255,255,0.5)" stroke-width="4" fill="transparent"></circle>
  </g>

  <g id="jigglypuff">

    <path id="jigglypuff-background" fill="transparent" d="M740 320h420v400H740z" />

    <g id="hat">
      <g>
        <path fill="#cae7ff" d="M756.4 547.7c1.7-.1 18.7-4.5 33.5-12.6 16-8.8 29.6-22.1 29.6-22.1l-15.8-28.8s-13.6 13.4-29.6 22.2c-14.5 8-31.7 10.8-33.6 12.5-3.1 2.9 15.9 12.5 15.9 12.5s-3.8 16.5 0 16.3z" />
        <path id="Layer_15" fill="#b3d1e2" d="m781.9 532.1-7.7-25.7-6.5 2.6s2.6 5.5 5.4 17c2.7 11.5-1.1 17-1.1 17l10-4.1v-6.8z" />
        <path fill="none" stroke="#564a39" stroke-miterlimit="10" stroke-width="2" d="M756.4 547.7c1.7-.1 18.7-4.5 33.5-12.6 16-8.8 29.6-22.1 29.6-22.1l-15.8-28.8s-13.6 13.4-29.6 22.2c-14.5 8-31.7 10.8-33.6 12.5-3.1 2.9 15.9 12.5 15.9 12.5s-3.8 16.5 0 16.3z" />
      </g>
      <ellipse cx="956.5" cy="490.1" fill="#fcf1d4" stroke="#564a39" stroke-miterlimit="10" stroke-width="2" rx="184" ry="161.4" />
      <g fill="none" stroke="#ddd099" stroke-miterlimit="10" stroke-width="2">
        <ellipse cx="956.4" cy="492.1" opacity=".3" rx="139.5" ry="129.1" />
        <ellipse cx="956.4" cy="492.1" opacity=".3" rx="148.3" ry="137.2" />
        <ellipse cx="956.4" cy="492.1" opacity=".3" rx="157" ry="145.2" />
        <ellipse cx="956.4" cy="492.1" opacity=".3" rx="165.7" ry="153.3" />
      </g>
      <ellipse cx="959.3" cy="489.8" fill="#443f33" stroke="#564a39" stroke-miterlimit="10" stroke-width="2" rx="140" ry="117.8" />
    </g>

    <g id="right-leg">
      <path fill="#f9edf0" d="M1079.4 696.7c-25.5 0-54.7-3.1-64.8-5.9-7.7-2.1-21.2-7.1-24.5-16.8-1.7-5.1-.3-10.6 4.1-16.4 8.3-10.7 23.9-16.4 45-16.4 16.8 0 33.2 3.6 39.6 5.9 2.7 1 16.6 6.1 29.5 12.7 15.4 7.9 23.2 14.7 24 20.7.3 2.3-.3 5.6-4.8 8.5-9.6 6.4-31.5 7.7-48.1 7.7z" />
      <path fill="#564a39" d="M1039.1 643.3c16.9 0 32.9 3.7 38.9 5.8 11.9 4.3 67.3 25.8 48.2 38.3-8.2 5.4-26.9 7.3-46.9 7.3-26.4 0-54.9-3.2-64.3-5.8-16.5-4.5-31.3-14.4-19.3-30 9.4-12.1 26.8-15.6 43.4-15.6m0-4.1c-21.8 0-37.9 6-46.6 17.2-4.9 6.3-6.4 12.5-4.4 18.3 1.5 4.6 6.9 13 25.9 18.1a335 335 0 0 0 65.4 5.9c24.6 0 41.2-2.7 49.2-7.9 5.3-3.5 6.1-7.6 5.7-10.5-.8-6.9-8.8-14-25.1-22.3-13-6.6-27-11.8-29.7-12.8-6.6-2.3-23.2-6-40.4-6z" />
      <path fill="#f7d7e6" d="M994.8 657.8c-12 15.6 3.7 25.7 20.3 30.2 3.8 1 15.5 2.5 24 3.5 11.4-4 25-11.3 32.4-18.8a43.6 43.6 0 0 0 12.2-20.9c-19.9-8.6-70.1-18.3-88.9 6z" />
      <path fill="#fff" d="M1039.1 645.7c16.3 0 32 3.5 38.1 5.7 24.4 8.8 49.6 21.8 50.5 29.7.1.6.3 2.2-2.8 4.3-6.7 4.4-22.9 6.9-45.6 6.9-27.5 0-55.1-3.4-63.7-5.7-11.7-3.2-19.5-8.3-21.4-13.9-1.2-3.6-.1-7.7 3.4-12.2 9.5-12.2 27.8-14.8 41.5-14.8m0-2.4c-16.6 0-34 3.6-43.4 15.6-12 15.6 2.8 25.5 19.3 30 9.4 2.6 37.9 5.8 64.3 5.8 20 0 38.7-1.9 46.9-7.3 19-12.5-36.3-34-48.2-38.3a131 131 0 0 0-38.9-5.8z" />
    </g>

    <g id="left-leg">
      <path fill="#f9edf0" d="M829.4 694.4c-16.5 0-38.1-1.3-47.6-7.5-4.4-2.9-5-6.2-4.8-8.5.7-6 8.5-12.7 23.7-20.5 12.7-6.5 26.6-11.6 29.2-12.6a133 133 0 0 1 39.2-5.9c20.9 0 36.3 5.6 44.6 16.3 4.4 5.7 5.8 11.2 4.1 16.2-3.2 9.6-16.6 14.6-24.3 16.7-10 2.7-38.8 5.8-64.1 5.8z" />
      <path fill="#564a39" d="M869.2 641.5c16.5 0 33.7 3.5 42.9 15.5 11.9 15.4-2.7 25.2-19.1 29.7a330 330 0 0 1-63.7 5.7c-19.8 0-38.3-1.8-46.5-7.2-18.8-12.4 36-33.7 47.7-37.9 6.1-2.2 22-5.8 38.7-5.8m0-4.1v4.1-4.1c-16.9 0-33.5 3.7-39.9 6-2.7 1-16.6 6.1-29.4 12.7-16.1 8.3-24 15.3-24.8 22.1-.3 2.8.4 6.9 5.7 10.4 7.9 5.2 24.3 7.9 48.7 7.9 25.4 0 54.5-3.1 64.7-5.9 18.8-5.1 24.1-13.5 25.7-18 1.9-5.8.4-11.9-4.4-18.1-8.8-11.2-24.7-17.1-46.3-17.1z" />
      <path fill="#f7d7e6" d="M913 656.1c11.9 15.4-3.7 25.5-20.1 29.9-3.7 1-15.3 2.5-23.8 3.5a92.9 92.9 0 0 1-32.1-18.6 45.8 45.8 0 0 1-12.7-20.3c19.7-8.7 70.1-18.6 88.7 5.5z" />
      <path fill="#fff" d="M869.2 643.9c13.6 0 31.7 2.5 41 14.5 3.4 4.4 4.6 8.5 3.4 12.1-1.9 5.6-9.6 10.6-21.2 13.8-8.5 2.3-35.8 5.6-63 5.6-22.4 0-38.5-2.4-45.1-6.8-3-2-2.8-3.6-2.8-4.2.9-7.8 25.9-20.7 50-29.4 6-2.2 21.6-5.6 37.7-5.6m0-2.4a129 129 0 0 0-38.5 5.8c-11.8 4.2-66.6 25.5-47.7 37.9 8.1 5.3 26.7 7.2 46.5 7.2 26.1 0 54.3-3.2 63.7-5.7 16.4-4.5 31-14.3 19.1-29.7-9.4-12-26.6-15.5-43.1-15.5z" />
    </g>

    <g id="body">
      <ellipse cx="956.8" cy="540.4" fill="#f9edf0" rx="171.8" ry="160.4" />
      <path fill="#564a39" d="M956.8 382.1c93.8 0 169.8 70.9 169.8 158.3s-76 158.3-169.8 158.3S787 627.9 787 540.4s76-158.3 169.8-158.3m0-4.1c-46.4 0-90 16.9-122.9 47.5a160.7 160.7 0 0 0-37.3 51.6 152.5 152.5 0 0 0 0 126.6 162.2 162.2 0 0 0 37.3 51.6c32.8 30.6 76.5 47.5 122.9 47.5s90-16.9 122.9-47.5c16-14.9 28.6-32.3 37.3-51.6a152.5 152.5 0 0 0 0-126.6 162.2 162.2 0 0 0-37.3-51.6A179.5 179.5 0 0 0 956.8 378z" />
      <path fill="#f7d7e6" d="M956.5 696.3a173 173 0 0 0 141.5-70.9c-1.7 1.4-66 59.6-141.5 61.6-71.1 1.9-132.1-53-140.3-59.9a173.3 173.3 0 0 0 140.3 69.2z" />
      <path fill="#fff" d="M956.5 383.8c44.7 0 86.8 16.2 118.4 45.7a149.3 149.3 0 0 1 48.9 110.1c0 41.6-17.4 80.7-48.9 110.1-31.6 29.5-73.7 45.7-118.4 45.7s-86.8-16.2-118.4-45.7a149.3 149.3 0 0 1-48.9-110.1c0-41.6 17.4-80.7 48.9-110.1a172.8 172.8 0 0 1 118.4-45.7m0-2.5c-93.8 0-169.8 70.9-169.8 158.3s76 158.3 169.8 158.3 169.8-70.9 169.8-158.3-76-158.3-169.8-158.3z" />
    </g>

    <g id="sing-mouth">
      <path fill="#e5c3cf" d="M950.1 654.8c-7.2 0-14.5-9.9-21.5-29.3a262.2 262.2 0 0 1-8.3-28.6l-.2-.9.9-.4c.3-.1 7.2-3.5 29.1-3.5 21.9 0 30.1 3.9 30.4 4l.9.4-.2 1c-.6 2.3-14.3 57.3-31.1 57.3z" />
      <path fill="#564a39" d="M950.1 593.2c21.9 0 29.9 3.9 29.9 3.9s-13.8 56.4-29.9 56.4c-16.1 0-28.6-57-28.6-57s6.6-3.3 28.6-3.3m0-2.4c-22.2 0-29.4 3.4-29.7 3.6l-1.7.9.4 1.9c0 .1 3.2 14.6 8.4 28.8 7.3 20.3 14.7 30.1 22.6 30.1 7.9 0 15.5-9.7 23.2-29.8 5.5-14.1 9-28.4 9-28.5l.5-1.9-1.8-.9c-.3-.2-8.7-4.2-30.9-4.2z" />
      <path fill="#f7d5e0" d="M950.1 653.6c7 0 13.6-10.8 18.8-22.9 0 0-6.1-6-18.2-6s-18.6 6.5-18.6 6.5c4.9 11.9 11.1 22.4 18 22.4z" />
    </g>

    <path id="mouth" fill="#564a39" d="M919 588.8c4.4 3.2 9.5 5.2 14.6 6.6a71.4 71.4 0 0 0 23.7 1.7c2.6-.3 5.3-.5 7.9-1.1 5.2-1 10.4-2.5 15.1-5.2-1.9 2-4.3 3.5-6.7 4.8a54.4 54.4 0 0 1-32.6 4.1c-2.8-.5-5.5-1.2-8.1-2.1a34.5 34.5 0 0 1-13.9-8.8z" />

    <path id="angry-mouth" fill="none" stroke="#564a39" stroke-miterlimit="10" stroke-width="2.5" d="M941.4 584.5s1.5-4.7 8.1-4.7 9.1 4.9 9.1 4.9" />

    <g id="sad-mouth">
      <path fill="#e5c3cf" d="M949.5 596.4a9 9 0 0 1 0-17.8 9 9 0 0 1 0 17.8z" />
      <path fill="#564a39" d="M949.5 579.8a7.7 7.7 0 1 1 0 15.4 7.7 7.7 0 0 1 0-15.4m0-2.4c-5.6 0-10.1 4.5-10.1 10.1s4.5 10.1 10.1 10.1 10.1-4.5 10.1-10.1-4.5-10.1-10.1-10.1z" />
      <ellipse cx="949.5" cy="591.4" fill="#f7d5e0" rx="6.6" ry="3.8" />
    </g>

    <g id="sing-hand">
      <g>
        <path fill="#595959" d="M884.7 662.7A6.8 6.8 0 0 1 880 651l31.6-30.1a6.8 6.8 0 0 1 4.7-1.9c1.9 0 3.6.8 4.9 2.1a7 7 0 0 1 1.9 4.8c0 1.8-.8 3.5-2.1 4.7l-31.6 30.1c-1.3 1.4-3 2-4.7 2z" />
        <path fill="#564a39" d="M916.3 620.4c1.5 0 2.9.6 4 1.7 2.1 2.2 2 5.8-.2 7.9l-31.6 30a5.7 5.7 0 0 1-3.8 1.5c-1.5 0-2.9-.6-4-1.7-2.1-2.2-2-5.8.2-7.9l31.6-30.1c1-.9 2.4-1.4 3.8-1.4m0-2.5a8 8 0 0 0-5.5 2.2l-31.6 30.1a8 8 0 0 0 5.5 13.8 8 8 0 0 0 5.5-2.2l31.6-30.1a8.5 8.5 0 0 0 2.5-5.6c.1-2.1-.7-4.2-2.2-5.7a8 8 0 0 0-5.8-2.5z" />
        <path fill="#4c4b4c" d="m917.5 632.4-1.7-1-27.3 26.3 1.5.8z" />
        <path fill="#f9edf0" d="M884.7 662.7A6.8 6.8 0 0 1 880 651l2.2-2.1.7 1.7a17 17 0 0 0 2.6 4.5c.9 1 2.6 1.8 4.6 2.4l2.1.6-2.9 2.8a6.5 6.5 0 0 1-4.6 1.8z" />
        <path fill="#564a39" d="M881.8 651c.6 1.5 1.6 3.6 2.9 4.9 1.4 1.4 3.6 2.3 5.2 2.7l-1.3 1.3a5.7 5.7 0 0 1-3.8 1.5c-1.5 0-2.9-.6-4-1.7-2.1-2.2-2-5.8.2-7.9l.8-.8m.9-4.2-2.6 2.5-.9.9a8 8 0 0 0 5.5 13.8 8 8 0 0 0 5.5-2.2l1.3-1.3 3.1-3-4.1-1.2a9.2 9.2 0 0 1-4.1-2.1 14 14 0 0 1-2.4-4.2l-1.3-3.2z" />
        <path fill="#f7d5e0" d="m888.5 660 1.3-1.3-1.8-.6s-.8 1.3-2.4 2.3c-1.6 1-4.8-.4-4.8-.4 2.2 2 5.6 2 7.7 0z" />
        <path fill="#f9edf0" d="M910.3 639.9c-1.4-.6-3.4-1.7-5.1-3.5a17.9 17.9 0 0 1-3.2-5.2l-.3-.8 5-4.7.7 1.5a18 18 0 0 0 2.8 4.4c1.3 1.3 3.1 2.2 4.5 2.7l1.9.7-5.5 5.3-.8-.4z" />
        <path fill="#564a39" d="M906.3 627.7c.7 1.4 1.7 3.3 3.1 4.8 1.5 1.5 3.5 2.5 4.9 3l-3.5 3.3c-1.3-.6-3.1-1.6-4.7-3.2a15 15 0 0 1-3-4.8l3.2-3.1m.8-4.1-2.5 2.4-3.1 3-1.2 1.2.6 1.6c.6 1.5 1.8 3.8 3.5 5.6 1.8 1.9 4 3.1 5.4 3.8l1.5.7 1.2-1.1 3.5-3.3 2.9-2.8-3.8-1.3c-1.7-.6-3.1-1.4-4-2.3a17 17 0 0 1-2.6-4.1l-1.4-3.4z" />
        <path fill="#f7d5e0" d="m909.1 637.9 1.7.9 3.5-3.3-1.9-.8-3.3 3.2z" />
        <path fill="#bff4ba" d="M922.9 634.1c-2.7 0-5.4-1.1-7.3-3.1l-4.4-4.7a10.5 10.5 0 0 1-2.8-7.2 10 10 0 0 1 3.1-7l11.9-11.3c2.1-2 5.1-3.1 8.1-3.1 2.8 0 5.2 1 6.9 2.8l4.4 4.7a9.5 9.5 0 0 1 2.4 7.6 12 12 0 0 1-3.5 7.3l-11.9 11.3a10.1 10.1 0 0 1-6.9 2.7z" />
        <path fill="#564a39" d="M931.5 598.9c2.3 0 4.5.7 6 2.4l4.4 4.7c3.3 3.5 2.4 9.9-1.1 13.2L929 630.5a8.9 8.9 0 0 1-12.5-.3l-4.4-4.7a9 9 0 0 1 .3-12.5l11.9-11.3c1.9-1.8 4.6-2.8 7.2-2.8m0-2.5c-3.3 0-6.7 1.3-8.9 3.5l-11.9 11.3a11.2 11.2 0 0 0-.4 15.9l4.4 4.7a11.4 11.4 0 0 0 16 .4l11.9-11.3c2.1-2 3.6-5 3.9-8.1.3-3.3-.6-6.5-2.7-8.6l-4.4-4.7a11 11 0 0 0-7.9-3.1z" />
        <path fill="#9ece97" d="M943.7 608.9s-.5 3.7-2.3 6.7c-1.5 2.4-4.8 5-8.1 8.1a46 46 0 0 1-8.1 6.5c-2 .8-5.6 2.2-8.7 0 3.3 3.5 9 3.7 12.5.3l11.9-11.3c4.7-4.5 2.8-10.3 2.8-10.3z" />
      </g>
      <path fill="#f9edf0" stroke="#564a39" stroke-miterlimit="10" stroke-width="3.3" d="M869.4 608.4s44.4 29.6 35.5 40.3c-8.8 10.6-49.2 3.4-49.2 3.4" />
      <path fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width=".8" d="M868.5 609.7s42.7 28.1 35.1 38.1c-7.4 9.5-47.6 2.7-47.6 2.7" />
    </g>

    <path id="right-hand" fill="#f9edf0" stroke="#564a39" stroke-miterlimit="10" stroke-width="3.3" d="M1112.7 584.9s37.9 37.5 27.2 46.3-48.9-6-48.9-6" />

    <g id="eyes">
      <ellipse cx="1036.6" cy="531.5" fill="#f9f9f9" rx="54.3" ry="55.6" />
      <ellipse class="eyes__background" cx="1034.7" cy="533.9" stroke-miterlimit="10" stroke-width="2.5" rx="45.1" ry="46.2" />
      <ellipse class="eyes__circle" cx="1028.7" cy="526.7" rx="34.9" ry="35.7" />
      <ellipse cx="1016" cy="511" fill="#fbfbfb" rx="14.9" ry="15.3" />
      <ellipse cx="865.8" cy="532.1" fill="#f9f9f9" rx="54.3" ry="55.6" />
      <ellipse class="eyes__background" cx="867.7" cy="534.6" stroke-miterlimit="10" stroke-width="2.5" rx="45.1" ry="46.2" />
      <ellipse class="eyes__circle" cx="873.6" cy="527.5" rx="35" ry="35.8" />
      <ellipse cx="886.4" cy="511.6" fill="#fbfbfb" rx="14.9" ry="15.3" />
    </g>

    <g id="close-eyes">
      <path fill="#564a39" d="M987.5 555.9a54.4 54.4 0 0 0 20.2 22.1 53.3 53.3 0 0 0 28.7 7.4 55.6 55.6 0 0 0 40.4-17.5c3.5-3.6 6.7-7.7 9.2-12.1a55.1 55.1 0 0 1-64.9 30.2c-1.3-.3-2.5-.8-3.7-1.2l-3.6-1.5-3.5-1.7-3.3-2a49.5 49.5 0 0 1-15.9-16.8 28.4 28.4 0 0 1-3.6-6.9z" />
      <path fill="#564a39" d="M817.2 555.9a54.4 54.4 0 0 0 20.2 22.1 53.3 53.3 0 0 0 28.7 7.4 55.6 55.6 0 0 0 40.4-17.5c3.5-3.6 6.7-7.7 9.2-12.1a55.1 55.1 0 0 1-64.9 30.2c-1.3-.3-2.5-.8-3.7-1.2l-3.6-1.5-3.5-1.7-3.3-2a49.5 49.5 0 0 1-15.9-16.8 28.4 28.4 0 0 1-3.6-6.9z" />
    </g>

    <g id="angry-eyes">
      <path fill="#f9edf0" d="m805.2 545.6 20.3 45.1 68.2 3.2-14.5-32.4z" />
      <path fill="#f9edf0" stroke="#564a39" stroke-miterlimit="10" stroke-width="3.3" d="M805.2 543.6s29.4-11 59.2 7.5c29.8 18.4 29.5 35.1 29.5 35.1" />
      <path fill="#f7d7e6" d="M892.2 586.3s-1.4-18.2-25.5-32-41.4-12.1-41.4-12.1 15.6-2.4 39.7 14.7 27.2 29.4 27.2 29.4z" />
      <path fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width=".8" d="M805.8 545.2s27.8-11.1 57.6 7.4c29.8 18.4 28.9 33.7 28.9 33.7" />
      <path fill="#f9edf0" d="m846.2 473.4 41.9-8.9 38 27.1-.8 24.7z" />
      <path fill="#f9edf0" stroke="#564a39" stroke-miterlimit="10" stroke-width="3.3" d="M941.8 511.7s-25 14.3-63-7-35.1-36-35.1-36" />
      <path fill="#f7d7e6" d="M940.3 511.5s-12.5 7-31 3.6-36.3-15-36.3-15 9 4.3 30.1 10c21.2 5.7 37.2 1.4 37.2 1.4z" />
      <path fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width=".8" d="M940.5 511.2s-22.3 14.2-61.3-7.9c-37.9-21.5-33.9-34.1-33.9-34.1" />
      <path fill="#f9edf0" d="m1064.6 473.3-42-8.9-37.9 27.1.7 24.7z" />
      <path fill="#f9edf0" stroke="#564a39" stroke-miterlimit="10" stroke-width="3.3" d="M969 511.7s25 14.3 63-7 35.1-36 35.1-36" />
      <path fill="#f7d7e6" d="M970.5 511.3s12.5 7 31 3.6 36.3-15 36.3-15-9 4.3-30.1 10c-21.2 5.7-37.2 1.4-37.2 1.4z" />
      <path fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width=".8" d="M970.3 511s22.2 14.2 61.3-7.9c37.9-21.5 33.9-34.1 33.9-34.1" />
      <path fill="#f9edf0" d="m1095.8 551.7-23.4 52.1-68-7.5 17.4-28.7z" />
      <path fill="#f9edf0" stroke="#564a39" stroke-miterlimit="10" stroke-width="3.3" d="M1095.8 549.8s-29.4-11-59.2 7.5c-29.8 18.4-29.5 35.1-29.5 35.1" />
      <path fill="#f7d7e6" d="M1008.8 592.4s1.4-18.2 25.5-32 41.4-12.1 41.4-12.1-13.2-1-39.7 14.7c-26.5 15.6-27.2 29.4-27.2 29.4z" />
      <path fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width=".8" d="M1095.2 551.3s-27.3-10.3-57.6 7.4c-28.9 16.8-28.9 33.7-28.9 33.7" />
    </g>

    <g id="sad-eyes">
      <g fill="#fbfbfb">
        <circle cx="849.8" cy="531.7" r="10.2" />
        <circle cx="859" cy="547.8" r="3.8" />
        <circle cx="1052.8" cy="527.5" r="10.7" />
        <circle cx="1043.4" cy="547" r="4.7" />
      </g>
      <path fill="#f9edf0" d="m818.5 502 18.6-29 62.5-5.5 15.5 19.3z" />
      <path fill="#f9edf0" stroke="#564a39" stroke-miterlimit="10" stroke-width="2.5" d="M908.6 483.9s-13.9 15.8-41.5 19.8c-27.6 3.9-48.6-5.4-48.6-5.4" />
      <path fill="#f7d7e6" d="M907 482.6s-12.3 15.7-39.9 19.7c-27.6 3.9-47.7-6-47.7-6s14.7 6.8 44.2 3.2c29.4-3.6 43.4-16.9 43.4-16.9z" />
      <path fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width=".8" d="M907.4 482.8s-13 15.3-40.6 19.2c-27.6 3.9-47.6-5.3-47.6-5.3" />
      <path fill="#f9edf0" d="m1080.9 497.8-12.6-31.8-62.6-.7-14 20.4z" />
      <path fill="#f9edf0" stroke="#564a39" stroke-miterlimit="10" stroke-width="2.5" d="M998.2 486.1s15.1 14.7 42.9 16.5 44.6-7.2 44.6-7.2" />
      <path fill="#f7d7e6" d="M999.8 484.3s13.4 14.9 41.1 17c27.8 2.1 43.6-7.8 43.6-7.8s-10.6 6.5-40.2 4.8c-29.7-1.7-44.5-14-44.5-14z" />
      <path fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width=".8" d="M999.4 484.5s14 14.4 41.8 16.5c27.8 2.1 43.6-7.2 43.6-7.2" />
    </g>

    <g id="glasses" stroke-miterlimit="10">
      <path fill="#fffdf3" stroke="#564a39" stroke-width="2" d="M935.2 523h28.7v6.7h-28.7z" />
      <g>
        <g fill="#fffdf3" stroke="#564a39" stroke-width="1.5">
          <path d="m798.5 546.2 1 4h134.9l1-4H798.5z" />
          <path d="M801.9 557.2c.5 1.3 1.1 2.7 1.8 4h126.7l1.8-4H801.9z" />
          <path d="M807.6 568.3a38 38 0 0 0 3 4h112.8l3-4H807.6z" />
          <path d="M911.3 583.3c1.9-1.3 3.7-2.6 5.3-4h-99.3c1.6 1.4 3.4 2.8 5.3 4h88.7z" />
          <path d="m796.9 535.2.4 4h139.3l.4-4H796.9z" />
          <path d="M837 590.3c8.2 2.8 18.1 4.5 30 4.5s21.8-1.7 30-4.5h-60z" />
          <path d="M937.3 528.2c0-2.1-.2-3.2-.2-3.2H796.9l-.2 3.2h140.6z" />
        </g>
        <path fill="none" stroke="#564a39" stroke-width="7" d="M796.9 525h140.3s7 69.7-70.1 69.7-70.2-69.7-70.2-69.7z" />
        <path fill="none" stroke="#fffdf3" stroke-width="3.4" d="M796.9 525h140.3s7 69.7-70.1 69.7-70.2-69.7-70.2-69.7z" />
      </g>
      <g>
        <g fill="#fffdf3" stroke="#564a39" stroke-width="1.5">
          <path d="m1103 546.2-1 4H967l-1-4h137z" />
          <path d="M1099.6 557.2c-.5 1.3-1.1 2.7-1.8 4H971.2l-1.8-4h130.2z" />
          <path d="M1093.9 568.3a38 38 0 0 1-3 4H978.1l-3-4h118.8z" />
          <path d="M990.2 583.3a56.4 56.4 0 0 1-5.3-4h99.3a43.2 43.2 0 0 1-5.3 4h-88.7z" />
          <path d="m1104.6 535.2-.4 4H964.8l-.4-4h140.2z" />
          <path d="M1064.5 590.3a92.5 92.5 0 0 1-30 4.5 92.5 92.5 0 0 1-30-4.5h60z" />
          <path d="M964.2 528.2c0-2.1.2-3.2.2-3.2h140.3l.2 3.2H964.2z" />
        </g>
        <path fill="none" stroke="#564a39" stroke-width="7" d="M1104.6 525H964.4s-7 69.7 70.1 69.7 70.1-69.7 70.1-69.7z" />
        <path fill="none" stroke="#fffdf3" stroke-width="3.4" d="M1104.6 525H964.4s-7 69.7 70.1 69.7 70.1-69.7 70.1-69.7z" />
      </g>
    </g>

    <g id="hair">
      <path fill="#f9edf0" stroke="#564a39" stroke-miterlimit="10" stroke-width="3.3" d="M1011.4 424.9s11.7 9.1 4.6 32.7-29.2 28-38.8 29.5" />
      <path fill="#f7d7e6" d="M1004.6 465.2c11.3-16 6.1-39.4 6.1-39.4s8.3 5.9 5.5 24.1c-1 7-4.7 16.9-11.3 23.2-11.1 10.8-26.3 11.6-26.3 11.6s14.7-3.5 26-19.5z" />
      <path fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width=".8" d="M1010.4 426.1s10.7 9.5 4.2 30.8c-8.2 26.8-36 28.3-36 28.3" />
      <path fill="#f9edf0" stroke="#564a39" stroke-miterlimit="10" stroke-width="3.3" d="M989.3 397s-26.1-17-55.8 8.7-33.6 99.1 9.6 111.9c30.2 9 47-29.6 27-41.1-13.5-7.8-26.7 6.9-26.7 6.9" />
      <path fill="#f7d7e6" d="M976.1 498.7c-3.7 3.9-6.3 9.9-20.9 13-13.9 3-32.1-10.4-32.1-10.4s11.1 16.9 30.2 16a24 24 0 0 0 22.8-18.6z" />
      <path fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width=".8" d="M988.1 398.7s-23.5-16.3-53.1 8.6-31.6 98.9 9 108.5c30.4 8 41.1-28.6 26.2-37-13.7-7.9-25.2 6.1-25.2 6.1" />
    </g>

    <g id="left-ear">
      <path fill="#f9edf0" stroke="#564a39" stroke-miterlimit="10" stroke-width="3.3" d="M891.3 395.9s-79.9-37.8-117.8-16.4c-19 21.5 29.4 112.1 29.4 112.1" />
      <path fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2.5" d="M890.3 398.6s-72.8-36.1-114.7-17.6c-16.9 23.4 29.8 109.1 29.8 109.1" />
      <path fill="#f7d7e6" d="M875.3 403.3c-14.1-6.1-60.8-23.6-91.2-11.4-12 13.5 11.2 63.5 20.5 82.3 14.1-29.7 39.9-54 70.7-70.9z" />
      <path fill="#33302d" stroke="#2b2927" stroke-miterlimit="10" stroke-width="2.5" d="M867.6 406.5c-12.6-5.5-51.9-20.6-79-9.7-10.7 12.1 9 55.5 17.3 72.3 14-25.7 35.5-47.4 61.7-62.6z" />
    </g>

    <g id="right-ear">
      <path fill="#f9edf0" stroke="#564a39" stroke-miterlimit="10" stroke-width="3.3" d="M1020.5 395s71.3-35 117.8-16.4c19 21.5-29.4 112.1-29.4 112.1" />
      <path fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2.5" d="M1021.7 397.7s67.8-34.8 114.8-16.3c16.3 14.9-30.5 107.8-30.5 107.8" />
      <path fill="#f7d7e6" d="M1035.7 403.3c14.1-6.1 60.8-23.6 91.2-11.4 12 13.5-11.2 63.5-20.5 82.3-14.1-29.7-39.9-54-70.7-70.9z" />
      <path fill="#33302d" stroke="#2b2927" stroke-miterlimit="10" stroke-width="2.5" d="M1043.4 406.5c12.6-5.5 51.9-20.6 79-9.7 10.7 12.1-9 55.5-17.3 72.3a163.4 163.4 0 0 0-61.7-62.6z" />
    </g>

    <g id="bow">
      <g>
        <path fill="#f9a5a5" stroke="#564a39" stroke-miterlimit="10" stroke-width="2" d="M1084.8 439.1s7.6 19.3 8.8 26.9c.6 4-.2 9-5.5 13.6-4.7 4.1-13.9 8-15.2 8.3-2.8.7-2.1-1.8-2.1-1.8s5.2-19.3 6.1-29.2c.9-9.8.1-20.4.1-20.4l7.8 2.6z" />
        <path fill="#dd6464" d="M1077.4 444.9s9.1 6.4 12.3 13.7c3.2 7.3 2.5 16 2.5 16s2.4-7.8-.3-15.4l-5-14.4-9.3-11.2-.2 11.3z" />
        <path fill="none" stroke="#564a39" stroke-miterlimit="10" stroke-width="2" d="M1084.8 439.1s7.6 19.3 8.8 26.9c.6 4-.2 9-5.5 13.6-4.7 4.1-13.9 8-15.2 8.3-2.8.7-2.1-1.8-2.1-1.8s5.2-19.3 6.1-29.2c.9-9.8.1-20.4.1-20.4l7.8 2.6z" />
      </g>
      <g>
        <path fill="#f9a5a5" stroke="#564a39" stroke-miterlimit="10" stroke-width="2" d="M1059.7 435.8s-14.2 15-18.2 21.7c-2.1 3.5-3.2 8.4 0 14.6a61 61 0 0 0 10.9 13.4c2.3 1.7 2.6-.9 2.6-.9s2.4-19.9 5.3-29.3c2.9-9.5 7.6-19 7.6-19l-8.2-.5z" />
        <path fill="#dd6464" d="M1064.4 443.9s-10.9 2.6-16.5 8.1c-5.7 5.6-8.4 13.9-8.4 13.9s.8-8.1 6-14.2l10-11.5 12.8-6.9-3.9 10.6z" />
        <path fill="none" stroke="#564a39" stroke-miterlimit="10" stroke-width="2" d="M1059.7 435.8s-14.2 15-18.2 21.7c-2.1 3.5-3.2 8.4 0 14.6a61 61 0 0 0 10.9 13.4c2.3 1.7 2.6-.9 2.6-.9s2.4-19.9 5.3-29.3c2.9-9.5 7.6-19 7.6-19l-8.2-.5z" />
      </g>
      <g>
        <path fill="#f9a5a5" stroke="#564a39" stroke-miterlimit="10" stroke-width="2" d="M1077.9 428.7c5.6-7.6 28.5-14.7 34.6-11 6.1 3.7-.1 26.8-6.2 37.6-3.1 5.6-6.7 3-11.1.1-4.5-2.9-19.6-17.7-19.6-17.7s-3.2-1.4 2.3-9z" />
        <path fill="#dd6464" d="M1109.9 446.1s-2.9 9.5-5.7 11.8c-2.8 2.3-9-2.4-9-2.4l-9-8.8s12.4 9.5 16.3 7.5 7.4-8.1 7.4-8.1z" />
        <path fill="none" stroke="#564a39" stroke-miterlimit="10" stroke-width="2" d="M1077.9 428.7c5.6-7.6 28.5-14.7 34.6-11 6.1 3.7-.1 26.8-6.2 37.6-3.1 5.6-6.7 3-11.1.1-4.5-2.9-19.6-17.7-19.6-17.7s-3.2-1.4 2.3-9z" />
      </g>
      <g>
        <path fill="#f9a5a5" stroke="#564a39" stroke-miterlimit="10" stroke-width="2" d="M1069.4 426.2c-2.3-9.1-20.9-24.3-28-23.2-7.1 1.1-9.9 24.9-8.4 37.2.8 6.4 5.1 5.3 10.3 4.3 5.2-1 24.8-9.1 24.8-9.1s3.6-.1 1.3-9.2z" />
        <path fill="#dd6464" d="M1033.2 430.3s-.9 9.9.8 13.1 9.3 1.1 9.3 1.1l11.7-4.8s-15 4.1-17.9.8a25.3 25.3 0 0 1-3.9-10.2z" />
        <path fill="none" stroke="#564a39" stroke-miterlimit="10" stroke-width="2" d="M1069.4 426.2c-2.3-9.1-20.9-24.3-28-23.2-7.1 1.1-9.9 24.9-8.4 37.2.8 6.4 5.1 5.3 10.3 4.3 5.2-1 24.8-9.1 24.8-9.1s3.6-.1 1.3-9.2z" />
      </g>
      <g>
        <path fill="#f9a5a5" fill-rule="evenodd" d="m1076 439.3-.7-.1-6.4-1.3c-.9-.2-1.7-.7-2.2-1.5s-.7-1.8-.5-2.7l1-5a3.6 3.6 0 0 1 3.5-2.8l.7.1 6.4 1.3c.9.2 1.7.7 2.3 1.5.5.8.7 1.8.5 2.7l-1 5a3.6 3.6 0 0 1-3.6 2.8z" clip-rule="evenodd" />
        <path fill="#564a39" d="m1070.6 426.6.6.1 6.4 1.3c1.5.3 2.5 1.8 2.2 3.3l-1 5a2.8 2.8 0 0 1-2.8 2.2l-.6-.1-6.4-1.3a2.8 2.8 0 0 1-2.2-3.3l1-5a2.9 2.9 0 0 1 2.8-2.2m0-1.5c-2 0-3.8 1.4-4.2 3.4l-1 5c-.5 2.3 1 4.6 3.3 5.1l6.4 1.3.9.1c2 0 3.8-1.4 4.2-3.4l1-5c.5-2.3-1-4.6-3.3-5.1l-6.4-1.3-.9-.1z" />
        <path fill="#dd6464" fill-rule="evenodd" d="m1077.4 439.3-11.2-2.5-.2-3.3s2.7 2 6.4 2.8 7.1.4 7.1.4l-2.1 2.6z" clip-rule="evenodd" />
        <path fill="#564a39" d="m1070.6 426.6.6.1 6.4 1.3c1.5.3 2.5 1.8 2.2 3.3l-1 5a2.8 2.8 0 0 1-2.8 2.2l-.6-.1-6.4-1.3a2.8 2.8 0 0 1-2.2-3.3l1-5a2.9 2.9 0 0 1 2.8-2.2m0-1.5c-2 0-3.8 1.4-4.2 3.4l-1 5c-.5 2.3 1 4.6 3.3 5.1l6.4 1.3.9.1c2 0 3.8-1.4 4.2-3.4l1-5c.5-2.3-1-4.6-3.3-5.1l-6.4-1.3-.9-.1z" />
      </g>
    </g>
  </g>

  <g id="stars" transform="translate(960 540)">
    <path class="star" fill="#fffbe6" stroke="#564a39" stroke-miterlimit="10" stroke-width="1.5" d="M47.5 23.3c.7-.7 1.2-1.6 1.2-2.6.1-1-.2-2-.9-2.8a3.5 3.5 0 0 0-2.5-1.4l-10.7-1.8c-.5-.1-1-.5-1.3-1l-4.5-10a3.7 3.7 0 0 0-2.1-2c-.9-.4-2-.4-2.9 0-.9.4-1.7 1.1-2.1 2l-4.9 10c-.3.5-.7.8-1.3.9L4.8 15.9a4 4 0 0 0-2.6 1.4c-.6.8-1 1.7-1 2.7a4 4 0 0 0 1.1 2.7l7.8 8.3c.4.4.5 1 .5 1.5l-2 11.3a4 4 0 0 0 3.8 4.8c.7 0 1.3-.2 1.9-.6l9.4-5.1c.5-.3 1.1-.3 1.6 0l9.3 5.3c.6.4 1.4.6 2.1.5a4 4 0 0 0 3.5-2.4c.3-.7.4-1.4.3-2.2L39 32.8c-.1-.5.1-1.1.5-1.5l8-8z" />
    <path class="star" fill="#fffbe6" stroke="#564a39" stroke-miterlimit="10" stroke-width="1.5" d="M47.5 23.3c.7-.7 1.2-1.6 1.2-2.6.1-1-.2-2-.9-2.8a3.5 3.5 0 0 0-2.5-1.4l-10.7-1.8c-.5-.1-1-.5-1.3-1l-4.5-10a3.7 3.7 0 0 0-2.1-2c-.9-.4-2-.4-2.9 0-.9.4-1.7 1.1-2.1 2l-4.9 10c-.3.5-.7.8-1.3.9L4.8 15.9a4 4 0 0 0-2.6 1.4c-.6.8-1 1.7-1 2.7a4 4 0 0 0 1.1 2.7l7.8 8.3c.4.4.5 1 .5 1.5l-2 11.3a4 4 0 0 0 3.8 4.8c.7 0 1.3-.2 1.9-.6l9.4-5.1c.5-.3 1.1-.3 1.6 0l9.3 5.3c.6.4 1.4.6 2.1.5a4 4 0 0 0 3.5-2.4c.3-.7.4-1.4.3-2.2L39 32.8c-.1-.5.1-1.1.5-1.5l8-8z" />
    <path class="star" fill="#fffbe6" stroke="#564a39" stroke-miterlimit="10" stroke-width="1.5" d="M47.5 23.3c.7-.7 1.2-1.6 1.2-2.6.1-1-.2-2-.9-2.8a3.5 3.5 0 0 0-2.5-1.4l-10.7-1.8c-.5-.1-1-.5-1.3-1l-4.5-10a3.7 3.7 0 0 0-2.1-2c-.9-.4-2-.4-2.9 0-.9.4-1.7 1.1-2.1 2l-4.9 10c-.3.5-.7.8-1.3.9L4.8 15.9a4 4 0 0 0-2.6 1.4c-.6.8-1 1.7-1 2.7a4 4 0 0 0 1.1 2.7l7.8 8.3c.4.4.5 1 .5 1.5l-2 11.3a4 4 0 0 0 3.8 4.8c.7 0 1.3-.2 1.9-.6l9.4-5.1c.5-.3 1.1-.3 1.6 0l9.3 5.3c.6.4 1.4.6 2.1.5a4 4 0 0 0 3.5-2.4c.3-.7.4-1.4.3-2.2L39 32.8c-.1-.5.1-1.1.5-1.5l8-8z" />
    <path class="star" fill="#fffbe6" stroke="#564a39" stroke-miterlimit="10" stroke-width="1.5" d="M47.5 23.3c.7-.7 1.2-1.6 1.2-2.6.1-1-.2-2-.9-2.8a3.5 3.5 0 0 0-2.5-1.4l-10.7-1.8c-.5-.1-1-.5-1.3-1l-4.5-10a3.7 3.7 0 0 0-2.1-2c-.9-.4-2-.4-2.9 0-.9.4-1.7 1.1-2.1 2l-4.9 10c-.3.5-.7.8-1.3.9L4.8 15.9a4 4 0 0 0-2.6 1.4c-.6.8-1 1.7-1 2.7a4 4 0 0 0 1.1 2.7l7.8 8.3c.4.4.5 1 .5 1.5l-2 11.3a4 4 0 0 0 3.8 4.8c.7 0 1.3-.2 1.9-.6l9.4-5.1c.5-.3 1.1-.3 1.6 0l9.3 5.3c.6.4 1.4.6 2.1.5a4 4 0 0 0 3.5-2.4c.3-.7.4-1.4.3-2.2L39 32.8c-.1-.5.1-1.1.5-1.5l8-8z" />
    <path class="star" fill="#fffbe6" stroke="#564a39" stroke-miterlimit="10" stroke-width="1.5" d="M47.5 23.3c.7-.7 1.2-1.6 1.2-2.6.1-1-.2-2-.9-2.8a3.5 3.5 0 0 0-2.5-1.4l-10.7-1.8c-.5-.1-1-.5-1.3-1l-4.5-10a3.7 3.7 0 0 0-2.1-2c-.9-.4-2-.4-2.9 0-.9.4-1.7 1.1-2.1 2l-4.9 10c-.3.5-.7.8-1.3.9L4.8 15.9a4 4 0 0 0-2.6 1.4c-.6.8-1 1.7-1 2.7a4 4 0 0 0 1.1 2.7l7.8 8.3c.4.4.5 1 .5 1.5l-2 11.3a4 4 0 0 0 3.8 4.8c.7 0 1.3-.2 1.9-.6l9.4-5.1c.5-.3 1.1-.3 1.6 0l9.3 5.3c.6.4 1.4.6 2.1.5a4 4 0 0 0 3.5-2.4c.3-.7.4-1.4.3-2.2L39 32.8c-.1-.5.1-1.1.5-1.5l8-8z" />
  </g>
</svg>
              
            
!

CSS

              
                @import "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css";

/**
* Mixins
*/
@mixin respond-to($breakpoint) {
  @if $breakpoint==min375 {
    @media only screen and (min-width: 375px) {
      @content;
    }
  }
  @if $breakpoint==min410 {
    @media only screen and (min-width: 410px) {
      @content;
    }
  }

  @if $breakpoint==min640 {
    @media only screen and (min-width: 640px) {
      @content;
    }
  }

  @if $breakpoint==min768 {
    @media only screen and (min-width: 768px) {
      @content;
    }
  }

  @if $breakpoint==min1024 {
    @media only screen and (min-width: 1024px) {
      @content;
    }
  }

  @if $breakpoint==min1240 {
    @media only screen and (min-width: 1240px) {
      @content;
    }
  }

  @if $breakpoint==min1400 {
    @media only screen and (min-width: 1400px) {
      @content;
    }
  }

  @if $breakpoint==min1600 {
    @media only screen and (min-width: 1600px) {
      @content;
    }
  }

  @if $breakpoint==min1920 {
    @media only screen and (min-width: 1920px) {
      @content;
    }
  }

  @if $breakpoint==landscape {
    @media (min-aspect-ratio: 3/2) {
      @content;
    }
  }

  @if $breakpoint==darkmode {
    @media (prefers-color-scheme: dark) {
      @content;
    }
  }

  @if $breakpoint==lightMode {
    @media (prefers-color-scheme: light) {
      @content;
    }
  }

  @if $breakpoint==reducedMotion {
    @media (prefers-reduced-motion: reduce) {
      @content;
    }
  }
}

@mixin hover {
  @media (hover: hover) and (pointer: fine) {
    &:hover {
      @content;
    }
  }
}

@mixin reset-focus() {
  @supports #{"\selector(*:focus-visible)"} {
    &:focus:not(:focus-visible) {
      @content;
    }
  }
}

/**
* Reset styles
*/

*,
::before,
::after {
  box-sizing: border-box;
  -webkit-user-drag: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: none;
  background-color: transparent;
  cursor: pointer;
}

li {
  list-style-type: none;
}

address {
  font-style: normal;
}

input,
textarea,
select {
  font-size: 16px;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  color: #fff !important;
  -webkit-box-shadow: 0 0 0 30px white inset;
  background-color: transparent;
}

a,
span {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}

/**
* Base layout
*/

:root {
  font-size: 62.5%;
}

html {
  height: -webkit-fill-available;
  height: -moz-fill-available;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: -moz-fill-available;
  font-size: 1.6rem;
}

body {
  background: radial-gradient(circle, #ffe8ee 0%, #eed1d9 100%);
  font-family: "Lilita One", sans-serif;
}

.hidden-text {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.button {
  --border-color: #564a39;
  --background-color: #ffeaea;
  --text-shadow-color: #c5c5c5;
  --text-stroke-color: #f9f4f4;
  --text-color: #564a39;
  --gradient-top: linear-gradient(180deg, #f1dede 0%, #fff1f1 100%);
  --gradient-bottom: linear-gradient(0deg, #e7bdbd 0%, #ffdbdb 100%);
  --border-radius: 100px;
  --padding: 30px 40px;
  --font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: var(--padding);
  border-radius: var(--border-radius);
  font-size: var(--font-size);
  letter-spacing: 2px;
  text-transform: uppercase;

  @include respond-to(min768) {
    --padding: 35px 55px;
    --font-size: 4rem;
  }

  .button__copy {
    --text-shadow: 1px 1px var(--text-shadow-color);
    --text-stroke: 1px var(--text-stroke-color);
    text-shadow: var(--text-shadow);
    -webkit-text-stroke: var(--text-stroke);

    @include respond-to(min768) {
      --text-shadow: 2px 2px var(--text-shadow-color);
      --text-stroke: 2px var(--text-stroke-color);
    }
  }

  .button__background {
    --inset: 4px 5px 8px;
    --inset-after: 5px 0 0;
    --inset-before: 10px 5px 5px;
    inset: var(--inset);

    @include respond-to(min768) {
      --inset: 4px 7px 9px;
      --inset-after: 5px 0 0;
      --inset-before: 10px 5px 5px;
    }

    &::after {
      inset: var(--inset-after);
    }

    &::before {
      inset: var(--inset-before);
    }
  }

  &--active,
  &--secondary {
    --border-color: #564a39;
    --background-color: #baffdf;
    --text-shadow-color: white;
    --text-stroke-color: #4cdce4;
    --text-color: #564a39;
    --gradient-top: linear-gradient(180deg, #16ffe9 0%, #b0f0ff 100%);
    --gradient-bottom: linear-gradient(0deg, #47e3d4 0%, #5dffd2 100%);
  }

  &--icon {
    --border-radius: 50%;
    --padding: 0;
    --width: 45px;
    --height: 45px;
    width: var(--width);
    height: var(--height);

    @include respond-to(min768) {
      --width: 50px;
      --height: 50px;
    }

    .button__copy {
      --width: 16px;
      --height: 16px;
      width: var(--width);
      height: var(--height);
      top: -2px;
      fill: currentColor;

      @include respond-to(min768) {
        --width: 22px;
        --height: 22px;
      }
    }

    .button__background {
      --inset: 3px 3px 5px;
      --inset-after: 2px 0 0;
      --inset-before: 3px 3px 3px;
    }
  }
}

.button__copy {
  position: relative;
  color: var(--text-color);
  top: -5px;
  z-index: 4;
}

.button__background,
.button__border {
  position: absolute;
  border-radius: var(--border-radius);
  transition: transform 0.5s ease-out;
}

.button__border {
  inset: 0;
  background-color: var(--border-color);
  z-index: 2;
}

.button__background {
  background-color: var(--background-color);
  z-index: 3;

  &::after,
  &::before {
    content: "";
    position: absolute;
  }

  &::after {
    background: var(--gradient-bottom);
    border-radius: var(--border-radius);
    z-index: 1;
  }

  &::before {
    content: "";
    position: absolute;
    background: var(--gradient-top);
    border-radius: var(--border-radius);
    z-index: 2;
  }
}

#sound-button,
#start-button,
#control-list,
#social-list {
  position: fixed;
  z-index: 2;
}

#social-list {
  display: none;
  right: 20px;
  bottom: 20px;

  @include respond-to(min768) {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
}

.social-list__item {
  width: 30px;
  height: 30px;
  padding: 2px;

  svg {
    width: 100%;
    height: 100%;
    fill: black;
  }
}

#sound-button {
  right: 20px;
  top: 20px;

  &.button--active {
    svg line {
      opacity: 0.01;
    }
  }

  .button__copy {
    --width: 16px;
    --height: 16px;

    @include respond-to(min768) {
      --width: 18px;
      --height: 18px;
    }

    line {
      opacity: 0.99;
    }
  }
}

#control-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  top: 50%;
  left: 20px;
  background-color: #ffeeee;
  border-radius: 50px;
  padding: 5px;
  box-shadow: 0 0 0 3px #564a39;
  opacity: 0.01;
  visibility: hidden;
  transform: translate(0, -50%);

  button[data-id="glasses"] .button__copy {
    --width: 22px;
    --height: 22px;
    @include respond-to(min768) {
      --width: 30px;
      --height: 30px;
    }
  }
}

#svg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#start-button {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#jigglypuff,
#stars {
  pointer-events: none;
}

#jigglypuff-background {
  pointer-events: all;
  cursor: pointer;
}

#jigglypuff,
#sing-circles {
  --float-x: 0;
  --float-y: 0;
  --float-rotate: 0;
  --float-scale: 1;
  --x: 0;
  --y: 0;
  --rotate: 0;
  --scale: 0;
  --scale-y: 1;
  --scale-x: 1;
  transform-origin: 50% 50%;
  // transform-box: fill-box;
  transform: translate3d(
      calc((var(--float-x) + var(--x)) * 1px),
      calc((var(--float-y) + var(--y)) * 1px),
      0
    )
    rotate(calc((var(--float-rotate) + var(--rotate)) * 1deg))
    scale(calc(var(--float-scale) - var(--scale))) scaleX(var(--scale-x))
    scaleY(var(--scale-y));
  opacity: 0.01;
}

#angry-eyes,
#sad-eyes,
#close-eyes,
#sing-mouth,
#angry-mouth,
#sad-mouth,
#hat,
#bow,
#glasses,
.star {
  opacity: 0.01;
}

#sing-hand,
#right-hand,
#left-ear,
#right-ear {
  --sing-rotate: 0;
  --rotate: 0;
  --scale: 1;
  transform: rotate(calc((var(--rotate) + var(--sing-rotate)) * 1deg))
    scale(var(--scale));
  transform-box: fill-box;
}

#sing-hand {
  transform-origin: 0 0;
}

#right-ear {
  transform-origin: 0 100%;
}

#left-ear {
  transform-origin: 100% 100%;
}

#left-leg,
#right-leg {
  --float-rotate: 0;
  --rotate: 0;
  --scale: 1;
  transform: rotate(calc((var(--float-rotate) + var(--rotate)) * 1deg))
    scale(var(--scale));
  transform-box: fill-box;
}

#left-leg {
  transform-origin: 100% 0;
}

#right-left {
  transform-origin: 0 100%;
}

#hair {
  --float-rotate: 0;
  --float-x: 0;
  --float-y: 0;
  --rotate: 0;
  --scale: 1;
  transform: translate3d(0, calc(var(--float-y) * 1px), 0)
    rotate(calc((var(--rotate) + var(--float-rotate)) * 1deg))
    scale(var(--scale));
  transform-origin: 85% 20%;
  transform-box: fill-box;
}

#eyes {
  --background-fill: #b1e9f2;
  --background-stroke: #537684;
  --circle-fill: #537684;

  .eyes__background {
    fill: var(--background-fill);
    stroke: var(--background-stroke);
  }

  .eyes__circle {
    fill: var(--circle-fill);
  }

  &.eyes--shiny {
    --background-fill: #b1efba;
    --background-stroke: #558254;
    --circle-fill: #558254;
  }
}

              
            
!

JS

              
                // Powered by greensock.com
// Many thanks to GSAP and its whole team for making the web a funnier place.
// Also, for allowing us to do cool things in an easy way while performing incredible :)

const emiter = new EventEmitter();
const mediaReducedMotion = window.matchMedia(
  "(prefers-reduced-motion: reduce)"
);
let isReducdeMotion = mediaReducedMotion.matches;

const EVENTS = {
  JIGGLYPUFF_TRANSITION_IN: "jigglypuffTransitionIn",
  JIGGLYPUFF_CHANGE_ACCESORY: "jigglypuffChangeAccesory",
  JIGGLYPUFF_REDUCED_MOTION: "jigglypuffReducedMotion",
  PARTICLES_BOUNCE: "particlesBounce",
  SHOW_CONTROL: "showControl",
  PARTICLE_REDUCED_MOTION: "particleReducedMotion"
};

const SOUNDS = {
  song: {
    name: "song",
    sound: new Howl({
      src: "https://assets.codepen.io/271665/jigglypuff-song.mp3",
      loop: true,
      volume: 0.45
    })
  },
  hit: {
    name: "hit",
    sound: new Howl({
      src: "https://assets.codepen.io/271665/jigglypuff-hit.mp3",
      volume: 0.7
    })
  },
  hit2: {
    name: "hit2",
    sound: new Howl({
      src: "https://assets.codepen.io/271665/jigglypuff-hit-2.mp3",
      volume: 0.7
    })
  },
  hit3: {
    name: "hit3",
    sound: new Howl({
      src: "https://assets.codepen.io/271665/jigglypuff-hit-3.mp3",
      volume: 0.3
    })
  }
};

const Particle = () => {
  const $element = document.createElementNS(
    "http://www.w3.org/2000/svg",
    "circle"
  );
  let tl = null;

  const animate = () => {
    const duration = gsap.utils.random(6, 10, 1);
    gsap.set($element, {
      cx: "random(0,1920)",
      cy: "random(0,1080)",
      r: "random(30,60)",
      fill: gsap.utils.random(["#fff", "#fdfbea", "#eefdea", "#eaf5fd"])
    });

    if (tl) tl.kill();

    tl = gsap.timeline({
      paused: isReducdeMotion,
      onComplete: () => {
        gsap.set($element, {
          y: 0,
          scale: 1
        });
        animate();
      },
      delay: gsap.utils.random(0, 6, 1)
    });
    tl.addLabel("opacity", 0);
    tl.addLabel("move", 0);
    tl.fromTo(
      $element,
      {
        opacity: 0
      },
      {
        duration: duration * 0.5,
        opacity: "random(0.5, 0.8)",
        ease: "power2.out"
      },
      "opacity"
    );
    tl.to(
      $element,
      {
        duration: duration * 0.5,
        opacity: 0,
        ease: "power4.out"
      },
      `>=opacity`
    );

    tl.to(
      $element,
      {
        duration,
        y: "-=random(200, 500)",
        scale: `+=random(1.02, 1.1)`,
        transformOrigin: "50% 50%",
        ease: "sine.inOut"
      },
      "move"
    );
    if (isReducdeMotion) tl.seek(1);
    return tl;
  };

  const toggleAnimation = () => {
    if (isReducdeMotion) {
      tl.pause();
    } else {
      tl.play();
    }
  };

  return { $el: $element, animate, toggleAnimation };
};

const Particles = () => {
  const $el = document.getElementById("particles");
  const $documentFragment = document.createDocumentFragment();
  const totalParticles = gsap.utils.random(15, 30, 1);
  let particles = null;

  const createParticles = () => {
    particles = Array(totalParticles)
      .fill()
      .map(() => Particle());

    particles.forEach((particle) => {
      $documentFragment.appendChild(particle.$el);
    });

    $el.appendChild($documentFragment);
  };

  const animate = (particles) => {
    particles.forEach((particle) => {
      particle.animate();
    });
  };

  const init = () => {
    createParticles();
    animate(particles);
  };

  emiter.on(EVENTS.PARTICLE_REDUCED_MOTION, () => {
    particles.forEach((particle) => {
      particle.toggleAnimation();
    });
  });

  emiter.on(EVENTS.PARTICLES_BOUNCE, () => {
    if (isReducdeMotion) return;
    gsap.to($el, {
      keyframes: {
        x: [5, -5, 0],
        y: [2, -2, 0],
        scale: [1.02, 1, 1.01, 1]
      }
    });
  });

  init();
};

const Button = ({ $el, onClick = () => {}, toggleActive, isActive }) => {
  const $border = $el.querySelector(".button__border");
  const $background = $el.querySelector(".button__background");
  const $copy = $el.querySelector(".button__copy");
  const activeClass = "button--active";

  if (isActive) $el.classList.add(activeClass);

  const handleMouseEnter = () => {
    if (isReducdeMotion) return;
    gsap.to([$border, $background], {
      keyframes: {
        scaleX: [1, 1.2, 0.8, 1],
        scaleY: [1, 1.3, 0.7, 1.1, 0.9, 1]
      },
      transformOrigin: "50% 50% 0",
      duration: 0.65,
      ease: "power1.inOut",
      stagger: 0.035
    });

    gsap.to($copy, {
      keyframes: {
        scale: [1, 1.025, 0.98, 1]
      },
      duration: 1,
      ease: "power1.out"
    });
  };

  const handleClick = () => {
    if (toggleActive) $el.classList.toggle(activeClass);
    onClick();
    if (isReducdeMotion) return;
    gsap.to($el, {
      keyframes: {
        scale: [0.98, 1.04, 1]
      },
      transformOrigin: "50% 50% 0",
      duration: 0.4,
      ease: "power1.out"
    });
  };

  const init = () => {
    $el.addEventListener("mouseenter", handleMouseEnter);
    $el.addEventListener("click", handleClick);
  };

  const destroy = () => {
    $el.removeEventListener("mouseenter", handleMouseEnter);
    $el.removeEventListener("click", handleClick);
  };

  init();

  return {
    destroy
  };
};

const Control = () => {
  const $el = document.getElementById("control-list");
  const $buttons = $el.querySelectorAll(".control-list__button");
  const buttons = [...$buttons].map(($el) =>
    Button({
      $el,
      onClick: () => {
        const id = $el.getAttribute("data-id");
        const isActive = $el.classList.contains("button--active");
        emiter.emit(EVENTS.JIGGLYPUFF_CHANGE_ACCESORY, id, isActive);
      },
      toggleActive: true
    })
  );

  emiter.on(EVENTS.SHOW_CONTROLS, () => {
    gsap.to($el, {
      duration: 1,
      autoAlpha: 1,
      delay: 1
    });
  });
};

const Jigglypuff = () => {
  const STATES = {
    SING: 0,
    SAD: 1,
    ANGRY: 2,
    SURPRISE: 3
  };

  const CSS_VARS = {
    FLOAT_X: "--float-x",
    FLOAT_Y: "--float-y",
    FLOAT_ROTATE: "--float-rotate",
    FLOAT_SCALE: "--float-scale",
    SING_ROTATE: "--sing-rotate",
    X: "--x",
    Y: "--y",
    ROTATE: "--rotate",
    SCALE: "--scale",
    SCALE_X: "--scale-x",
    SCALE_Y: "--scale-y"
  };

  const TIMELINES = {
    float: null,
    sing: null,
    touch: null,
    start: null
  };

  const ELEMENTS = {
    background: {
      states: null,
      $el: document.getElementById("background")
    },
    jigglypuff: {
      states: null,
      $el: document.getElementById("jigglypuff")
    },
    jigglypuffBackground: {
      states: null,
      $el: document.getElementById("jigglypuff-background")
    },
    body: {
      states: null,
      $el: document.getElementById("body")
    },
    hair: {
      states: null,
      $el: document.getElementById("hair")
    },
    leftEar: {
      states: null,
      $el: document.getElementById("left-ear")
    },
    rightEar: {
      states: null,
      $el: document.getElementById("right-ear")
    },
    singHand: {
      states: null,
      $el: document.getElementById("sing-hand")
    },
    rightHand: {
      states: null,
      $el: document.getElementById("right-hand")
    },
    leftLeg: {
      states: null,
      $el: document.getElementById("left-leg")
    },
    rightLeg: {
      states: null,
      $el: document.getElementById("right-leg")
    },
    eyes: {
      states: [STATES.SING, STATES.SAD, STATES.ANGRY, STATES.SURPRISE],
      $el: document.getElementById("eyes")
    },
    closeEyes: {
      states: [],
      $el: document.getElementById("close-eyes")
    },
    sadEyes: {
      states: [STATES.SAD],
      $el: document.getElementById("sad-eyes")
    },
    angryEyes: {
      states: [STATES.ANGRY],
      $el: document.getElementById("angry-eyes")
    },
    mouth: {
      states: [STATES.SING],
      $el: document.getElementById("mouth")
    },
    singMouth: {
      states: [],
      $el: document.getElementById("sing-mouth")
    },
    sadMouth: {
      states: [STATES.SAD, STATES.SURPRISE],
      $el: document.getElementById("sad-mouth")
    },
    angryMout: {
      states: [STATES.ANGRY],
      $el: document.getElementById("angry-mouth")
    },
    hat: {
      sates: null,
      $el: document.getElementById("hat")
    },
    glasses: {
      states: null,
      $el: document.getElementById("glasses")
    },
    bow: {
      states: null,
      $el: document.getElementById("bow")
    },
    singCirclesGroup: {
      state: [STATES.SING],
      $el: document.getElementById("sing-circles")
    },
    singCircles: {
      states: null,
      $el: document.querySelectorAll(".sing-circle")
    },
    starsGroup: {
      states: null,
      $el: document.getElementById("stars")
    },
    stars: {
      states: null,
      $el: document.querySelectorAll(".star")
    }
  };

  const DATA = {
    width: 0,
    height: 0,
    originalWidth: 1920,
    originalHeight: 1080,
    windowWidth: 0,
    windowHeight: 0,
    hits: 0,
    computedStyle: getComputedStyle(ELEMENTS.jigglypuff.$el)
  };

  const stopSound = (sound) => {
    sound.sound.stop();
  };

  const playSound = (sound) => {
    sound.sound.play();
  };

  const stopTimeline = (timeline) => {
    timeline.pause();
    timeline.seek(0);
  };

  const starAnimation = () => {
    const x =
      parseFloat(DATA.computedStyle.getPropertyValue(CSS_VARS.FLOAT_X)) +
      parseFloat(DATA.computedStyle.getPropertyValue(CSS_VARS.X));
    const y =
      parseFloat(DATA.computedStyle.getPropertyValue(CSS_VARS.FLOAT_Y)) +
      parseFloat(DATA.computedStyle.getPropertyValue(CSS_VARS.Y));

    if (isReducdeMotion) {
      gsap.set(ELEMENTS.stars.$el, {
        x: () => x + gsap.utils.random(-180, 180, 10),
        y: () => y - gsap.utils.random(200, 300, 20),
        scale: "random(1.1,1.5)",
        rotate: "random(-120,120,20)",
        transformOrigin: "50% 50% 0"
      });

      gsap.to(ELEMENTS.stars.$el, {
        stagger: 0.12,
        duration: "random(1.2,1.5)",
        ease: "sine.out",
        keyframes: {
          opacity: [0, 1, 0]
        }
      });
      return;
    }

    gsap.fromTo(
      ELEMENTS.stars.$el,
      {
        scale: 0.5,
        x: () => x + gsap.utils.random(-180, 180, 10),
        y: () => y + gsap.utils.random(0, -100, 20)
      },
      {
        stagger: 0.12,
        duration: "random(1.2,1.5)",
        ease: "sine.out",
        keyframes: {
          opacity: [0, 1, 0]
        },
        transformOrigin: "50% 50% 0",
        y: () => y - gsap.utils.random(200, 300, 20),
        scale: "random(1.1,1.5)",
        rotate: "random(-120,120,20)"
      }
    );
  };

  const stepsTl = ($el1, $el2, steps, repeat = -1, yoyo = false) => {
    const tl = gsap.timeline({
      repeat,
      yoyo
    });

    steps.forEach((step) => {
      tl.to(
        $el1,
        {
          opacity: step[0],
          duration: 0
        },
        `+=${step[2]}`
      ).to($el2, {
        opacity: step[1],
        duration: 0
      });
    });

    return tl;
  };

  const floatTl = () => {
    const tl = gsap.timeline({ paused: true });

    const xTl = () => {
      const tl = gsap.timeline({
        repeat: -1
      });

      const steps = [
        {
          [CSS_VARS.FLOAT_X]: "random(50,100)",
          duration: 3
        },
        {
          [CSS_VARS.FLOAT_X]: "random(-100,-50)",
          duration: 4
        }
      ];

      steps.forEach((step) => {
        tl.to([ELEMENTS.jigglypuff.$el, ELEMENTS.singCirclesGroup.$el], {
          ...step,
          repeat: 1,
          yoyo: true,
          yoyoEase: "sine.in",
          ease: "sine.out"
        });
      });

      return tl;
    };

    const yTl = () => {
      const tl = gsap.timeline({
        repeat: -1,
        yoyo: true
      });
      const steps = [
        {
          [CSS_VARS.FLOAT_Y]: "random(-70,-50)"
        },
        {
          [CSS_VARS.FLOAT_Y]: "random(50,70)"
        }
      ];

      steps.forEach((step) => {
        tl.to([ELEMENTS.jigglypuff.$el, ELEMENTS.singCirclesGroup.$el], {
          ...step,
          duration: 4,
          ease: "sine.inOut"
        });
      });

      return tl;
    };

    tl.add(xTl(), 0)
      .add(yTl(), 0)
      .to(
        [ELEMENTS.jigglypuff.$el, ELEMENTS.singCirclesGroup.$el],
        {
          [CSS_VARS.FLOAT_SCALE]: 1.1,
          duration: 4,
          ease: "sine.inOut",
          repeat: -1,
          yoyo: true
        },
        0
      )
      .to(
        [ELEMENTS.rightLeg.$el, ELEMENTS.leftLeg.$el],
        {
          duration: 4,
          [CSS_VARS.FLOAT_ROTATE]: (index) => {
            return index === 0 ? 10 : -10;
          },
          repeat: -1,
          yoyo: true,
          ease: "sine.inOut"
        },
        0
      );

    return tl;
  };

  const singTl = () => {
    const singCirclesTl = () => {
      const tl = gsap.timeline({
        repeat: -1
      });

      tl.to(ELEMENTS.singCircles.$el, {
        opacity: 0,
        duration: (i) => 3.5 - i * 0.5,
        stagger: -0.4,
        ease: "power4.inOut"
      }).from(
        ELEMENTS.singCircles.$el,
        {
          scale: 0,
          transformOrigin: "50% 50%",
          duration: (i) => 4 - i * 0.5,
          stagger: -0.4,
          ease: "power3.out"
        },
        0
      );

      return tl;
    };

    const eyesTl = () => {
      const steps = [
        [1, 0, 0],
        [0, 1, 1.5],
        [1, 0, 0.2],
        [0, 1, 0.5],
        [1, 0, 3],
        [0, 1, 0.2],
        [1, 0, 0.5]
      ];

      return stepsTl(ELEMENTS.eyes.$el, ELEMENTS.closeEyes.$el, steps);
    };

    const mouthTl = () => {
      const steps = [
        [0, 1, 0],
        [1, 0, 1],
        [0, 1, 0.2],
        [1, 0, 0.5],
        [0, 1, 0.5],
        [1, 0, 1],
        [0, 1, 0.2],
        [1, 0, 0.7],
        [0, 1, 0.15],
        [1, 0, 1],
        [0, 1, 0.2],
        [1, 0, 0.5],
        [0, 1, 0.2],
        [1, 0, 1.4],
        [0, 1, 0.1]
      ];

      return stepsTl(ELEMENTS.mouth.$el, ELEMENTS.singMouth.$el, steps);
    };

    const earsTl = () => {
      const tl = gsap
        .timeline({
          repeat: -1,
          delay: 3,
          repeatDelay: 10
        })
        .to([ELEMENTS.leftEar.$el, ELEMENTS.rightEar.$el], {
          duration: 0.15,
          [CSS_VARS.SING_ROTATE]: (index) => {
            return index === 0 ? -2 : 2;
          },
          repeat: 3,
          yoyo: true,
          ease: "sine.inOut"
        });

      return tl;
    };

    const tl = gsap
      .timeline({ paused: true })
      .add(eyesTl())
      .add(singCirclesTl(), 0)
      .add(mouthTl(), 0)
      .add(earsTl(), 0)
      .to(
        ELEMENTS.rightHand.$el,
        {
          duration: 3,
          [CSS_VARS.SING_ROTATE]: 5,
          repeat: -1,
          yoyo: true,
          ease: "sine.inOut"
        },
        0
      )
      .to(
        ELEMENTS.singHand.$el,
        {
          duration: 4,
          [CSS_VARS.SING_ROTATE]: -5,
          yoyo: true,
          repeat: -1,
          repeatDelay: 1,
          ease: "sine.inOut"
        },
        0
      );

    return tl;
  };

  const touchTl = (x, y, onBackToCenter, onComplete) => {
    const tl = gsap.timeline({
      onComplete
    });

    const durations = {
      x: gsap.utils.random(1, 2),
      y: gsap.utils.random(1, 2),
      rotate: gsap.utils.random(1, 2)
    };

    const minDuration = Math.min(durations.x, durations.y, durations.rotate);

    const steps = [
      {
        $el: [ELEMENTS.jigglypuff.$el],
        to: {
          duration: durations.x,
          [CSS_VARS.X]: `+=${x}`,
          ease: "power3.out"
        }
      },
      {
        $el: [ELEMENTS.jigglypuff.$el],
        to: {
          duration: durations.y,
          [CSS_VARS.Y]: `+=${y}`,
          ease: "power3.out"
        }
      },
      {
        $el: [ELEMENTS.jigglypuff.$el],
        to: {
          duration: durations.rotate,
          [CSS_VARS.ROTATE]: `+=${x * 0.5}`,
          ease: "power1.out"
        }
      },
      {
        $el: [ELEMENTS.jigglypuff.$el],
        from: {
          [CSS_VARS.SCALE_X]: isReducdeMotion ? 1 : 1.3
        },
        to: {
          duration: 0.5,
          [CSS_VARS.SCALE_X]: 1,
          ease: "elastic.out(1,0.7)"
        }
      },
      {
        $el: [ELEMENTS.jigglypuff.$el],
        from: {
          [CSS_VARS.SCALE_Y]: isReducdeMotion ? 1 : 1.4
        },
        to: {
          duration: 0.85,
          [CSS_VARS.SCALE_Y]: 1,
          ease: "elastic.out(1,0.9)"
        }
      },
      {
        $el: [
          ELEMENTS.rightEar.$el,
          ELEMENTS.leftEar.$el,
          ELEMENTS.rightHand.$el,
          ELEMENTS.singHand.$el,
          ELEMENTS.rightLeg.$el,
          ELEMENTS.leftLeg.$el,
          ELEMENTS.hair.$el
        ],
        from: {
          [CSS_VARS.ROTATE]: (index) => {
            return isReducdeMotion ? 0 : index % 2 === 0 ? 40 : -40;
          },
          [CSS_VARS.SCALE]: isReducdeMotion ? 1 : 0.7
        },
        to: {
          duration: 0.65,
          [CSS_VARS.ROTATE]: 0,
          [CSS_VARS.SCALE]: 1,
          ease: "elastic.out(1,0.7)"
        }
      }
    ];

    steps.forEach((step) => {
      if (step.from && step.to) {
        tl.fromTo(
          [...step.$el],
          {
            ...step.from
          },
          {
            ...step.to
          },
          0
        );
        return;
      }
      tl.to(
        [...step.$el],
        {
          ...step.to
        },
        0
      );
    });

    tl.to(
      ELEMENTS.jigglypuff.$el,
      {
        duration: 3,
        [CSS_VARS.ROTATE]: 0,
        [CSS_VARS.X]: 0,
        [CSS_VARS.Y]: 0,
        ease: "back.out(3)",
        onStart: onBackToCenter
      },
      minDuration
    );

    return tl;
  };

  const startTl = () => {
    const tl = gsap.timeline({
      paused: true,
      delay: 1,
      onStart: () => playSound(SOUNDS.song)
    });

    gsap.set([ELEMENTS.jigglypuff.$el, ELEMENTS.singCirclesGroup.$el], {
      opacity: 1
    });

    tl.to([ELEMENTS.jigglypuff.$el, ELEMENTS.singCirclesGroup.$el], {
      [CSS_VARS.Y]: 0,
      duration: 10,
      ease: "sine.out"
    });
    return tl;
  };

  const changeState = (state) => {
    for (const [key, value] of Object.entries(ELEMENTS)) {
      if (value.states) {
        const currentState = value.states.some((s) => s === state);
        gsap.set(value.$el, {
          opacity: currentState ? 1 : 0
        });
      }
    }
  };

  const changeAccesory = (accesory, isActive) => {
    if (ELEMENTS[accesory])
      ELEMENTS[accesory].$el.style.opacity = isActive ? 1 : 0;

    if (accesory === "shiny") ELEMENTS.eyes.$el.classList.toggle("eyes--shiny");

    gsap.to(ELEMENTS.jigglypuff.$el, {
      keyframes: {
        [CSS_VARS.SCALE_X]: isReducdeMotion ? 1 : [0.96, 1.02, 1],
        [CSS_VARS.SCALE_Y]: isReducdeMotion ? 1 : [1.06, 0.95, 1]
      },
      duration: 0.65,
      ease: "sine.out"
    });
    starAnimation();
    playSound(SOUNDS.hit3);
  };

  const handleClick = (event) => {
    if (TIMELINES.touch) TIMELINES.touch.kill();
    TIMELINES.touch = null;
    if (TIMELINES.start) {
      TIMELINES.start.kill();
      TIMELINES.start = null;
      gsap.set(ELEMENTS.singCirclesGroup.$el, {
        [CSS_VARS.Y]: 0
      });
    }

    stopTimeline(TIMELINES.sing);

    stopSound(SOUNDS.song);
    playSound(SOUNDS.hit2);

    DATA.hits += 1;

    const { clientX, clientY } = event;
    const {
      top,
      left,
      width,
      height
    } = ELEMENTS.jigglypuffBackground.$el.getBoundingClientRect();
    const x = (width * 0.5 + left - clientX) * 2;
    const y = (height * 0.5 + top - clientY) * 3.5;

    if (DATA.hits >= 5) {
      changeState(STATES.ANGRY);
    } else {
      playSound(SOUNDS.hit);

      changeState(STATES.SAD);
    }

    emiter.emit(EVENTS.PARTICLES_BOUNCE);

    TIMELINES.touch = touchTl(
      x,
      y,
      () => {
        // On back to the center
        changeState(STATES.SURPRISE);
      },
      () => {
        // On complete
        DATA.hits = 0;
        changeState(STATES.SING);
        playSound(SOUNDS.song);
        TIMELINES.sing.play();
      }
    );
  };

  const handleUpdate = () => {
    const x = DATA.computedStyle.getPropertyValue(CSS_VARS.FLOAT_X) * 0.1;
    const y = DATA.computedStyle.getPropertyValue(CSS_VARS.FLOAT_Y);
    ELEMENTS.jigglypuff.$el.style.setProperty(CSS_VARS.FLOAT_ROTATE, -x);
    ELEMENTS.hair.$el.style.setProperty(CSS_VARS.FLOAT_ROTATE, x);
    ELEMENTS.hair.$el.style.setProperty(CSS_VARS.FLOAT_Y, -y * 0.075);
  };

  const handleResize = () => {
    const { width, height } = ELEMENTS.jigglypuffBackground.$el.getBBox();
    const backgroundGBCR = ELEMENTS.background.$el.getBoundingClientRect();
    const backgroundWidth = backgroundGBCR.width;
    const backgroundHeight = backgroundGBCR.height;

    const diffWidth = backgroundWidth / window.innerWidth;
    const diffHeight = backgroundHeight / window.innerHeight;

    DATA.windowWidth =
      DATA.originalWidth -
      (DATA.originalWidth - DATA.originalWidth / diffWidth) * 0.5;

    DATA.windowHeight =
      DATA.originalHeight -
      (DATA.originalHeight - DATA.originalHeight / diffHeight) * 0.5;

    DATA.width = width;
    DATA.height = height;
  };

  const handleTransitionIn = () => {
    TIMELINES.start.play();
    TIMELINES.float.play();
    TIMELINES.sing.play();
    emiter.emit(EVENTS.SHOW_CONTROLS);

    if (isReducdeMotion)
      gsap.set(ELEMENTS.singCirclesGroup.$el, { opacity: 0 });
  };

  const addEventsListeners = () => {
    ELEMENTS.jigglypuffBackground.$el.addEventListener("click", handleClick);
    window.addEventListener("resize", handleResize);
  };

  const init = () => {
    TIMELINES.float = floatTl();
    TIMELINES.sing = singTl();
    TIMELINES.start = startTl();
    addEventsListeners();
    handleResize();
    gsap.set([ELEMENTS.jigglypuff.$el, ELEMENTS.singCirclesGroup.$el], {
      [CSS_VARS.Y]: -DATA.windowHeight * 0.5 - DATA.height * 0.5
    });
    gsap.ticker.add(handleUpdate);
  };

  emiter.on(EVENTS.JIGGLYPUFF_TRANSITION_IN, () => {
    handleTransitionIn();
  });

  emiter.on(EVENTS.JIGGLYPUFF_REDUCED_MOTION, () => {
    gsap.set(ELEMENTS.singCirclesGroup.$el, {
      opacity: isReducdeMotion ? 0 : 1
    });
  });

  emiter.on(EVENTS.JIGGLYPUFF_CHANGE_ACCESORY, changeAccesory);

  init();
};

const $startButton = document.getElementById("start-button");
const $soundButton = document.getElementById("sound-button");

const particles = Particles();
const jigglypuff = Jigglypuff();
const control = Control();

const startButton = Button({
  $el: $startButton,
  onClick: () => {
    gsap.to($startButton, {
      opacity: 0,
      duration: 0.5,
      ease: "power2.out",
      onComplete: () => {
        startButton.destroy();
        $startButton.parentElement.removeChild($startButton);
      }
    });
    emiter.emit(EVENTS.JIGGLYPUFF_TRANSITION_IN);
  }
});

const soundButton = Button({
  $el: $soundButton,
  onClick: () => {
    Object.keys(SOUNDS).forEach((key) => {
      const sound = SOUNDS[key].sound;
      if (sound.mute()) {
        sound.mute(false);
      } else {
        sound.mute(true);
      }
    });
  },
  toggleActive: true
});

mediaReducedMotion.addEventListener("change", () => {
  isReducdeMotion = mediaReducedMotion.matches;
  emiter.emit(EVENTS.PARTICLE_REDUCED_MOTION);
  emiter.emit(EVENTS.JIGGLYPUFF_REDUCED_MOTION);
});

              
            
!
999px

Console