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

              
                
<button class="transformer"><span class="transformer__container"><span class="transformer__front transformer__segment"><span class="transformer__feature"><svg class="transformer__heart heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.115 11.096">
  <defs>
    <clipPath id="outline">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width=".822" d="M1.325 1.386a3.307 3.307 0 00.055 4.621l4.677 4.678 4.678-4.678A3.308 3.308 0 009.252.474c-1.141-.306-2.36.55-3.195 1.385C5.222 1.023 4.004.168 2.862.474a3.307 3.307 0 00-1.537.912z"/>
    </clipPath>
    <clipPath id="inner">
      <path clip-path="url(#outline)" d="M-.2.044c-.383.4-.191 2.762-.335 3.297a3.307 3.307 0 00.856 3.195L5 11.214l4.677-4.678a3.308 3.308 0 00-1.482-5.533C7.052.697 4.176-1.237 3.34-.401c-.836-.835 1.141-.305 0 0-.586.158-3.123.005-3.542.445z"/>
    </clipPath>
  </defs>
  <path class="heart__segment heart__shine" stroke-linecap="round" stroke-linejoin="round" stroke-width=".822" d="M1.325 1.386a3.307 3.307 0 00.055 4.621l4.677 4.678 4.678-4.678A3.308 3.308 0 009.252.474c-1.141-.306-2.36.55-3.195 1.385C5.222 1.023 4.004.168 2.862.474a3.307 3.307 0 00-1.537.912z"/>
  <path class="heart__segment heart__shadow" clip-path="url(#outline)" d="M-.2.044c-.383.4-.191 2.762-.335 3.297a3.307 3.307 0 00.856 3.195L5 11.214l4.677-4.678a3.308 3.308 0 00-1.482-5.533C7.052.697 4.176-1.237 3.34-.401c-.836-.835 1.141-.305 0 0-.586.158-3.123.005-3.542.445z"/>
  <path class="heart__segment heart__body" clip-path="url(#inner)" d="M4.611.073a3.307 3.307 0 00-1.418 4.4l2.947 5.921 5.922-2.947a3.308 3.308 0 00.354-5.718c-.985-.653-1.116-2.76-2.174-2.233-.527-1.058-2.704.274-3.884.201a3.308 3.308 0 00-1.747.376z"/>
  <path class="heart__baseline" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width=".822" d="M1.325 1.386a3.307 3.307 0 00.055 4.621l4.677 4.678 4.678-4.678A3.308 3.308 0 009.252.474c-1.141-.306-2.36.55-3.195 1.385C5.222 1.023 4.004.168 2.862.474a3.307 3.307 0 00-1.537.912z"/>
</svg>
        <div class="paw paw--left">
          <svg class="bear-paw" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 34.611 55.365">
            <g transform="translate(-39.71 -165.748)">
              <circle cx="43.184" cy="170.945" r="1.323"></circle>
              <circle cx="51.121" cy="167.071" r="1.323"></circle>
              <circle cx="61.421" cy="167.732" r="1.323"></circle>
              <circle cx="69.075" cy="171.417" r="1.323"></circle>
              <path class="stroked bear-one bear-one--dark" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.246" d="M52.665 167.163c-2.333.002-4.55 1.149-6.074 3.142a4.037 4.037 0 00-.478-.036c-4.67.567-5.742 5.429-5.779 8.991-.048 4.657 1.305 8.702 1.514 13.09.445 9.37-.567 28.14-.567 28.14h29.886s-.2-18.156.567-27.188c.373-4.398 1.814-8.794 1.96-13.097.123-3.618-2.536-8.965-6.13-8.965a4.704 4.704 0 00-1.345.208c-1.388-2.135-3.475-3.375-5.68-3.377a6.14 6.14 0 00-3.108.875c-1.38-1.154-3.05-1.779-4.766-1.783z"></path>
              <path class="bear-one bear-one--light" d="M55.386 167.708c-2.627.541-4.348 4.247-5.596 6.946-1.308 2.829-1.573 6.074-1.746 9.187-.257 4.6.846 9.394 1.054 13.781.427 8.97-.261 21.241-.34 22.735l22.409.133s-.2-18.155.567-27.188c.373-4.398 1.814-8.794 1.96-13.096.123-3.619-2.536-8.966-6.13-8.966a4.704 4.704 0 00-1.345.208c-1.388-2.134-3.475-3.375-5.68-3.377a6.14 6.14 0 00-3.108.875 7.783 7.783 0 00-2.045-1.238z"></path>
              <path class="stroked" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.587" d="M52.665 167.163c-2.333.002-4.55 1.149-6.074 3.142a4.037 4.037 0 00-.478-.036c-4.67.567-5.742 5.429-5.779 8.991-.048 4.657 1.305 8.702 1.514 13.09.445 9.37-.567 28.14-.567 28.14h29.886s-.2-18.156.567-27.188c.373-4.398 1.814-8.794 1.96-13.097.123-3.618-2.536-8.965-6.13-8.965a4.704 4.704 0 00-1.345.208c-1.388-2.135-3.475-3.375-5.68-3.377a6.14 6.14 0 00-3.108.875c-1.38-1.154-3.05-1.779-4.766-1.783z"></path>
              <ellipse class="bear-pad bear-pad--light stroked" cx="50.143" cy="188.41" stroke-linecap="round" stroke-linejoin="round" stroke-width=".794" rx="8.724" ry="6.159" transform="matrix(1 -.00427 .03389 .99943 0 0)"></ellipse>
              <path class="bear-pad bear-pad--dark" d="M58.589 182.14a8.728 6.154 1.436 00-8.247 6.185 8.728 6.154 1.436 006.665 5.911 8.728 6.154 1.436 008.245-6.186 8.728 6.154 1.436 00-6.663-5.91z"></path>
              <ellipse class="stroked" cx="50.143" cy="188.41" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width=".794" rx="8.724" ry="6.159" transform="matrix(1 -.00427 .03389 .99943 0 0)"></ellipse>
              <g transform="translate(29.867 -10.156)">
                <circle class="bear-pad bear-pad--light stroked" cx="16.124" cy="188.105" r="3.274" stroke-linecap="round" stroke-linejoin="round" stroke-width=".794"></circle>
                <path class="bear-pad bear-pad--dark" d="M16.916 184.933a3.274 3.274 0 00-2.479 3.172 3.274 3.274 0 002.482 3.173 3.274 3.274 0 002.479-3.173 3.274 3.274 0 00-2.482-3.172z"></path>
                <circle class="stroked" cx="16.124" cy="188.105" r="3.274" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width=".794"></circle>
              </g>
              <g transform="translate(36.816 -14.767)">
                <circle class="bear-pad bear-pad--light stroked" cx="16.124" cy="188.105" r="3.274" stroke-linecap="round" stroke-linejoin="round" stroke-width=".794"></circle>
                <path class="bear-pad bear-pad--dark" d="M16.916 184.933a3.274 3.274 0 00-2.479 3.172 3.274 3.274 0 002.482 3.173 3.274 3.274 0 002.479-3.173 3.274 3.274 0 00-2.482-3.172z"></path>
                <circle class="stroked" cx="16.124" cy="188.105" r="3.274" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width=".794"></circle>
              </g>
              <g transform="translate(45.035 -12.361)">
                <circle class="bear-pad bear-pad--light stroked" cx="16.124" cy="188.105" r="3.274" stroke-linecap="round" stroke-linejoin="round" stroke-width=".794"></circle>
                <path class="bear-pad bear-pad--dark" d="M16.916 184.933a3.274 3.274 0 00-2.479 3.172 3.274 3.274 0 002.482 3.173 3.274 3.274 0 002.479-3.173 3.274 3.274 0 00-2.482-3.172z"></path>
                <circle class="stroked" cx="16.124" cy="188.105" r="3.274" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width=".794"></circle>
              </g>
              <g transform="translate(52.184 -7.15)">
                <circle class="bear-pad bear-pad--light stroked" cx="16.124" cy="188.105" r="3.274" stroke-linecap="round" stroke-linejoin="round" stroke-width=".794"></circle>
                <path class="bear-pad bear-pad--dark" d="M16.916 184.933a3.274 3.274 0 00-2.479 3.172 3.274 3.274 0 002.482 3.173 3.274 3.274 0 002.479-3.173 3.274 3.274 0 00-2.482-3.172z"></path>
                <circle class="stroked" cx="16.124" cy="188.105" r="3.274" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width=".794"></circle>
              </g>
            </g>
          </svg>
        </div></span></span>
    <div class="paw paw--right">
      <svg class="bear-paw" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 34.611 55.365">
        <g transform="translate(-39.71 -165.748)">
          <circle cx="43.184" cy="170.945" r="1.323"></circle>
          <circle cx="51.121" cy="167.071" r="1.323"></circle>
          <circle cx="61.421" cy="167.732" r="1.323"></circle>
          <circle cx="69.075" cy="171.417" r="1.323"></circle>
          <path class="stroked bear-two bear-two--dark" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.246" d="M52.665 167.163c-2.333.002-4.55 1.149-6.074 3.142a4.037 4.037 0 00-.478-.036c-4.67.567-5.742 5.429-5.779 8.991-.048 4.657 1.305 8.702 1.514 13.09.445 9.37-.567 28.14-.567 28.14h29.886s-.2-18.156.567-27.188c.373-4.398 1.814-8.794 1.96-13.097.123-3.618-2.536-8.965-6.13-8.965a4.704 4.704 0 00-1.345.208c-1.388-2.135-3.475-3.375-5.68-3.377a6.14 6.14 0 00-3.108.875c-1.38-1.154-3.05-1.779-4.766-1.783z"></path>
          <path class="bear-two bear-two--light" d="M55.386 167.708c-2.627.541-4.348 4.247-5.596 6.946-1.308 2.829-1.573 6.074-1.746 9.187-.257 4.6.846 9.394 1.054 13.781.427 8.97-.261 21.241-.34 22.735l22.409.133s-.2-18.155.567-27.188c.373-4.398 1.814-8.794 1.96-13.096.123-3.619-2.536-8.966-6.13-8.966a4.704 4.704 0 00-1.345.208c-1.388-2.134-3.475-3.375-5.68-3.377a6.14 6.14 0 00-3.108.875 7.783 7.783 0 00-2.045-1.238z"></path>
          <path class="stroked" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.587" d="M52.665 167.163c-2.333.002-4.55 1.149-6.074 3.142a4.037 4.037 0 00-.478-.036c-4.67.567-5.742 5.429-5.779 8.991-.048 4.657 1.305 8.702 1.514 13.09.445 9.37-.567 28.14-.567 28.14h29.886s-.2-18.156.567-27.188c.373-4.398 1.814-8.794 1.96-13.097.123-3.618-2.536-8.965-6.13-8.965a4.704 4.704 0 00-1.345.208c-1.388-2.135-3.475-3.375-5.68-3.377a6.14 6.14 0 00-3.108.875c-1.38-1.154-3.05-1.779-4.766-1.783z"></path>
        </g>
      </svg>
    </div><span class="transformer__middle transformer__segment"><span class="transformer__text">Like</span></span><span class="transformer__back transformer__segment"><span class="transformer__number"><span class="number__place"><span class="number number--ten number--current">8</span><span class="number number--ten number--next">8</span></span><span class="number__place"><span class="number number--current number--single">6</span><span class="number number--next number--single">7</span></span></span></span></span>
  <svg class="slap" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50.271 50.271">
    <g fill="none" stroke-linecap="round" transform="translate(-53.239 -117.668)">
      <circle class="slap__circle" cx="78.374" cy="142.804" r="12.172" stroke="#f55" stroke-linejoin="round" stroke-width="25.928"></circle>
      <g class="slap__line">
        <path stroke="#000" stroke-width="2.117" stroke-dasharray="11" d="M78.374 137.592v10.423"></path>
      </g>
      <g class="slap__line">
        <path stroke="#000" stroke-width="2.117" stroke-dasharray="11" d="M78.374 137.592v10.423"></path>
      </g>
      <g class="slap__line">
        <path stroke="#000" stroke-width="2.117" stroke-dasharray="11" d="M78.374 137.592v10.423"></path>
      </g>
    </g>
  </svg><span class="transformer__outline transformer__outline--top"></span>
  <svg class="wiggle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3.456 27.798">
    <path class="wiggle__line celebration-line" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.323" d="M1.736 27.128S.528 24.968.678 23.821c.17-1.298 2.117-1.999 2.117-3.308 0-1.308-2.117-1.998-2.117-3.307s2.117-1.998 2.117-3.307S.678 11.9.678 10.592c0-1.31 2.117-1.999 2.117-3.308 0-1.309-1.948-2.01-2.117-3.307C.528 2.829 1.736.67 1.736.67"></path>
  </svg>
  <svg class="wiggle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3.456 27.798">
    <path class="wiggle__line celebration-line" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.323" d="M1.736 27.128S.528 24.968.678 23.821c.17-1.298 2.117-1.999 2.117-3.308 0-1.308-2.117-1.998-2.117-3.307s2.117-1.998 2.117-3.307S.678 11.9.678 10.592c0-1.31 2.117-1.999 2.117-3.308 0-1.309-1.948-2.01-2.117-3.307C.528 2.829 1.736.67 1.736.67"></path>
  </svg>
  <svg class="wiggle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3.456 27.798">
    <path class="wiggle__line celebration-line" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.323" d="M1.736 27.128S.528 24.968.678 23.821c.17-1.298 2.117-1.999 2.117-3.308 0-1.308-2.117-1.998-2.117-3.307s2.117-1.998 2.117-3.307S.678 11.9.678 10.592c0-1.31 2.117-1.999 2.117-3.308 0-1.309-1.948-2.01-2.117-3.307C.528 2.829 1.736.67 1.736.67"></path>
  </svg>
  <svg class="wiggle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3.456 27.798">
    <path class="wiggle__line celebration-line" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.323" d="M1.736 27.128S.528 24.968.678 23.821c.17-1.298 2.117-1.999 2.117-3.308 0-1.308-2.117-1.998-2.117-3.307s2.117-1.998 2.117-3.307S.678 11.9.678 10.592c0-1.31 2.117-1.999 2.117-3.308 0-1.309-1.948-2.01-2.117-3.307C.528 2.829 1.736.67 1.736.67"></path>
  </svg>
  <svg class="wiggle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3.456 27.798">
    <path class="wiggle__line celebration-line" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.323" d="M1.736 27.128S.528 24.968.678 23.821c.17-1.298 2.117-1.999 2.117-3.308 0-1.308-2.117-1.998-2.117-3.307s2.117-1.998 2.117-3.307S.678 11.9.678 10.592c0-1.31 2.117-1.999 2.117-3.308 0-1.309-1.948-2.01-2.117-3.307C.528 2.829 1.736.67 1.736.67"></path>
  </svg>
  <svg class="wiggle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3.456 27.798">
    <path class="wiggle__line celebration-line" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.323" d="M1.736 27.128S.528 24.968.678 23.821c.17-1.298 2.117-1.999 2.117-3.308 0-1.308-2.117-1.998-2.117-3.307s2.117-1.998 2.117-3.307S.678 11.9.678 10.592c0-1.31 2.117-1.999 2.117-3.308 0-1.309-1.948-2.01-2.117-3.307C.528 2.829 1.736.67 1.736.67"></path>
  </svg>
  <svg class="wiggle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3.456 27.798">
    <path class="wiggle__line celebration-line" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.323" d="M1.736 27.128S.528 24.968.678 23.821c.17-1.298 2.117-1.999 2.117-3.308 0-1.308-2.117-1.998-2.117-3.307s2.117-1.998 2.117-3.307S.678 11.9.678 10.592c0-1.31 2.117-1.999 2.117-3.308 0-1.309-1.948-2.01-2.117-3.307C.528 2.829 1.736.67 1.736.67"></path>
  </svg>
  <svg class="wiggle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3.456 27.798">
    <path class="wiggle__line celebration-line" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.323" d="M1.736 27.128S.528 24.968.678 23.821c.17-1.298 2.117-1.999 2.117-3.308 0-1.308-2.117-1.998-2.117-3.307s2.117-1.998 2.117-3.307S.678 11.9.678 10.592c0-1.31 2.117-1.999 2.117-3.308 0-1.309-1.948-2.01-2.117-3.307C.528 2.829 1.736.67 1.736.67"></path>
  </svg>
  <svg class="wiggle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3.456 27.798">
    <path class="wiggle__line celebration-line" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.323" d="M1.736 27.128S.528 24.968.678 23.821c.17-1.298 2.117-1.999 2.117-3.308 0-1.308-2.117-1.998-2.117-3.307s2.117-1.998 2.117-3.307S.678 11.9.678 10.592c0-1.31 2.117-1.999 2.117-3.308 0-1.309-1.948-2.01-2.117-3.307C.528 2.829 1.736.67 1.736.67"></path>
  </svg>
  <svg class="wiggle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3.456 27.798">
    <path class="wiggle__line celebration-line" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.323" d="M1.736 27.128S.528 24.968.678 23.821c.17-1.298 2.117-1.999 2.117-3.308 0-1.308-2.117-1.998-2.117-3.307s2.117-1.998 2.117-3.307S.678 11.9.678 10.592c0-1.31 2.117-1.999 2.117-3.308 0-1.309-1.948-2.01-2.117-3.307C.528 2.829 1.736.67 1.736.67"></path>
  </svg>
  <svg class="wiggle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3.456 27.798">
    <path class="wiggle__line celebration-line" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.323" d="M1.736 27.128S.528 24.968.678 23.821c.17-1.298 2.117-1.999 2.117-3.308 0-1.308-2.117-1.998-2.117-3.307s2.117-1.998 2.117-3.307S.678 11.9.678 10.592c0-1.31 2.117-1.999 2.117-3.308 0-1.309-1.948-2.01-2.117-3.307C.528 2.829 1.736.67 1.736.67"></path>
  </svg>
  <svg class="wiggle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3.456 27.798">
    <path class="wiggle__line celebration-line" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.323" d="M1.736 27.128S.528 24.968.678 23.821c.17-1.298 2.117-1.999 2.117-3.308 0-1.308-2.117-1.998-2.117-3.307s2.117-1.998 2.117-3.307S.678 11.9.678 10.592c0-1.31 2.117-1.999 2.117-3.308 0-1.309-1.948-2.01-2.117-3.307C.528 2.829 1.736.67 1.736.67"></path>
  </svg>
  <svg class="wiggle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3.456 27.798">
    <path class="wiggle__line celebration-line" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.323" d="M1.736 27.128S.528 24.968.678 23.821c.17-1.298 2.117-1.999 2.117-3.308 0-1.308-2.117-1.998-2.117-3.307s2.117-1.998 2.117-3.307S.678 11.9.678 10.592c0-1.31 2.117-1.999 2.117-3.308 0-1.309-1.948-2.01-2.117-3.307C.528 2.829 1.736.67 1.736.67"></path>
  </svg>
  <svg class="wiggle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3.456 27.798">
    <path class="wiggle__line celebration-line" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.323" d="M1.736 27.128S.528 24.968.678 23.821c.17-1.298 2.117-1.999 2.117-3.308 0-1.308-2.117-1.998-2.117-3.307s2.117-1.998 2.117-3.307S.678 11.9.678 10.592c0-1.31 2.117-1.999 2.117-3.308 0-1.309-1.948-2.01-2.117-3.307C.528 2.829 1.736.67 1.736.67"></path>
  </svg>
  <svg class="wiggle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3.456 27.798">
    <path class="wiggle__line celebration-line" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.323" d="M1.736 27.128S.528 24.968.678 23.821c.17-1.298 2.117-1.999 2.117-3.308 0-1.308-2.117-1.998-2.117-3.307s2.117-1.998 2.117-3.307S.678 11.9.678 10.592c0-1.31 2.117-1.999 2.117-3.308 0-1.309-1.948-2.01-2.117-3.307C.528 2.829 1.736.67 1.736.67"></path>
  </svg>
  <svg class="wiggle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3.456 27.798">
    <path class="wiggle__line celebration-line" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.323" d="M1.736 27.128S.528 24.968.678 23.821c.17-1.298 2.117-1.999 2.117-3.308 0-1.308-2.117-1.998-2.117-3.307s2.117-1.998 2.117-3.307S.678 11.9.678 10.592c0-1.31 2.117-1.999 2.117-3.308 0-1.309-1.948-2.01-2.117-3.307C.528 2.829 1.736.67 1.736.67"></path>
  </svg>
  <svg class="wiggle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3.456 27.798">
    <path class="wiggle__line celebration-line" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.323" d="M1.736 27.128S.528 24.968.678 23.821c.17-1.298 2.117-1.999 2.117-3.308 0-1.308-2.117-1.998-2.117-3.307s2.117-1.998 2.117-3.307S.678 11.9.678 10.592c0-1.31 2.117-1.999 2.117-3.308 0-1.309-1.948-2.01-2.117-3.307C.528 2.829 1.736.67 1.736.67"></path>
  </svg>
  <svg class="wiggle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3.456 27.798">
    <path class="wiggle__line celebration-line" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.323" d="M1.736 27.128S.528 24.968.678 23.821c.17-1.298 2.117-1.999 2.117-3.308 0-1.308-2.117-1.998-2.117-3.307s2.117-1.998 2.117-3.307S.678 11.9.678 10.592c0-1.31 2.117-1.999 2.117-3.308 0-1.309-1.948-2.01-2.117-3.307C.528 2.829 1.736.67 1.736.67"></path>
  </svg>
  <svg class="wiggle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3.456 27.798">
    <path class="wiggle__line celebration-line" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.323" d="M1.736 27.128S.528 24.968.678 23.821c.17-1.298 2.117-1.999 2.117-3.308 0-1.308-2.117-1.998-2.117-3.307s2.117-1.998 2.117-3.307S.678 11.9.678 10.592c0-1.31 2.117-1.999 2.117-3.308 0-1.309-1.948-2.01-2.117-3.307C.528 2.829 1.736.67 1.736.67"></path>
  </svg>
  <svg class="wiggle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3.456 27.798">
    <path class="wiggle__line celebration-line" fill="none" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.323" d="M1.736 27.128S.528 24.968.678 23.821c.17-1.298 2.117-1.999 2.117-3.308 0-1.308-2.117-1.998-2.117-3.307s2.117-1.998 2.117-3.307S.678 11.9.678 10.592c0-1.31 2.117-1.999 2.117-3.308 0-1.309-1.948-2.01-2.117-3.307C.528 2.829 1.736.67 1.736.67"></path>
  </svg>
  <div class="dashed__container">
    <svg class="dashed" viewBox="-0.25 -0.25 0.5 30">
      <defs>
        <clipPath id="lineClip">
          <rect height="31" width="1" x="-0.5" y="-0.5"></rect>
        </clipPath>
      </defs>
      <g class="dashed__wrapper" clip-path="url(#lineClip)">
        <path class="dashed__line celebration-line" d="M 0 0, L 0 30" stroke-linecap="round" stroke-dasharray="2" stroke-width="0.75"></path>
      </g>
    </svg>
  </div>
  <div class="dashed__container">
    <svg class="dashed" viewBox="-0.25 -0.25 0.5 30">
      <defs>
        <clipPath id="lineClip">
          <rect height="31" width="1" x="-0.5" y="-0.5"></rect>
        </clipPath>
      </defs>
      <g class="dashed__wrapper" clip-path="url(#lineClip)">
        <path class="dashed__line celebration-line" d="M 0 0, L 0 30" stroke-linecap="round" stroke-dasharray="2" stroke-width="0.75"></path>
      </g>
    </svg>
  </div>
  <div class="dashed__container">
    <svg class="dashed" viewBox="-0.25 -0.25 0.5 30">
      <defs>
        <clipPath id="lineClip">
          <rect height="31" width="1" x="-0.5" y="-0.5"></rect>
        </clipPath>
      </defs>
      <g class="dashed__wrapper" clip-path="url(#lineClip)">
        <path class="dashed__line celebration-line" d="M 0 0, L 0 30" stroke-linecap="round" stroke-dasharray="2" stroke-width="0.75"></path>
      </g>
    </svg>
  </div>
  <div class="dashed__container">
    <svg class="dashed" viewBox="-0.25 -0.25 0.5 30">
      <defs>
        <clipPath id="lineClip">
          <rect height="31" width="1" x="-0.5" y="-0.5"></rect>
        </clipPath>
      </defs>
      <g class="dashed__wrapper" clip-path="url(#lineClip)">
        <path class="dashed__line celebration-line" d="M 0 0, L 0 30" stroke-linecap="round" stroke-dasharray="2" stroke-width="0.75"></path>
      </g>
    </svg>
  </div>
  <div class="dashed__container">
    <svg class="dashed" viewBox="-0.25 -0.25 0.5 30">
      <defs>
        <clipPath id="lineClip">
          <rect height="31" width="1" x="-0.5" y="-0.5"></rect>
        </clipPath>
      </defs>
      <g class="dashed__wrapper" clip-path="url(#lineClip)">
        <path class="dashed__line celebration-line" d="M 0 0, L 0 30" stroke-linecap="round" stroke-dasharray="2" stroke-width="0.75"></path>
      </g>
    </svg>
  </div>
  <div class="burst">
    <svg class="burst__line" viewBox="-0.25, -0.25 0.5 30" style="--index: 0;">
      <path class="celebration-line" d="M 0 0, L 0 30" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.5"></path>
    </svg>
    <svg class="burst__line" viewBox="-0.25, -0.25 0.5 30" style="--index: 1;">
      <path class="celebration-line" d="M 0 0, L 0 30" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.5"></path>
    </svg>
    <svg class="burst__line" viewBox="-0.25, -0.25 0.5 30" style="--index: 2;">
      <path class="celebration-line" d="M 0 0, L 0 30" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.5"></path>
    </svg>
    <svg class="burst__line" viewBox="-0.25, -0.25 0.5 30" style="--index: 3;">
      <path class="celebration-line" d="M 0 0, L 0 30" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.5"></path>
    </svg>
  </div>
  <div class="burst">
    <svg class="burst__line" viewBox="-0.25, -0.25 0.5 30" style="--index: 0;">
      <path class="celebration-line" d="M 0 0, L 0 30" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.5"></path>
    </svg>
    <svg class="burst__line" viewBox="-0.25, -0.25 0.5 30" style="--index: 1;">
      <path class="celebration-line" d="M 0 0, L 0 30" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.5"></path>
    </svg>
    <svg class="burst__line" viewBox="-0.25, -0.25 0.5 30" style="--index: 2;">
      <path class="celebration-line" d="M 0 0, L 0 30" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.5"></path>
    </svg>
    <svg class="burst__line" viewBox="-0.25, -0.25 0.5 30" style="--index: 3;">
      <path class="celebration-line" d="M 0 0, L 0 30" stroke-linecap="round" stroke-dasharray="32" stroke-width="1.5"></path>
    </svg>
  </div>
</button>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap')

*
  box-sizing border-box
  user-select none
 
:root
  --pink hsl(326, 98%, 82%)
  --pink-bg hsl(325, 90%, 98%)
  --pink-light hsl(325, 93%, 95%)
  --pink-dark hsl(326, 78%, 65%)
  --button-bg hsl(0, 0%, 100%)
  --stroke hsl(180, 3%, 94%)
  --text hsl(180, 6%, 19%)
  --number hsl(180, 2%, 67%)
  --color hsl(180, 2%, 77%)
  --heart-stroke hsl(180, 2%, 77%)
  --stroke-active hsl(204, 6%, 16%)
  --transition 0.2s

body
  display grid
  place-items center
  min-height 100vh
  font-family "Roboto", sans-serif
  background url('https://assets.codepen.io/605876/heart-outline-bg.svg')
  background-position calc(var(--x, 50) * 1%) calc(var(--y, 50) * 1%)

  &:after
    content ''
    position absolute
    opacity var(--backdrop-opacity, 0)
    top 0
    right 0
    bottom 0
    left 0
    z-index -1
    background url('https://assets.codepen.io/605876/heart-bg.svg'), var(--pink-bg)
    background-position calc(var(--x, 50) * 1%) calc(var(--y, 50) * 1%)


button
  --hovered 0
  cursor pointer
  padding 0
  margin 0
  border 0
  appearance none
  background transparent
  position relative
  display none

button:hover
  --hovered 1

.stroked
  stroke var(--stroke-active)

.bear-one
  &--light
    fill hsl(29, 59%, 40%)
  &--dark
    fill hsl(29, 59%, 23%)
.bear-two
  &--light
    fill hsl(51, 98%, 92%)
  &--dark
    fill hsl(45, 99%, 68%)
.bear-pad
  &--light
    fill hsl(24, 57%, 65%)
  &--dark
    fill hsl(24, 57%, 85%)

.heart
  overflow visible !important
  height 100%
  position absolute
  top 50%
  left 50%
  transform translate(-50%, -50%)
  opacity calc(1 - var(--hovered, 0))

  &__outline
    stroke var(--stroke-active)
    stroke-width 1.25px
  &__baseline
    stroke var(--color)
    stroke-width 1.25px
  &__body
    fill var(--pink)
  &__shine
    fill var(--pink-light)
  &__shadow
    fill var(--pink-dark)


.transformer
  --font-size 32px
  --border-width 4px
  --border-radius 10px
  --padding-v 26px
  --padding-h 36px
  --padding-t 10px
  --padding-b 4px
  font-size var(--font-size)
  position relative
  outline transparent

  *
    display inline-block

  &__container
    display inline-flex
    align-items center
    justify-content center
    position relative
    overflow hidden

  &__paws
    height 100%
    width 80%
    position absolute
    border var(--border-width) solid pink
    border-left 0
    border-right 0
    z-index 2

  &__front
    padding var(--padding-v) calc(var(--padding-t) + var(--padding-b)) var(--padding-v) var(--padding-h)
    padding 0 calc(var(--padding-t) + var(--padding-b)) 0 var(--padding-h)
    border var(--border-width) solid var(--stroke)
    border-radius var(--border-radius) 0 0 var(--border-radius)
    border-right 0
    z-index 2

  &__middle
    padding var(--padding-v) var(--padding-t)
    padding 0 var(--padding-t)
    border var(--border-width) solid var(--stroke)
    border-radius 0
    border-left 0
    border-right 0

  &__back
    border var(--border-width) solid var(--stroke)
    border-radius 0 var(--border-radius) var(--border-radius) 0
    padding var(--padding-v) var(--padding-h) var(--padding-v) var(--padding-b)
    padding 0 var(--padding-h) 0 var(--padding-b)
    border-left 0
    z-index 2

  &__number
    font-size var(--font-size)
    line-height var(--font-size)
    height var(--font-size)
    color var(--color)
    transform translate(6px, 0)

  &__text
    color var(--text)
    font-size var(--font-size)
    line-height var(--font-size)
    opacity calc(1 - var(--hovered, 0))
    transition transform var(--transition), opacity var(--transition)
    transform translateY(calc(var(--hovered, 0) * 80%))

  &__outline
    position absolute
    height 100%
    width 90%
    left 50%
    top 0
    border var(--border-width) solid var(--stroke)
    border-left 0
    border-right 0
    z-index 10
    transform translate3d(-50%, 0, 0)

  &__segment
    background var(--button-bg)
    display flex
    align-items center
    justify-content center
    height 92px

  &__feature
    height var(--font-size)
    position relative
    width var(--font-size)
    transition transform var(--transition)
    transform translate(-6px, 0) translateX(calc(var(--hovered, 0) * 100%))

.number
  position absolute
  left 0

  &__place
    height var(--font-size)
    display inline-block
    position relative
    width 18px


.slap
  position absolute
  height calc(var(--font-size) * 2)
  width calc(var(--font-size) * 2)
  top 50%
  left 38%
  transform translate(-50%, -50%)
  z-index 4
  display none
  // Important for CodePen
  overflow visible !important

.paw
  height calc(var(--font-size) * 2)
  position absolute
  top 0%
  left 50%
  transform translate(-50%, 0%)
  width var(--font-size)

  &--right
    z-index 5
    top 125%
    left 55%

.bear-paw
  position absolute
  height 150%
  opacity var(--hovered, 0)
  transition var(--transition)
  // Important for CodePen
  overflow visible !important
  left 50%
  top 0
  transform translate(-50%, -14%)

.wiggle
  position absolute
  top 50%
  left 50%
  transform translate(-50%, -50%)
  height 100px
  overflow visible !important
  display none
  z-index 10

.dashed
  height 100%
  overflow visible !important

  &__container
    display none
    top 50%
    left 50%
    height 100px
    position absolute
    transform translate(-50%, -50%)
    z-index 11

.geo
  height 100%
  // Keep CodePen happy
  overflow visible !important
  position absolute
  top 50%
  left 50%
  transform translate(-50%, -50%)

  &__wrap
    display none
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%)
    z-index 12
    height 20px
    width 20px

.burst
  display none
  height 30px
  width 30px
  position absolute
  top 50%
  left 50%
  transform translate(-50%, -50%) rotate(calc(var(--rotate, 0) * 1deg)) translateY(calc(var(--translate, 0) * -1px))
  z-index 12

  &__line
    position absolute
    height 30px
    top 50%
    left 50%
    transform translate(-50%, -50%) rotate(calc((-45 + (var(--index) * 30)) * 1deg))
    transform-origin 50% 100%
    overflow visible !important
    z-index 12
              
            
!

JS

              
                // import gsap from 'https://cdn.skypack.dev/gsap'
const gsap = window.gsap
const { timeline } = gsap
const TRANSFORMER = document.querySelector('.transformer')
const TTEXT = document.querySelector('.transformer__middle')
const duration = 0.2

const AUDIO = {
  CHEER: new Audio('https://assets.codepen.io/605876/kids-cheering.mp3'),
  SIGH: new Audio('https://assets.codepen.io/605876/sigh.mp3'),
  CLICK: new Audio('https://assets.codepen.io/605876/click.mp3'),
  CLAP: new Audio('https://assets.codepen.io/605876/clap.mp3'),
}

gsap.set('.number--next', {
  yPercent: -100,
  opacity: 0,
})
gsap.set('.slap__line', {
  transformOrigin: '50% 50%',
  rotate: index => -45 + index * 45,
})
gsap.set('.slap__line path', {
  transformOrigin: '50% 50%',
  yPercent: -350,
  scaleY: 0.75,
})
gsap.set('.heart__segment', {
  opacity: 0,
})

/**
 * The Timeline
 * 1. Move Paw to Left
 * 2. Meet to slap in the middle with right paw
 * 3. Paws disappear
 */

const LEFT_PAW_TL = () =>
  timeline({})
    .set('.transformer__feature', {
      transition: 'none',
    })
    .to('.transformer__feature', {
      keyframes: [
        {
          xPercent: -130,
          ease: 'power1.out',
          duration: 0.125,
        },
        {
          xPercent: 20,
          ease: 'power1.in',
          duration: 0.125,
        },
        {
          xPercent: -20,
          delay: 0.1,
          ease: 'power1.out',
          duration: 0.15,
        },
      ],
    })

const RIGHT_PAW_TL = () =>
  timeline().to('.paw--right', {
    keyframes: [
      {
        ease: 'power1.in',
        xPercent: -175,
        yPercent: -125,
        duration: 0.25,
      },
      {
        ease: 'power1.out',
        delay: 0.15,
        duration: 0.35,
        xPercent: 0,
        yPercent: 0,
      },
    ],
  })

const RESIZE_TL = () =>
  timeline({})
    .set('.bear-paw', {
      opacity: 1,
    })
    .to(
      document.documentElement,
      {
        '--backdrop-opacity': 1,
        duration,
      },
      0
    )
    .to(
      document.documentElement,
      {
        '--stroke': 'hsl(326, 56%, 85%)',
        '--color': 'hsl(204, 6%, 16%)',
        duration,
      },
      0
    )
    .to(
      '.transformer__segment',
      {
        background: 'hsl(327, 91%, 96%)',
        duration,
      },
      0
    )
    .to(
      '.transformer__heart',
      {
        opacity: 1,
        duration,
      },
      0
    )
    .to(
      '.paw--left',
      {
        opacity: 0,
        duration,
      },
      0
    )
    .to(
      '.transformer__feature',
      {
        xPercent: -100,
        duration,
      },
      0
    )
    .to(
      '.transformer__outline',
      {
        scaleX: 0.6,
        duration,
      },
      0
    )
    .to(
      '.transformer__front',
      {
        x: TTEXT.offsetWidth / 2,
        duration,
      },
      0
    )
    .to(
      '.transformer__back',
      {
        x: -(TTEXT.offsetWidth / 2),
        duration,
      },
      0
    )
    .to(
      '.number.number--current.number--single',
      {
        yPercent: 100,
        opacity: 0,
        duration,
      },
      0
    )
    .to(
      '.number.number--next.number--single',
      {
        yPercent: 0,
        duration,
        opacity: 1,
      },
      0
    )
    .to(
      '.heart__segment',
      {
        opacity: 1,
        duration,
      },
      0
    )

const SLAP_TL = () =>
  gsap
    .timeline({
      onStart: () => {
        AUDIO.CLAP.play()
        gsap.set('.slap', {
          display: 'block',
        })
      },
      onComplete: () => {
        gsap.set('.slap', {
          display: 'none',
        })
        gsap.set('.slap__circle', { clearProps: 'all' })
      },
    })
    .set('.slap__circle', {
      stroke: `hsl(${Math.random() * 359}, 85%, 60%)`,
    })
    .to('.slap__circle', {
      strokeWidth: 0,
      scale: 2.5,
      duration: 0.15,
      transformOrigin: '50% 50%',
    })
    .fromTo(
      '.slap__line path',
      {
        strokeDashoffset: -11,
      },
      {
        yPercent: -400,
        duration: 0.15,
        strokeDashoffset: 11,
      },
      0
    )

const CELEBRATE_TL = () =>
  gsap
    .timeline({
      repeatRefresh: true,
      onStart: () => {
        gsap.delayedCall(0.25, () => AUDIO.CHEER.play())
        gsap.set(['.wiggle', '.dashed__container', '.burst'], {
          display: 'block',
        })
      },
      onComplete: () => {
        gsap.set(['.wiggle', '.dashed__container', '.burst'], {
          display: 'none',
        })
      },
    })
    .set('.celebration-line', {
      stroke: () => `hsl(${Math.random() * 359}, 100%, 70%)`,
    })
    .set('.dashed__line', {
      yPercent: -120,
    })
    .set('.dashed', {
      yPercent: 0,
    })
    .set('.burst', {
      '--rotate': () => Math.random() * 360,
      '--translate': () => Math.random() * 100 + 180,
    })
    .set(['.wiggle', '.dashed__container'], {
      rotate: () => Math.random() * 360,
    })
    .set(['.wiggle__line', '.dashed'], {
      yPercent: () => Math.random() * 150 + 180,
      scaleY: () => Math.random() + 0.5,
    })
    .fromTo(
      '.dashed__line',
      {
        yPercent: -120,
      },
      {
        yPercent: 120,
        duration: 0.5,
      },
      0
    )
    .to('.dashed', {
      yPercent: 'random(20, 100)',
    })
    .fromTo(
      ['.wiggle__line'],
      {
        strokeDashoffset: -32,
      },
      {
        delay: () => Math.random(),
        yPercent: '+=50',
        duration: 0.5,
        strokeDashoffset: 32,
      },
      0
    )
    .fromTo(
      '.burst__line path',
      {
        strokeDashoffset: -32,
      },
      {
        delay: () => Math.random() * 0.5,
        yPercent: `-=50`,
        strokeDashoffset: 32,
      },
      0
    )

const TRANSFORMER_TL = () =>
  timeline({
    onComplete: () => {
      TRANSFORMER.removeAttribute('disabled')
    },
  })
    // Set the hover states concretely
    .set('.transformer__feature', {
      // Setting xPercent is only going to work on desktop
      '--hovered': 1,
    })
    .set('.bear-paw', {
      opacity: 1,
    })
    .set('.transformer__text', {
      yPercent: 80,
      opacity: 0,
    })
    // Make the left paw movement using the feature element
    // This means the heart and the paw track movement
    .add(LEFT_PAW_TL(), 0.25)
    .add(RIGHT_PAW_TL(), '<')
    .add(SLAP_TL(), '>-0.5')
    .add(CELEBRATE_TL(), '<')
    .add(RESIZE_TL(), '<+0.5')
    .to(
      '.transformer__heart',
      {
        scale: 1.25,
        repeat: 1,
        yoyo: true,
        ease: 'elastic.in',
      },
      '>-0.2'
    )

const RESET_TL = timeline({
  paused: true,
  onStart: () => {
    AUDIO.SIGH.play()
  },
  onComplete: () => {
    gsap.set(['.transformer__heart', '.paw--left', '.bear-paw'], {
      clearProps: 'all',
    })
  },
})
  .set(['.transformer__feature', '.transformer__text'], {
    clearProps: 'all',
  })
  .to('.transformer__front', {
    x: 0,
    duration,
  })
  .to(
    '.heart__segment',
    {
      opacity: 0,
      duration,
    },
    0
  )
  .to(
    '.transformer__outline',
    {
      scaleX: 1,
      duration,
    },
    0
  )
  .to(
    '.transformer__segment',
    {
      background: 'hsl(0, 0%, 100%)',
      duration,
    },
    0
  )
  .to(
    '.transformer__back',
    {
      x: 0,
      duration,
    },
    0
  )
  .to(
    document.documentElement,
    {
      '--backdrop-opacity': 0,
      '--stroke': 'hsl(180, 3%, 94%)',
      '--color': 'hsl(180, 2%, 77%)',
      duration,
    },
    0
  )
  .to(
    '.number.number--current.number--single',
    {
      yPercent: 0,
      duration,
      opacity: 1,
    },
    0
  )
  .to(
    '.number.number--next.number--single',
    {
      yPercent: -100,
      duration,
      opacity: 0,
    },
    0
  )
  .to(
    '.paw--left',
    {
      opacity: 1,
      duration,
    },
    0
  )
  .to(
    '.transformer__heart',
    {
      opacity: 0,
      duration,
    },
    0
  )

TRANSFORMER.addEventListener('pointerdown', ({ x, y }) => {
  if (TRANSFORMER.hasAttribute('disabled')) return
  if (TRANSFORMER.getAttribute('aria-pressed') === 'true') {
    TRANSFORMER.setAttribute('aria-pressed', false)
    RESET_TL.restart()
  } else {
    TRANSFORMER.setAttribute('aria-pressed', true)
    TRANSFORMER.setAttribute('disabled', true)
    const SVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
    const CIRCLE = document.createElementNS(
      'http://www.w3.org/2000/svg',
      'circle'
    )
    const BOUNDS = TRANSFORMER.getBoundingClientRect()
    gsap.set(SVG, {
      height: 50,
      width: 50,
      left: x - BOUNDS.left - 25,
      top: y - BOUNDS.top - 25,
      overflow: 'visible !important',
      zIndex: 12,
      transformOrigin: '50% 50%',
      position: 'absolute',
      attr: {
        viewBox: '0 0 100 100',
        fill: 'none',
      },
    })
    SVG.appendChild(CIRCLE)
    TRANSFORMER.appendChild(SVG)
    gsap.set(CIRCLE, {
      attr: {
        r: 30,
        cx: 50,
        cy: 50,
      },
      stroke: `hsl(${Math.random() * 359}, 80%, 50%)`,
      strokeWidth: 20,
    })
    gsap
      .timeline({
        onStart: () => TRANSFORMER_TL(),
        onComplete: () => SVG.remove(),
      })
      .fromTo(
        CIRCLE,
        {
          scale: 0,
          transformOrigin: '50% 50%',
        },
        {
          scale: 1.25,
          duration: 0.2,
        }
      )
      .to(
        CIRCLE,
        {
          opacity: 0,
          duration: 0.1,
        },
        '>-0.1'
      )
  }
})

const LIMIT = 5
document.addEventListener('pointermove', ({ x, y }) => {
  const posX = gsap.utils.mapRange(0, window.innerWidth, -LIMIT, LIMIT, x)
  const posY = gsap.utils.mapRange(0, window.innerHeight, -LIMIT, LIMIT, y)
  gsap.set(document.documentElement, {
    '--x': posX,
    '--mx': x,
    '--y': posY,
    '--my': y,
  })
})

gsap.set('.transformer', {
  display: 'block',
})

              
            
!
999px

Console