css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
 <path id="buttonMask" d="M234,284.53H99.56A15.16,15.16,0,0,0,84.4,299.68h0v35.16A15.16,15.16,0,0,0,99.56,350H234a15.16,15.16,0,0,0,15.16-15.16V299.68h0A15.16,15.16,0,0,0,234,284.53Z" fill="red"/>
<filter id="Bbrightness">
<feComponentTransfer class="brightnessCompTran">
 <feFuncR class="brightness" type="linear" slope="1"/>
 <feFuncG class="brightness" type="linear" slope="1"/>
 <feFuncB class="brightness" type="linear" slope="1"/>
</feComponentTransfer>
</filter>  
 
 <filter id="Rbrightness" >
<feComponentTransfer class="brightnessCompTran">
 <feFuncR class="brightness" type="linear" slope="1"/>
 <feFuncG class="brightness" type="linear" slope="1"/>
 <feFuncB class="brightness" type="linear" slope="1"/>
</feComponentTransfer>  
  </filter>
 
 <filter id="Gbrightness" >
<feComponentTransfer class="brightnessCompTran">
 <feFuncR class="brightness" type="linear" slope="1"/>
 <feFuncG class="brightness" type="linear" slope="1"/>
 <feFuncB class="brightness" type="linear" slope="1"/>
 <feFuncA class="brightnessAlpha" type="linear" slope="1"/>
</feComponentTransfer>  
  </filter>
 
 <clipPath id="greenMask">
          <!-- <path class="greenMask" d="M735,304.53H600.56a15.16,15.16,0,0,0-15.16,15.16h0v15.16A15.16,15.16,0,0,0,600.56,350H735a15.16,15.16,0,0,0,15.16-15.16V319.68h0A15.16,15.16,0,0,0,735,304.53Z" fill="red"/> -->
  <use xlink:href="#buttonMask" x="501"/>
  </clipPath>
 <clipPath id="redMask">
<!--           <path class="redMask" d="M485,304.53H350.56a15.16,15.16,0,0,0-15.16,15.16h0v15.16A15.16,15.16,0,0,0,350.56,350H485a15.16,15.16,0,0,0,15.16-15.16V319.68h0A15.16,15.16,0,0,0,485,304.53Z" fill="red"/> -->
  <use xlink:href="#buttonMask" x="251"/>
  </clipPath>
<clipPath id="blueMask">
          <use xlink:href="#buttonMask"/>
  </clipPath> 
 </defs>
      <g class="greenBtn" >
        <path d="M751.33,359.25H584.23a15.16,15.16,0,0,1-15.16-15.16v11.12a18.5,18.5,0,0,0,18.5,18.5H748a18.5,18.5,0,0,0,18.5-18.5V344.09A15.16,15.16,0,0,1,751.33,359.25Z" fill="#ccc"/>
        <path d="M751.33,322.25h-1.17v12.59A15.16,15.16,0,0,1,735,350H600.56a15.16,15.16,0,0,1-15.16-15.16V322.25h-1.17a15.16,15.16,0,0,0-15.16,15.16v6.68a15.16,15.16,0,0,0,15.16,15.16H751.33a15.16,15.16,0,0,0,15.16-15.16v-6.68A15.16,15.16,0,0,0,751.33,322.25Z" fill="#dadad9"/>
       <g clip-path="url(#greenMask)">
        <g class="greenPress" filter="url(#Gbrightness)">
          <path d="M585.4,344.84A15.16,15.16,0,0,0,600.56,360H735a15.16,15.16,0,0,0,15.16-15.16V319.68A15.16,15.16,0,0,1,735,334.84H600.56a15.16,15.16,0,0,1-15.16-15.16v25.16Z" fill="#3d8e8a"/>
          <path d="M600.56,335.53H735A15.33,15.33,0,0,0,750.16,320h0A15.33,15.33,0,0,0,735,304.53H600.56A15.33,15.33,0,0,0,585.4,320h0A15.33,15.33,0,0,0,600.56,335.53Z" fill="#48a9a6"/>
  
          <g class="greenLabel">
            <g>
              <polyline points="608.37 314.55 606.68 314.55 603.8 317.33 601.04 314.55 599.35 314.55 599.18 321.22 601.15 321.22 601.25 317.13 603.57 319.54 603.91 319.54 606.36 317.13 606.26 321.22 608.23 321.22 608.37 314.55" fill="#ede6e3"/>
              <path d="M612.5,318.78l1.25-2.61,1.09,2.61H612.5m2.42-4.23h-2.29l-3.21,6.67h2L612,320h3.33l.52,1.23h2l-2.89-6.67" fill="#ede6e3"/>
              <path d="M626.49,314.55h-2l-2,2.67h-1.36l0-2.67h-2l-.12,6.67h2l0-2.57h1.14a5.86,5.86,0,0,1,.54.7,9.32,9.32,0,0,0,.68.89,3.58,3.58,0,0,0,.92.76,2.55,2.55,0,0,0,1.26.32l.41,0,.4-.06.35-.08.29-.1-.18-1.3-.19.06-.22,0-.22,0H626a1.2,1.2,0,0,1-.67-.22,2.88,2.88,0,0,1-.57-.53c-.18-.21-.34-.43-.49-.63a5,5,0,0,0-.42-.52l2.59-3.19v-.24" fill="#ede6e3"/>
              <polyline points="634.84 314.55 628.47 314.55 628.38 321.22 634.76 321.22 634.77 319.78 630.26 319.78 630.28 318.51 633.93 318.51 633.95 317.12 630.3 317.12 630.31 315.98 634.82 315.98 634.84 314.55" fill="#ede6e3"/>
              <polyline points="641.5 314.55 639.54 314.55 639.47 321.22 641.43 321.22 641.5 314.55" fill="#ede6e3"/>
              <polyline points="649.73 314.55 642.97 314.55 642.96 316.19 645.39 316.19 645.35 321.22 647.32 321.22 647.36 316.19 649.72 316.19 649.73 314.55" fill="#ede6e3"/>
              <path d="M657.88,314.45a5.74,5.74,0,0,0-1.65.23,4.18,4.18,0,0,0-1.35.67,3.17,3.17,0,0,0-.91,1.08,3.21,3.21,0,0,0-.34,1.45,3.07,3.07,0,0,0,1.22,2.52,4.16,4.16,0,0,0,1.34.68,5.71,5.71,0,0,0,1.65.23,6.39,6.39,0,0,0,.94-.08,8,8,0,0,0,.95-.2,7.06,7.06,0,0,0,.86-.3,4.06,4.06,0,0,0,.68-.36v-3.12h-3.76v1.25h1.91v1l-.33.12-.36.09-.37.06-.38,0a3.25,3.25,0,0,1-.93-.13,2.18,2.18,0,0,1-.73-.37,1.67,1.67,0,0,1-.48-.6,1.85,1.85,0,0,1-.17-.81,1.92,1.92,0,0,1,.18-.82,1.71,1.71,0,0,1,.48-.6,2.13,2.13,0,0,1,.71-.37,3,3,0,0,1,.89-.13,4.54,4.54,0,0,1,.62,0,3.87,3.87,0,0,1,.56.12,3.59,3.59,0,0,1,.51.19,3.66,3.66,0,0,1,.47.26l.9-1.25a5,5,0,0,0-.64-.36,5.27,5.27,0,0,0-.73-.28,5.69,5.69,0,0,0-.82-.18,6.33,6.33,0,0,0-.91-.06" fill="#ede6e3"/>
              <path d="M666.76,319.76a2.57,2.57,0,0,1-.87-.14,2.1,2.1,0,0,1-.68-.4,1.8,1.8,0,0,1-.45-.6,1.74,1.74,0,0,1-.16-.74,1.76,1.76,0,0,1,.61-1.35,2.09,2.09,0,0,1,.68-.39,2.6,2.6,0,0,1,.86-.14,2.66,2.66,0,0,1,.88.14,2,2,0,0,1,.68.39,1.75,1.75,0,0,1,.44.6,1.82,1.82,0,0,1,.16.75,1.76,1.76,0,0,1-.6,1.33,2.06,2.06,0,0,1-.68.4,2.63,2.63,0,0,1-.88.14m0-5.31a5,5,0,0,0-1.61.26,4,4,0,0,0-1.29.72,3.32,3.32,0,0,0-.86,1.09,3.13,3.13,0,0,0-.31,1.37,3.08,3.08,0,0,0,.31,1.36,3.32,3.32,0,0,0,.86,1.09,4,4,0,0,0,1.29.72,5,5,0,0,0,1.62.26,5,5,0,0,0,1.63-.26,4,4,0,0,0,1.3-.72,3.3,3.3,0,0,0,.86-1.09,3.09,3.09,0,0,0,.31-1.36,3.13,3.13,0,0,0-.31-1.37,3.3,3.3,0,0,0-.86-1.09,4,4,0,0,0-1.3-.72,5.05,5.05,0,0,0-1.63-.26" fill="#ede6e3"/>
              <path d="M676,314.45a6.09,6.09,0,0,0-.34.53,6.63,6.63,0,0,0-.32.64,4.74,4.74,0,0,0-.24.67,2.51,2.51,0,0,0-.09.64,1,1,0,0,0,.08.4.82.82,0,0,0,.23.3,1,1,0,0,0,.36.19,1.63,1.63,0,0,0,.48.07,1.7,1.7,0,0,0,.49-.06,1,1,0,0,0,.36-.19.79.79,0,0,0,.22-.3,1.12,1.12,0,0,0,0-.72.8.8,0,0,0-.14-.25.85.85,0,0,0-.22-.19,1.2,1.2,0,0,0-.31-.13l.49-1.21-1.07-.37" fill="#ede6e3"/>
              <path d="M681,318v-2h1.66a1.61,1.61,0,0,1,.48.07,1.17,1.17,0,0,1,.39.2.93.93,0,0,1,.26.32,1,1,0,0,1,.09.43,1,1,0,0,1-.09.42.93.93,0,0,1-.25.32,1.17,1.17,0,0,1-.38.2,1.57,1.57,0,0,1-.48.07H681m2-3.47H679l0,6.67h2v-1.77h2a3.77,3.77,0,0,0,1.12-.17,2.93,2.93,0,0,0,.93-.48,2.25,2.25,0,0,0,.63-.76,2.22,2.22,0,0,0,.23-1,2.5,2.5,0,0,0-.24-1.1,2.15,2.15,0,0,0-.64-.77,2.84,2.84,0,0,0-.94-.45,4.14,4.14,0,0,0-1.12-.15" fill="#ede6e3"/>
              <polyline points="693.78 314.55 687.41 314.55 687.46 321.22 693.84 321.22 693.83 319.78 689.33 319.78 689.32 318.51 692.96 318.51 692.95 317.12 689.3 317.12 689.29 315.98 693.79 315.98 693.78 314.55" fill="#ede6e3"/>
              <polyline points="701.93 314.55 695.57 314.55 695.63 321.22 702.01 321.22 702 319.78 697.49 319.78 697.47 318.51 701.13 318.51 701.11 317.12 697.46 317.12 697.44 315.98 701.95 315.98 701.93 314.55" fill="#ede6e3"/>
              <polyline points="710.66 314.55 708.48 314.55 706.7 317.12 704.85 314.55 702.66 314.55 702.66 314.66 705.74 318.64 705.77 321.22 707.74 321.22 707.7 318.64 710.66 314.66 710.66 314.55" fill="#ede6e3"/>
              <path d="M715.19,319.76a2.6,2.6,0,0,1-.87-.14,2.15,2.15,0,0,1-.69-.4,1.85,1.85,0,0,1-.46-.6,1.8,1.8,0,0,1,0-1.49,1.74,1.74,0,0,1,.44-.6,2,2,0,0,1,.68-.39,2.58,2.58,0,0,1,.86-.14,2.68,2.68,0,0,1,.88.14,2.09,2.09,0,0,1,.69.39,1.8,1.8,0,0,1,.45.6,1.84,1.84,0,0,1,.17.75,1.77,1.77,0,0,1-.14.74,1.73,1.73,0,0,1-.43.6,2,2,0,0,1-.68.4,2.61,2.61,0,0,1-.88.14m-.1-5.31a5,5,0,0,0-1.61.26,3.93,3.93,0,0,0-1.28.72,3.23,3.23,0,0,0-.84,1.09,3.16,3.16,0,0,0,0,2.73,3.39,3.39,0,0,0,.87,1.09,4.12,4.12,0,0,0,1.31.72,5.18,5.18,0,0,0,3.25,0,4,4,0,0,0,1.29-.72,3.23,3.23,0,0,0,.84-1.09,3,3,0,0,0,.29-1.36,3.16,3.16,0,0,0-.34-1.37,3.39,3.39,0,0,0-.88-1.09,4.13,4.13,0,0,0-1.31-.72,5.08,5.08,0,0,0-1.63-.26" fill="#ede6e3"/>
              <polyline points="732.58 314.55 730.44 314.55 728.51 319.1 726.55 314.55 724.42 314.55 725.39 316.69 724.14 319.37 721.92 314.55 719.81 314.55 722.95 321.22 725.08 321.22 726.29 318.64 727.52 321.22 729.66 321.22 732.58 314.55" fill="#ede6e3"/>
              <path d="M734.47,314.46a1.61,1.61,0,0,0-.47.07,1,1,0,0,0-.35.19.79.79,0,0,0-.22.31,1,1,0,0,0-.07.41,1,1,0,0,0,.05.31.83.83,0,0,0,.14.25.85.85,0,0,0,.22.19,1.1,1.1,0,0,0,.31.12l-.46,1.22,1.09.36a5.83,5.83,0,0,0,.32-.53,6.4,6.4,0,0,0,.3-.63,4.62,4.62,0,0,0,.22-.67,2.48,2.48,0,0,0,.08-.63,1,1,0,0,0-.09-.41.86.86,0,0,0-.23-.31,1.06,1.06,0,0,0-.37-.19,1.64,1.64,0,0,0-.48-.07" fill="#ede6e3"/>
            </g>
          </g>
        </g>
</g>
      </g>
      <g class="redBtn">
        <path d="M501.33,359.25H334.23a15.16,15.16,0,0,1-15.16-15.16v11.12a18.5,18.5,0,0,0,18.5,18.5H498a18.5,18.5,0,0,0,18.5-18.5V344.09A15.16,15.16,0,0,1,501.33,359.25Z" fill="#ccc"/>
        <path d="M501.33,322.25h-1.17v12.59A15.16,15.16,0,0,1,485,350H350.56a15.16,15.16,0,0,1-15.16-15.16V322.25h-1.17a15.16,15.16,0,0,0-15.16,15.16v6.68a15.16,15.16,0,0,0,15.16,15.16H501.33a15.16,15.16,0,0,0,15.16-15.16v-6.68A15.16,15.16,0,0,0,501.33,322.25Z" fill="#dadad9"/>
       <g clip-path="url(#redMask)">
        <g class="redPress" filter="url(#Rbrightness)">
          <path d="M335.4,344.84A15.16,15.16,0,0,0,350.56,360H485a15.16,15.16,0,0,0,15.16-15.16V319.68A15.16,15.16,0,0,1,485,334.84H350.56a15.16,15.16,0,0,1-15.16-15.16v25.16Z" fill="#db625c"/>
          <path d="M350.56,335.53H485A15.33,15.33,0,0,0,500.16,320h0A15.33,15.33,0,0,0,485,304.53H350.56A15.33,15.33,0,0,0,335.4,320h0A15.33,15.33,0,0,0,350.56,335.53Z" fill="#f16c66"/>
          <g class="redLabel">
            <polyline points="387.23 314.55 385.54 314.55 382.68 317.33 379.89 314.55 378.2 314.55 378.1 321.22 380.07 321.22 380.13 317.13 382.48 319.55 382.81 319.55 385.24 317.13 385.19 321.22 387.15 321.22 387.23 314.55" fill="#ede6e3"/>
            <path d="M391.4,318.78l1.22-2.61,1.12,2.61H391.4m2.38-4.23h-2.29l-3.14,6.67h2l.56-1.23h3.33l.52,1.23h2l-3-6.67" fill="#ede6e3"/>
            <path d="M405.35,314.55h-2l-2,2.67H400l0-2.67h-2l-.05,6.67h2l0-2.57h1.14a5.94,5.94,0,0,1,.54.7,9.45,9.45,0,0,0,.69.89,3.63,3.63,0,0,0,.93.76,2.57,2.57,0,0,0,1.26.32l.41,0,.39-.06.35-.08.29-.1-.19-1.3-.19.06-.21,0-.22,0H405a1.21,1.21,0,0,1-.67-.22,2.92,2.92,0,0,1-.58-.53c-.18-.21-.34-.43-.49-.63a5,5,0,0,0-.42-.52l2.56-3.19v-.24" fill="#ede6e3"/>
            <polyline points="413.69 314.55 407.33 314.55 407.3 321.22 413.68 321.22 413.68 319.78 409.17 319.78 409.17 318.51 412.83 318.51 412.83 317.13 409.18 317.13 409.18 315.98 413.69 315.98 413.69 314.55" fill="#ede6e3"/>
            <polyline points="420.35 314.55 418.39 314.55 418.39 321.22 420.36 321.22 420.35 314.55" fill="#ede6e3"/>
            <polyline points="428.59 314.55 421.82 314.55 421.82 316.2 424.27 316.2 424.27 321.22 426.24 321.22 426.23 316.2 428.59 316.2 428.59 314.55" fill="#ede6e3"/>
            <path d="M435,318v-2h1.67a1.58,1.58,0,0,1,.48.07,1.16,1.16,0,0,1,.38.2.93.93,0,0,1,.26.32,1,1,0,0,1,.1.43,1,1,0,0,1-.09.42.93.93,0,0,1-.25.32,1.16,1.16,0,0,1-.38.2,1.54,1.54,0,0,1-.48.07H435m2-3.47H433l0,6.67h2v-1.77h2a3.76,3.76,0,0,0,1.12-.17,2.91,2.91,0,0,0,.93-.48,2.18,2.18,0,0,0,.86-1.78,2.51,2.51,0,0,0-.24-1.1,2.14,2.14,0,0,0-.64-.77,2.82,2.82,0,0,0-.93-.45,4.13,4.13,0,0,0-1.12-.15" fill="#ede6e3"/>
            <path d="M445,319.77a2.59,2.59,0,0,1-.87-.14,2.13,2.13,0,0,1-.69-.4,1.83,1.83,0,0,1-.45-.6,1.76,1.76,0,0,1,.43-2.09,2.06,2.06,0,0,1,.68-.39A2.59,2.59,0,0,1,445,316a2.67,2.67,0,0,1,.88.14,2.07,2.07,0,0,1,.69.39,1.78,1.78,0,0,1,.45.6,1.83,1.83,0,0,1,.16.75,1.78,1.78,0,0,1-.15.74,1.75,1.75,0,0,1-.44.6,2,2,0,0,1-.68.4,2.62,2.62,0,0,1-.88.14m-.06-5.31a5,5,0,0,0-1.61.26,4,4,0,0,0-1.29.72,3.27,3.27,0,0,0-.85,1.09,3.15,3.15,0,0,0,0,2.73,3.36,3.36,0,0,0,.87,1.09,4.09,4.09,0,0,0,1.3.72,5.18,5.18,0,0,0,3.25,0,4,4,0,0,0,1.29-.72,3.26,3.26,0,0,0,.85-1.09,3.07,3.07,0,0,0,.3-1.36,3.15,3.15,0,0,0-.32-1.37,3.34,3.34,0,0,0-.87-1.09,4.08,4.08,0,0,0-1.3-.72,5.08,5.08,0,0,0-1.63-.26" fill="#ede6e3"/>
            <path d="M452.79,318l0-2h1.67a1.6,1.6,0,0,1,.48.07,1.19,1.19,0,0,1,.39.2,1,1,0,0,1,.26.32,1,1,0,0,1,.1.43.91.91,0,0,1-.34.74,1.17,1.17,0,0,1-.38.2,1.55,1.55,0,0,1-.48.07h-1.67m1.94-3.47h-3.95l.08,6.67h2l0-1.77h2a3.75,3.75,0,0,0,1.12-.17,2.89,2.89,0,0,0,.93-.48,2.17,2.17,0,0,0,.85-1.78,2.52,2.52,0,0,0-.25-1.1,2.16,2.16,0,0,0-.65-.77,2.84,2.84,0,0,0-.94-.45,4.14,4.14,0,0,0-1.12-.15" fill="#ede6e3"/>
            <path d="M460.07,319.47a1.69,1.69,0,0,0-.49.06,1,1,0,0,0-.36.19.77.77,0,0,0-.22.3,1.1,1.1,0,0,0,0,.8.78.78,0,0,0,.22.29,1,1,0,0,0,.36.18,1.8,1.8,0,0,0,.49.06,1.82,1.82,0,0,0,.49-.06,1,1,0,0,0,.37-.18.76.76,0,0,0,.23-.29,1,1,0,0,0,.07-.4,1,1,0,0,0-.09-.4.82.82,0,0,0-.23-.3,1.06,1.06,0,0,0-.37-.19,1.76,1.76,0,0,0-.5-.06m.91-4.92h-2l.36,4.2h1.37l.24-4.2" fill="#ede6e3"/>
          </g>
        </g>
        </g>
        
      </g>
      <g class="blueBtn">
        <path d="M250.33,359.25H83.23a15.16,15.16,0,0,1-15.16-15.16v11.12a18.5,18.5,0,0,0,18.5,18.5H247a18.5,18.5,0,0,0,18.5-18.5V344.09A15.16,15.16,0,0,1,250.33,359.25Z" fill="#ccc"/>
        <path d="M250.33,322.25h-1.17v12.59A15.16,15.16,0,0,1,234,350H99.56A15.16,15.16,0,0,1,84.4,334.84V322.25H83.23a15.16,15.16,0,0,0-15.16,15.16v6.68a15.16,15.16,0,0,0,15.16,15.16H250.33a15.16,15.16,0,0,0,15.16-15.16v-6.68A15.16,15.16,0,0,0,250.33,322.25Z" fill="#dadad9"/>
        <g clip-path="url(#blueMask)">
        <g class="bluePress"  filter="url(#Bbrightness)">
          <path d="M84.4,344.84A15.16,15.16,0,0,0,99.56,360H234a15.16,15.16,0,0,0,15.16-15.16V319.68A15.16,15.16,0,0,1,234,334.84H99.56A15.16,15.16,0,0,1,84.4,319.68v25.16Z" fill="#387089"/>
          <path d="M99.56,335.53H234A15.33,15.33,0,0,0,249.16,320h0A15.33,15.33,0,0,0,234,304.53H99.56A15.33,15.33,0,0,0,84.4,320h0A15.33,15.33,0,0,0,99.56,335.53Z" fill="#4281a4"/>
          <g class="blueLabel">
         </g>
            <polygon points="104.66 321.32 104.81 314.45 229.72 314.45 229.88 321.32 104.66 321.32" fill="none"/>
            <polyline points="113.83 314.55 112.14 314.55 109.25 317.33 106.5 314.55 104.81 314.55 104.66 321.22 106.61 321.22 106.7 317.13 109.04 319.54 109.38 319.54 111.81 317.13 111.73 321.22 113.69 321.22 113.83 314.55" fill="#ede6e3"/>
            <path d="M118,318.78l1.25-2.61,1.1,2.61H118m2.42-4.23h-2.3l-3.19,6.67h2l.57-1.23h3.32l.52,1.23h2l-2.9-6.67" fill="#ede6e3"/>
            <path d="M132,314.55h-2l-2,2.67h-1.37l0-2.67h-2l-.1,6.67h2l0-2.57h1.14a5.89,5.89,0,0,1,.54.7,9.3,9.3,0,0,0,.68.89,3.59,3.59,0,0,0,.93.76,2.57,2.57,0,0,0,1.26.32l.4,0,.39-.06.35-.08.29-.1-.18-1.3-.19.06-.21,0-.22,0h-.21a1.2,1.2,0,0,1-.67-.22,2.88,2.88,0,0,1-.57-.53c-.18-.21-.34-.43-.48-.63a5.14,5.14,0,0,0-.42-.52l2.59-3.19v-.24" fill="#ede6e3"/>
            <polyline points="140.29 314.55 133.92 314.55 133.84 321.22 140.22 321.22 140.24 319.78 135.73 319.78 135.75 318.51 139.4 318.51 139.42 317.12 135.76 317.12 135.78 315.98 140.28 315.98 140.29 314.55" fill="#ede6e3"/>
            <polyline points="146.95 314.55 144.99 314.55 144.94 321.22 150.86 321.22 150.87 319.78 146.91 319.78 146.95 314.55" fill="#ede6e3"/>
            <path d="M155.69,319.76a2.57,2.57,0,0,1-.87-.14,2.09,2.09,0,0,1-.68-.4,1.79,1.79,0,0,1-.45-.6,1.74,1.74,0,0,1-.16-.74,1.77,1.77,0,0,1,.62-1.35,2.1,2.1,0,0,1,.69-.39,2.61,2.61,0,0,1,.87-.14,2.64,2.64,0,0,1,.88.14,2,2,0,0,1,.68.39,1.75,1.75,0,0,1,.44.6,1.81,1.81,0,0,1,.16.75,1.76,1.76,0,0,1-.61,1.33,2.08,2.08,0,0,1-.68.4,2.62,2.62,0,0,1-.88.14m0-5.31a5,5,0,0,0-1.61.26,4,4,0,0,0-1.29.72,3.33,3.33,0,0,0-.86,1.09,3.14,3.14,0,0,0-.32,1.37,3.08,3.08,0,0,0,.3,1.36,3.29,3.29,0,0,0,.85,1.09,4,4,0,0,0,1.29.72,5,5,0,0,0,1.62.26,5.07,5.07,0,0,0,1.64-.26,4.09,4.09,0,0,0,1.3-.72,3.33,3.33,0,0,0,.86-1.09,3.15,3.15,0,0,0,0-2.73,3.29,3.29,0,0,0-.86-1.09,4,4,0,0,0-1.3-.72,5.06,5.06,0,0,0-1.63-.26" fill="#ede6e3"/>
            <path d="M165.28,314.45a5.73,5.73,0,0,0-1.65.23,4.17,4.17,0,0,0-1.34.67,3.15,3.15,0,0,0-.9,1.08,3.2,3.2,0,0,0-.33,1.45,3.08,3.08,0,0,0,1.23,2.52,4.18,4.18,0,0,0,1.34.68,5.71,5.71,0,0,0,1.65.23,6.36,6.36,0,0,0,.94-.08,8,8,0,0,0,.95-.2,7.09,7.09,0,0,0,.86-.3,4,4,0,0,0,.68-.36v-3.12h-3.76v1.25h1.9v1l-.32.12-.35.09-.37.06-.38,0a3.27,3.27,0,0,1-.94-.13,2.18,2.18,0,0,1-.73-.37,1.67,1.67,0,0,1-.48-.6,1.87,1.87,0,0,1-.17-.81,1.92,1.92,0,0,1,.17-.82,1.7,1.7,0,0,1,.47-.6,2.11,2.11,0,0,1,.71-.37,3,3,0,0,1,.89-.13,4.54,4.54,0,0,1,.62,0,3.87,3.87,0,0,1,.57.12,3.6,3.6,0,0,1,.51.19,3.67,3.67,0,0,1,.47.26l.9-1.25a5,5,0,0,0-.64-.36,5.28,5.28,0,0,0-.73-.28,5.7,5.7,0,0,0-.82-.18,6.33,6.33,0,0,0-.91-.06" fill="#ede6e3"/>
            <path d="M174.16,319.76a2.58,2.58,0,0,1-.87-.14,2.11,2.11,0,0,1-.69-.4,1.81,1.81,0,0,1-.45-.6,1.75,1.75,0,0,1-.16-.74,1.76,1.76,0,0,1,.61-1.35,2.08,2.08,0,0,1,.68-.39,2.6,2.6,0,0,1,.86-.14,2.66,2.66,0,0,1,.88.14,2,2,0,0,1,.68.39,1.76,1.76,0,0,1,.44.6,1.82,1.82,0,0,1,.16.75,1.78,1.78,0,0,1-.15.74,1.76,1.76,0,0,1-.44.6,2,2,0,0,1-.68.4,2.63,2.63,0,0,1-.88.14m0-5.31a5,5,0,0,0-1.62.26,4,4,0,0,0-1.29.72,3.29,3.29,0,0,0-.85,1.09,3.13,3.13,0,0,0-.31,1.37,3.1,3.1,0,0,0,.31,1.36,3.32,3.32,0,0,0,.86,1.09,4,4,0,0,0,1.29.72,5.18,5.18,0,0,0,3.25,0,4,4,0,0,0,1.3-.72,3.3,3.3,0,0,0,.86-1.09,3.07,3.07,0,0,0,.31-1.36,3.13,3.13,0,0,0-.32-1.37,3.32,3.32,0,0,0-.86-1.09,4.06,4.06,0,0,0-1.3-.72,5,5,0,0,0-1.63-.26" fill="#ede6e3"/>
            <path d="M184.86,319.9v-1.41h1.71a2.67,2.67,0,0,1,.51,0,1.2,1.2,0,0,1,.37.13.62.62,0,0,1,.23.22.64.64,0,0,1,.08.32.63.63,0,0,1-.07.3.56.56,0,0,1-.2.22,1,1,0,0,1-.34.13,2.35,2.35,0,0,1-.48,0h-1.8m0-2.74v-1.3h1.26a2.64,2.64,0,0,1,.46,0,1.07,1.07,0,0,1,.34.11.54.54,0,0,1,.21.2.6.6,0,0,1,.07.3.57.57,0,0,1-.07.29.55.55,0,0,1-.21.2,1.11,1.11,0,0,1-.34.12,2.56,2.56,0,0,1-.47,0h-1.24m1.54-2.61h-3.51l0,6.67H187a5.57,5.57,0,0,0,1.24-.13,2.85,2.85,0,0,0,.9-.36,1.61,1.61,0,0,0,.55-.57,1.51,1.51,0,0,0,.18-.76,1.58,1.58,0,0,0-.13-.63,1.4,1.4,0,0,0-.35-.48,2,2,0,0,0-.56-.34,3.52,3.52,0,0,0-.75-.21,2.28,2.28,0,0,0,.48-.23,1.6,1.6,0,0,0,.36-.32,1.28,1.28,0,0,0,.22-.39,1.35,1.35,0,0,0,.07-.46,1.63,1.63,0,0,0-.2-.8,1.53,1.53,0,0,0-.55-.56,2.77,2.77,0,0,0-.88-.33,5.82,5.82,0,0,0-1.18-.11" fill="#ede6e3"/>
            <polyline points="193.43 314.55 191.47 314.55 191.53 321.22 193.5 321.22 193.43 314.55" fill="#ede6e3"/>
            <path d="M199.36,314.45a5.7,5.7,0,0,0-1.65.23,4.11,4.11,0,0,0-1.34.67,3.1,3.1,0,0,0-.89,1.08,3.19,3.19,0,0,0,.95,4,4.24,4.24,0,0,0,1.35.68,5.74,5.74,0,0,0,1.66.23,6.37,6.37,0,0,0,.94-.08,7.93,7.93,0,0,0,.94-.2,7,7,0,0,0,.85-.3,4,4,0,0,0,.67-.36l0-3.12h-3.76v1.25H201v1l-.33.12-.35.09-.37.06-.38,0a3.27,3.27,0,0,1-.93-.13,2.22,2.22,0,0,1-.74-.37,1.71,1.71,0,0,1-.49-.6,1.87,1.87,0,0,1-.18-.81,1.9,1.9,0,0,1,.16-.82,1.68,1.68,0,0,1,.47-.6,2.09,2.09,0,0,1,.71-.37,3,3,0,0,1,.88-.13,4.55,4.55,0,0,1,.62,0,3.9,3.9,0,0,1,.57.12,3.64,3.64,0,0,1,.52.19,3.73,3.73,0,0,1,.47.26l.88-1.25a5.12,5.12,0,0,0-.64-.36,5.31,5.31,0,0,0-.73-.28,5.71,5.71,0,0,0-.83-.18,6.38,6.38,0,0,0-.92-.06" fill="#ede6e3"/>
            <path d="M208.39,314.45a5.68,5.68,0,0,0-1.65.23,4.07,4.07,0,0,0-1.33.67,3.08,3.08,0,0,0-.88,1.08,3.21,3.21,0,0,0,1,4,4.24,4.24,0,0,0,1.35.68,5.74,5.74,0,0,0,1.66.23,6.37,6.37,0,0,0,.94-.08,7.91,7.91,0,0,0,.94-.2,6.94,6.94,0,0,0,.85-.3,4,4,0,0,0,.67-.36l-.05-3.12H208.1l0,1.25H210l0,1-.32.12-.35.09-.38.06-.38,0a3.28,3.28,0,0,1-.93-.13,2.23,2.23,0,0,1-.74-.37,1.72,1.72,0,0,1-.49-.6,2,2,0,0,1,0-1.62,1.67,1.67,0,0,1,.46-.6,2.09,2.09,0,0,1,.71-.37,3,3,0,0,1,.88-.13,4.6,4.6,0,0,1,.63,0,3.9,3.9,0,0,1,.57.12,3.69,3.69,0,0,1,.52.19,3.92,3.92,0,0,1,.47.26l.87-1.25a5.14,5.14,0,0,0-.64-.36,5.33,5.33,0,0,0-.74-.28,5.72,5.72,0,0,0-.83-.18,6.39,6.39,0,0,0-.92-.06" fill="#ede6e3"/>
            <polyline points="220.03 314.55 213.67 314.55 213.78 321.22 220.16 321.22 220.13 319.78 215.62 319.78 215.6 318.51 219.25 318.51 219.23 317.12 215.57 317.12 215.55 315.98 220.06 315.98 220.03 314.55" fill="#ede6e3"/>
            <path d="M223.83,317.62l0-1.65h1.78a1.55,1.55,0,0,1,.43.06,1,1,0,0,1,.33.16.75.75,0,0,1,.21.26.8.8,0,0,1,.08.34.76.76,0,0,1-.07.34.72.72,0,0,1-.2.26,1,1,0,0,1-.33.17,1.48,1.48,0,0,1-.43.06h-1.78m1.75-3.07h-3.77l.13,6.67h2l0-2.41h.42a5.75,5.75,0,0,1,.85.64c.31.26.63.56,1,.83a5.93,5.93,0,0,0,1.13.72,3,3,0,0,0,1.29.31l.39,0,.36-.06.32-.08.27-.1-.22-1.3-.2.06-.22,0-.22,0h-.2a1.66,1.66,0,0,1-.55-.1,3,3,0,0,1-.54-.26c-.18-.11-.36-.23-.54-.37l-.54-.41a3.25,3.25,0,0,0,.83-.25,2.4,2.4,0,0,0,.65-.44,1.82,1.82,0,0,0,.42-.59,1.73,1.73,0,0,0,.14-.73,2,2,0,0,0-.28-1,2.08,2.08,0,0,0-.7-.68,3.32,3.32,0,0,0-1-.39,5,5,0,0,0-1.13-.12" fill="#ede6e3"/>
          </g>
        </g>

      </g>
 
      <g class="hand">
        <path d="M30.62,229.55h0A16.17,16.17,0,0,1,14.5,213.43l-3-156.83c0-8.87,10.22-39.1,19.09-39.1h0A16.17,16.17,0,0,1,46.75,33.62V213.43A16.17,16.17,0,0,1,30.62,229.55Z" fill="#d4b483"/>
        <path d="M124.73,60.1c-1.81,33.14-24.6,60.1-55,60.1s-55-26.91-55-60.1S17.46,0,69.78,0C133.95,0,125.19,51.7,124.73,60.1Z" fill="#d4b483"/>
        <path d="M118.16,61.81h0a15.07,15.07,0,0,0-15,15v26.83L85,101a15.07,15.07,0,0,0-16.33,13.59h0A15.07,15.07,0,0,0,82.3,130.9s33.08,5.73,35.86,5.73h0a15.07,15.07,0,0,0,15-15V76.84A15.07,15.07,0,0,0,118.16,61.81Z" fill="#d4b483" stroke="#ede6e3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.96"/>
        <path d="M102.86,71.45h0a15.07,15.07,0,0,0-15,15v26.83l-18.1-2.7A15.07,15.07,0,0,0,53.4,124.21h0A15.07,15.07,0,0,0,67,140.54s33.08,5.73,35.86,5.73h0a15.07,15.07,0,0,0,15-15V86.48A15.07,15.07,0,0,0,102.86,71.45Z" fill="#d4b483" stroke="#ede6e3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.96"/>
        <path d="M85.85,82.79h0c-8.26,0-12.67,5.24-11.73,15s4.23,28.87,4.23,28.87L52.72,122a15.07,15.07,0,0,0-16.33,13.59h0A15.07,15.07,0,0,0,50,151.88s33.08,5.73,35.86,5.73h0a15.07,15.07,0,0,0,15-15V97.82A15.07,15.07,0,0,0,85.85,82.79Z" fill="#d4b483" stroke="#ede6e3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.96"/>
        <path d="M30.58,7C7.37,19-6.94,122.16,6.93,128.33c13.82,4.61,78.34,23.74,82.92,7.24,3.29-11.85,3.29-32.25-50-33.56C49.71,87.53,51,56.6,50.37,52" fill="#d4b483" stroke="#ede6e3" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.96"/>
      </g> 
</svg>
            
          
!
            
              body {
  background-color:#ede6e3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center; 
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


svg{
  width:1024px;
  height:768px;
  visibility:hidden;
 overflow: visible;

}


            
          
!
            
              TweenLite.defaultOverwrite = "auto";
var xmlns = "http://www.w3.org/2000/svg",
  xlinkns = "http://www.w3.org/1999/xlink",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
    hand = select('.hand')
  

TweenMax.set('svg', {
  visibility: 'visible'
})

TweenMax.set('.bluePress', {
 y:10
})
TweenMax.set('#Bbrightness .brightness', {
 attr:{
  slope:0.4
 }
})
var tl = new TimelineMax({repeat:-1});
tl.fromTo(hand, 1,{
 x:130,
 y:110
}, {
 x:380,
 y:0,
 ease:Power3.easeInOut
})
.to(hand, 1, {
 y:110,
 ease:Anticipate.easeOut
})
.to('.redPress', 0.23, {
 y:10
},'-=0.4')
.to('#Rbrightness .brightness', 0.23, {
 attr:{
  slope:0.4
 }
},'-=0.4')

.to('.bluePress', 1, {
 y:0,
 ease:Elastic.easeOut.config(1,0.37)
},'-=0.4') 
 .to('#Bbrightness .brightness', 0.23, {
 attr:{
  slope:1
 }
},'-=1')


.to(hand, 1, {
 y:0,
 ease:Power3.easeInOut
})
.to(hand, 1, {
 x:630,
 ease:Power3.easeInOut
},'-=1')

.to(hand, 1, {
 y:110,
 ease:Anticipate.easeOut
})
.to('#Rbrightness .brightness', 0.23, {
 attr:{
  slope:1
 }
},'-=0.4')

.to('.redPress', 1, {
 y:0,
 ease:Elastic.easeOut.config(1,0.37)
},'-=0.4') 
 .to('#Gbrightness .brightness', 0.23, {
 attr:{
  slope:1
 }
},'-=1')
.to('.greenPress', 0.23, {
 y:10
},'-=1') 
 .to('#Gbrightness .brightness', 0.23, {
 attr:{
  slope:0.4
 }
},'-=1')


.to(hand, 0.9, {
 y:0,
 ease:Anticipate.easeIn
})
.to(hand, 1, {
 x:130,
 ease:Power1.easeInOut
},'-=0.6')

.to(hand, 1, {
 y:110,
 ease:Anticipate.easeOut
})


.to('.greenPress', 1, {
 y:0,
 ease:Elastic.easeOut.config(1,0.37)
},'-=0.4') 
 .to('#Gbrightness .brightness', 0.23, {
 attr:{
  slope:1
 }
},'-=1')
.to('.bluePress', 0.23, {
 y:10
},'-=1') 
 .to('#Bbrightness .brightness', 0.23, {
 attr:{
  slope:0.4
 }
},'-=1')

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console