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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <div class="box">
  
  

<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
  
  
<!--   <path fill="#fceed4" d="M0 0h800v600H0z"/> -->
  
  
  <g id="vending">
    <path id="ven-side" d="M297.472 228.332c0-1.894 1.07-3.625 2.764-4.472 17.817-8.909 116.239-58.119 132.366-66.183a5.0007 5.0007 0 014.473 0c11.331 5.665 61.872 30.936 61.872 30.936L361.565 258.99v180.781s-49.044-24.522-61.329-30.665a4.9996 4.9996 0 01-2.764-4.472V228.332z" fill="#00c2d5"/>
    <g id="ven-front">
      <path d="M502.528 193.406c0-1.733-.898-3.342-2.372-4.253a4.9986 4.9986 0 00-4.864-.219l-133.621 66.81a5.0005 5.0005 0 00-2.763 4.472v175.135c0 1.733.897 3.342 2.371 4.254 1.474.911 3.315.993 4.865.218 26.367-13.183 116.644-58.322 133.62-66.81a4.9996 4.9996 0 002.764-4.472V193.406z" fill="#3ed0de"/>
      <path id="drinks" d="M492.473 211.132a4.998 4.998 0 00-2.372-4.253 4.9986 4.9986 0 00-4.864-.219l-113.511 56.755a4.9996 4.9996 0 00-2.764 4.472v71.974c0 1.732.898 3.342 2.372 4.253 1.474.911 3.315.994 4.864.219 23.678-11.839 98.205-49.103 113.511-56.755a5.0011 5.0011 0 002.764-4.473v-71.973z" fill="#fff"/>
      <clipPath id="_clip1">
        <path d="M492.473 211.132a4.998 4.998 0 00-2.372-4.253 4.9986 4.9986 0 00-4.864-.219l-113.511 56.755a4.9996 4.9996 0 00-2.764 4.472v71.974c0 1.732.898 3.342 2.372 4.253 1.474.911 3.315.994 4.864.219 23.678-11.839 98.205-49.103 113.511-56.755a5.0011 5.0011 0 002.764-4.473v-71.973z"/>
      </clipPath>
      <g clip-path="url(#_clip1)">
        <g>
          <path d="M370.765 315.717v-22.94h17.614v22.94c0 1.341-.86 2.683-2.579 3.705-3.437 2.044-9.019 2.044-12.457 0-1.719-1.022-2.578-2.364-2.578-3.705z" fill="#fc8d5d"/>
          <clipPath id="_clip2">
            <path d="M370.765 315.717v-22.94h17.614v22.94c0 1.341-.86 2.683-2.579 3.705-3.437 2.044-9.019 2.044-12.457 0-1.719-1.022-2.578-2.364-2.578-3.705z"/>
          </clipPath>
          <g clip-path="url(#_clip2)">
            <path fill="#f3a683" d="M385.034 290.788h2.301v33.626h-2.301z"/>
          </g>
          <g>
            <path d="M373.343 289.072c3.438-2.045 9.02-2.045 12.457 0 3.438 2.045 3.438 5.365 0 7.409-3.437 2.045-9.019 2.045-12.457 0-3.438-2.044-3.438-5.364 0-7.409z" fill="#596276"/>
            <path d="M374.658 289.854c2.712-1.613 7.115-1.613 9.827 0 2.712 1.613 2.712 4.232 0 5.845-2.712 1.613-7.115 1.613-9.827 0-2.711-1.613-2.711-4.232 0-5.845z" fill="#303853"/>
            <path d="M375.188 290.419c2.419-1.44 6.348-1.44 8.768 0 2.419 1.439 2.419 3.775 0 5.214-2.42 1.44-6.349 1.44-8.768 0-2.42-1.439-2.42-3.775 0-5.214z" fill="#596276"/>
            <path d="M378.202 290.619c-.354-.211-.895-.231-1.206-.046l-1.129.671c-.312.186-.277.507.078.718l2.645 1.574c.355.211.895.231 1.207.046l1.129-.671c.311-.186.276-.507-.078-.718l-2.646-1.574z" fill="none" stroke="#303853" stroke-width=".5"/>
          </g>
        </g>
        <g>
          <path d="M391.774 305.69v-22.941h17.614v22.941c0 1.341-.859 2.682-2.578 3.704-3.438 2.045-9.02 2.045-12.457 0-1.719-1.022-2.579-2.363-2.579-3.704z" fill="#fc8d5d"/>
          <clipPath id="_clip3">
            <path d="M391.774 305.69v-22.941h17.614v22.941c0 1.341-.859 2.682-2.578 3.704-3.438 2.045-9.02 2.045-12.457 0-1.719-1.022-2.579-2.363-2.579-3.704z"/>
          </clipPath>
          <g clip-path="url(#_clip3)">
            <path fill="#f3a683" d="M406.044 280.76h2.301v33.626h-2.301z"/>
          </g>
          <g>
            <path d="M394.353 279.044c3.437-2.044 9.019-2.044 12.457 0 3.438 2.045 3.438 5.365 0 7.409-3.438 2.045-9.02 2.045-12.457 0-3.438-2.044-3.438-5.364 0-7.409z" fill="#596276"/>
            <path d="M395.668 279.827c2.712-1.613 7.115-1.613 9.827 0 2.711 1.612 2.711 4.231 0 5.844-2.712 1.613-7.115 1.613-9.827 0-2.712-1.613-2.712-4.232 0-5.844z" fill="#303853"/>
            <path d="M396.197 280.391c2.42-1.439 6.349-1.439 8.768 0 2.42 1.439 2.42 3.776 0 5.215-2.419 1.439-6.348 1.439-8.768 0-2.419-1.439-2.419-3.776 0-5.215z" fill="#596276"/>
            <path d="M399.212 280.592c-.355-.211-.895-.232-1.207-.047l-1.129.672c-.311.185-.276.507.078.718l2.646 1.573c.354.211.895.232 1.206.046l1.129-.671c.312-.185.277-.507-.077-.718l-2.646-1.573z" fill="none" stroke="#303853" stroke-width=".5"/>
          </g>
        </g>
        <g>
          <path d="M412.784 294.938v-22.94h17.614v22.94c0 1.341-.86 2.683-2.579 3.705-3.437 2.044-9.019 2.044-12.457 0-1.719-1.022-2.578-2.364-2.578-3.705z" fill="#fff356"/>
          <clipPath id="_clip4">
            <path d="M412.784 294.938v-22.94h17.614v22.94c0 1.341-.86 2.683-2.579 3.705-3.437 2.044-9.019 2.044-12.457 0-1.719-1.022-2.578-2.364-2.578-3.705z"/>
          </clipPath>
          <g clip-path="url(#_clip4)">
            <path fill="#fffca2" d="M427.054 270.009h2.301v33.626h-2.301z"/>
          </g>
          <g>
            <path d="M415.362 268.293c3.438-2.045 9.02-2.045 12.457 0 3.438 2.045 3.438 5.365 0 7.409-3.437 2.045-9.019 2.045-12.457 0-3.437-2.044-3.437-5.364 0-7.409z" fill="#596276"/>
            <path d="M416.677 269.075c2.712-1.613 7.115-1.613 9.827 0 2.712 1.613 2.712 4.232 0 5.845-2.712 1.613-7.115 1.613-9.827 0-2.711-1.613-2.711-4.232 0-5.845z" fill="#303853"/>
            <path d="M417.207 269.639c2.419-1.439 6.348-1.439 8.768 0 2.419 1.44 2.419 3.776 0 5.215-2.42 1.44-6.349 1.44-8.768 0-2.42-1.439-2.42-3.775 0-5.215z" fill="#596276"/>
            <path d="M420.222 269.84c-.355-.211-.896-.231-1.207-.046l-1.129.671c-.312.186-.277.507.078.718l2.645 1.574c.355.211.895.231 1.207.046l1.129-.671c.312-.186.277-.507-.078-.718l-2.645-1.574z" fill="none" stroke="#303853" stroke-width=".5"/>
          </g>
        </g>
        <g>
          <path d="M433.794 283.722v-22.94h17.613v22.94c0 1.341-.859 2.683-2.578 3.705-3.438 2.045-9.02 2.045-12.457 0-1.719-1.022-2.578-2.364-2.578-3.705z" fill="#fff356"/>
          <clipPath id="_clip5">
            <path d="M433.794 283.722v-22.94h17.613v22.94c0 1.341-.859 2.683-2.578 3.705-3.438 2.045-9.02 2.045-12.457 0-1.719-1.022-2.578-2.364-2.578-3.705z"/>
          </clipPath>
          <g clip-path="url(#_clip5)">
            <path fill="#fffca2" d="M448.063 258.793h2.301v33.626h-2.301z"/>
          </g>
          <g>
            <path d="M436.372 257.077c3.437-2.045 9.019-2.045 12.457 0 3.438 2.045 3.438 5.365 0 7.409-3.438 2.045-9.02 2.045-12.457 0-3.438-2.044-3.438-5.364 0-7.409z" fill="#596276"/>
            <path d="M437.687 257.859c2.712-1.613 7.115-1.613 9.827 0 2.712 1.613 2.712 4.232 0 5.845-2.712 1.613-7.115 1.613-9.827 0-2.712-1.613-2.712-4.232 0-5.845z" fill="#303853"/>
            <path d="M438.216 258.424c2.42-1.44 6.349-1.44 8.768 0 2.42 1.439 2.42 3.775 0 5.215-2.419 1.439-6.348 1.439-8.768 0-2.419-1.44-2.419-3.776 0-5.215z" fill="#596276"/>
            <path d="M441.231 258.624c-.354-.211-.895-.231-1.207-.046l-1.129.671c-.311.186-.276.507.078.718l2.646 1.574c.354.211.895.231 1.207.046l1.129-.671c.311-.186.276-.507-.078-.718l-2.646-1.574z" fill="none" stroke="#303853" stroke-width=".5"/>
          </g>
        </g>
        <g>
          <path d="M454.803 273.698v-22.941h17.614v22.941c0 1.341-.86 2.682-2.578 3.705-3.438 2.044-9.02 2.044-12.458 0-1.718-1.023-2.578-2.364-2.578-3.705z" fill="#00c2d5"/>
          <clipPath id="_clip6">
            <path d="M454.803 273.698v-22.941h17.614v22.941c0 1.341-.86 2.682-2.578 3.705-3.438 2.044-9.02 2.044-12.458 0-1.718-1.023-2.578-2.364-2.578-3.705z"/>
          </clipPath>
          <g clip-path="url(#_clip6)">
            <path fill="#3ed0de" d="M469.073 248.768h2.301v33.626h-2.301z"/>
          </g>
          <g>
            <path d="M457.381 247.053c3.438-2.045 9.02-2.045 12.458 0 3.437 2.044 3.437 5.364 0 7.409-3.438 2.045-9.02 2.045-12.458 0-3.437-2.045-3.437-5.365 0-7.409z" fill="#596276"/>
            <path d="M458.697 247.835c2.711-1.613 7.115-1.613 9.826 0 2.712 1.613 2.712 4.232 0 5.845-2.711 1.613-7.115 1.613-9.826 0-2.712-1.613-2.712-4.232 0-5.845z" fill="#303853"/>
            <path d="M459.226 248.399c2.42-1.439 6.348-1.439 8.768 0 2.42 1.439 2.42 3.776 0 5.215s-6.348 1.439-8.768 0c-2.42-1.439-2.42-3.776 0-5.215z" fill="#596276"/>
            <path d="M462.241 248.6c-.355-.211-.896-.232-1.207-.046l-1.129.671c-.312.186-.277.507.078.718l2.645 1.574c.355.21.896.231 1.207.046l1.129-.672c.312-.185.277-.507-.078-.717l-2.645-1.574z" fill="none" stroke="#303853" stroke-width=".5"/>
          </g>
        </g>
        <path d="M446.077 220.425l-108.952 57.557 40.715 20.358 107.059-56.61-1.971-2.838-36.851-18.467z" fill="#fff"/>
        <g>
          <path d="M370.765 278.261V255.32h17.614v22.941c0 1.341-.86 2.682-2.579 3.704-3.437 2.045-9.019 2.045-12.457 0-1.719-1.022-2.578-2.363-2.578-3.704z" fill="#00c2d5"/>
          <clipPath id="_clip7">
            <path d="M370.765 278.261V255.32h17.614v22.941c0 1.341-.86 2.682-2.579 3.704-3.437 2.045-9.019 2.045-12.457 0-1.719-1.022-2.578-2.363-2.578-3.704z"/>
          </clipPath>
          <g clip-path="url(#_clip7)">
            <path fill="#3ed0de" d="M385.034 253.331h2.301v33.626h-2.301z"/>
          </g>
          <g>
            <path d="M373.343 251.615c3.438-2.044 9.02-2.044 12.457 0 3.438 2.045 3.438 5.365 0 7.41-3.437 2.044-9.019 2.044-12.457 0-3.438-2.045-3.438-5.365 0-7.41z" fill="#596276"/>
            <path d="M374.658 252.398c2.712-1.613 7.115-1.613 9.827 0 2.712 1.612 2.712 4.231 0 5.844-2.712 1.613-7.115 1.613-9.827 0-2.711-1.613-2.711-4.232 0-5.844z" fill="#303853"/>
            <path d="M375.188 252.962c2.419-1.439 6.348-1.439 8.768 0 2.419 1.439 2.419 3.776 0 5.215-2.42 1.439-6.349 1.439-8.768 0-2.42-1.439-2.42-3.776 0-5.215z" fill="#596276"/>
            <path d="M378.202 253.163c-.354-.211-.895-.232-1.206-.047l-1.129.672c-.312.185-.277.507.078.718l2.645 1.573c.355.211.895.232 1.207.046l1.129-.671c.311-.185.276-.507-.078-.718l-2.646-1.573z" fill="none" stroke="#303853" stroke-width=".5"/>
          </g>
        </g>
        <g>
          <path d="M391.774 268.233v-22.941h17.614v22.941c0 1.341-.859 2.682-2.578 3.705-3.438 2.044-9.02 2.044-12.457 0-1.719-1.023-2.579-2.364-2.579-3.705z" fill="#7fd800"/>
          <clipPath id="_clip8">
            <path d="M391.774 268.233v-22.941h17.614v22.941c0 1.341-.859 2.682-2.578 3.705-3.438 2.044-9.02 2.044-12.457 0-1.719-1.023-2.579-2.364-2.579-3.705z"/>
          </clipPath>
          <g clip-path="url(#_clip8)">
            <path fill="#c3ff1d" d="M406.044 243.303h2.301v33.626h-2.301z"/>
          </g>
          <g>
            <path d="M394.353 241.588c3.437-2.045 9.019-2.045 12.457 0 3.438 2.044 3.438 5.364 0 7.409-3.438 2.044-9.02 2.044-12.457 0-3.438-2.045-3.438-5.365 0-7.409z" fill="#596276"/>
            <path d="M395.668 242.37c2.712-1.613 7.115-1.613 9.827 0 2.711 1.613 2.711 4.232 0 5.845-2.712 1.612-7.115 1.612-9.827 0-2.712-1.613-2.712-4.232 0-5.845z" fill="#303853"/>
            <path d="M396.197 242.934c2.42-1.439 6.349-1.439 8.768 0 2.42 1.439 2.42 3.776 0 5.215-2.419 1.439-6.348 1.439-8.768 0-2.419-1.439-2.419-3.776 0-5.215z" fill="#596276"/>
            <path d="M399.212 243.135c-.355-.211-.895-.232-1.207-.046l-1.129.671c-.311.185-.276.507.078.718l2.646 1.573c.354.211.895.232 1.206.047l1.129-.672c.312-.185.277-.507-.077-.718l-2.646-1.573z" fill="none" stroke="#303853" stroke-width=".5"/>
          </g>
        </g>
        <g>
          <path d="M412.784 257.482v-22.941h17.614v22.941c0 1.341-.86 2.682-2.579 3.704-3.437 2.045-9.019 2.045-12.457 0-1.719-1.022-2.578-2.363-2.578-3.704z" fill="#7fd800"/>
          <clipPath id="_clip9">
            <path d="M412.784 257.482v-22.941h17.614v22.941c0 1.341-.86 2.682-2.579 3.704-3.437 2.045-9.019 2.045-12.457 0-1.719-1.022-2.578-2.363-2.578-3.704z"/>
          </clipPath>
          <g clip-path="url(#_clip9)">
            <path fill="#c3ff1d" d="M427.054 232.552h2.301v33.626h-2.301z"/>
          </g>
          <g>
            <path d="M415.362 230.836c3.438-2.044 9.02-2.044 12.457 0 3.438 2.045 3.438 5.365 0 7.409-3.437 2.045-9.019 2.045-12.457 0-3.437-2.044-3.437-5.364 0-7.409z" fill="#596276"/>
            <path d="M416.677 231.619c2.712-1.613 7.115-1.613 9.827 0 2.712 1.612 2.712 4.231 0 5.844-2.712 1.613-7.115 1.613-9.827 0-2.711-1.613-2.711-4.232 0-5.844z" fill="#303853"/>
            <path d="M417.207 232.183c2.419-1.439 6.348-1.439 8.768 0 2.419 1.439 2.419 3.776 0 5.215-2.42 1.439-6.349 1.439-8.768 0-2.42-1.439-2.42-3.776 0-5.215z" fill="#596276"/>
            <path d="M420.222 232.384c-.355-.211-.896-.232-1.207-.047l-1.129.672c-.312.185-.277.507.078.718l2.645 1.573c.355.211.895.232 1.207.046l1.129-.671c.312-.185.277-.507-.078-.718l-2.645-1.573z" fill="none" stroke="#303853" stroke-width=".5"/>
          </g>
        </g>
        <g>
          <path d="M433.794 246.266v-22.941h17.613v22.941c0 1.341-.859 2.682-2.578 3.704-3.438 2.045-9.02 2.045-12.457 0-1.719-1.022-2.578-2.363-2.578-3.704z" fill="#ff88b1"/>
          <clipPath id="_clip10">
            <path d="M433.794 246.266v-22.941h17.613v22.941c0 1.341-.859 2.682-2.578 3.704-3.438 2.045-9.02 2.045-12.457 0-1.719-1.022-2.578-2.363-2.578-3.704z"/>
          </clipPath>
          <g clip-path="url(#_clip10)">
            <path fill="#ffa0c0" d="M448.063 221.336h2.301v33.626h-2.301z"/>
          </g>
          <g>
            <path d="M436.372 219.62c3.437-2.044 9.019-2.044 12.457 0 3.438 2.045 3.438 5.365 0 7.41-3.438 2.044-9.02 2.044-12.457 0-3.438-2.045-3.438-5.365 0-7.41z" fill="#596276"/>
            <path d="M437.687 220.403c2.712-1.613 7.115-1.613 9.827 0 2.712 1.613 2.712 4.231 0 5.844-2.712 1.613-7.115 1.613-9.827 0-2.712-1.613-2.712-4.231 0-5.844z" fill="#303853"/>
            <path d="M438.216 220.967c2.42-1.439 6.349-1.439 8.768 0 2.42 1.439 2.42 3.776 0 5.215-2.419 1.439-6.348 1.439-8.768 0-2.419-1.439-2.419-3.776 0-5.215z" fill="#596276"/>
            <path d="M441.231 221.168c-.354-.211-.895-.232-1.207-.047l-1.129.672c-.311.185-.276.507.078.718l2.646 1.573c.354.211.895.232 1.207.046l1.129-.671c.311-.185.276-.507-.078-.718l-2.646-1.573z" fill="none" stroke="#303853" stroke-width=".5"/>
          </g>
        </g>
        <g>
          <path d="M454.803 236.241v-22.94h17.614v22.94c0 1.342-.86 2.683-2.578 3.705-3.438 2.045-9.02 2.045-12.458 0-1.718-1.022-2.578-2.363-2.578-3.705z" fill="#ff88b1"/>
          <clipPath id="_clip11">
            <path d="M454.803 236.241v-22.94h17.614v22.94c0 1.342-.86 2.683-2.578 3.705-3.438 2.045-9.02 2.045-12.458 0-1.718-1.022-2.578-2.363-2.578-3.705z"/>
          </clipPath>
          <g clip-path="url(#_clip11)">
            <path fill="#ffa0c0" d="M469.073 211.312h2.301v33.626h-2.301z"/>
          </g>
          <g>
            <path d="M457.381 209.596c3.438-2.044 9.02-2.044 12.458 0 3.437 2.045 3.437 5.365 0 7.409-3.438 2.045-9.02 2.045-12.458 0-3.437-2.044-3.437-5.364 0-7.409z" fill="#596276"/>
            <path d="M458.697 210.378c2.711-1.612 7.115-1.612 9.826 0 2.712 1.613 2.712 4.232 0 5.845-2.711 1.613-7.115 1.613-9.826 0-2.712-1.613-2.712-4.232 0-5.845z" fill="#303853"/>
            <path d="M459.226 210.943c2.42-1.439 6.348-1.439 8.768 0 2.42 1.439 2.42 3.776 0 5.215s-6.348 1.439-8.768 0c-2.42-1.439-2.42-3.776 0-5.215z" fill="#596276"/>
            <path d="M462.241 211.143c-.355-.21-.896-.231-1.207-.046l-1.129.672c-.312.185-.277.507.078.717l2.645 1.574c.355.211.896.231 1.207.046l1.129-.671c.312-.186.277-.507-.078-.718l-2.645-1.574z" fill="none" stroke="#303853" stroke-width=".5"/>
          </g>
        </g>
      </g>
      <g id="btn1">
        <path d="M484.874 241.739c0-1.071-.554-2.066-1.465-2.629a3.091 3.091 0 00-3.007-.135c-17.572 8.786-81.784 40.892-99.365 49.683-2.743 1.371-4.476 4.175-4.476 7.243v.001c0 1.071.554 2.066 1.465 2.629a3.091 3.091 0 003.007.135c17.573-8.786 81.784-40.892 99.365-49.683 2.743-1.371 4.476-4.175 4.476-7.243v-.001z" fill="#f45f5f"/>
        <g id="buttons-top" fill="#f9ce74">
          <path id="btn-blue" class="btn-blue btn"  d="M392.846 286.433c0-.73-.474-1.086-1.058-.794l-10.033 5.016c-.584.292-1.058 1.122-1.058 1.853v2.646c0 .73.474 1.086 1.058.794l10.033-5.016c.584-.292 1.058-1.123 1.058-1.853v-2.646z"/>
          <path id="btn-green" class="btn-green btn" d="M414.819 275.446c0-.73-.474-1.086-1.058-.794l-10.033 5.017c-.584.292-1.058 1.122-1.058 1.852v2.647c0 .73.474 1.086 1.058.793l10.033-5.016c.584-.292 1.058-1.122 1.058-1.852v-2.647z"/>
          <path id="btn-green" class="btn-green btn" d="M436.792 264.46c0-.73-.474-1.086-1.058-.794l-10.033 5.016c-.584.292-1.058 1.122-1.058 1.853v2.646c0 .73.474 1.086 1.058.794l10.033-5.016c.584-.292 1.058-1.122 1.058-1.853v-2.646z"/>
          <path id="btn-pink" class="btn-pink btn" d="M458.765 253.473c0-.73-.474-1.086-1.058-.793l-10.033 5.016c-.584.292-1.058 1.122-1.058 1.852v2.647c0 .73.474 1.086 1.058.793l10.033-5.016c.584-.292 1.058-1.122 1.058-1.852v-2.647z"/>
          <path id="btn-pink" class="btn-pink btn" d="M480.738 242.487c0-.73-.474-1.086-1.058-.794l-10.033 5.016c-.584.292-1.058 1.122-1.058 1.853v2.646c0 .73.474 1.086 1.058.794l10.033-5.016c.584-.292 1.058-1.122 1.058-1.853v-2.646z"/>
        </g>
      </g>
      
      
      <g id="btn">
        <path d="M484.874 278.238c0-1.071-.554-2.066-1.465-2.629a3.091 3.091 0 00-3.007-.135c-17.572 8.787-81.784 40.892-99.365 49.683-2.743 1.371-4.476 4.175-4.476 7.243v.001c0 1.071.554 2.066 1.465 2.629a3.091 3.091 0 003.007.135c17.573-8.786 81.784-40.892 99.365-49.682 2.743-1.372 4.476-4.176 4.476-7.243v-.002z" fill="#f45f5f"/>
        <g id="buttons-btm" fill="#f9ce74">
          <path id="btn-orange" class="btn-orange btn" d="M392.846 322.932c0-.73-.474-1.086-1.058-.794l-10.033 5.016c-.584.293-1.058 1.123-1.058 1.853v2.646c0 .73.474 1.086 1.058.794l10.033-5.016c.584-.292 1.058-1.122 1.058-1.853v-2.646z"/>
          <path id="btn-orange" class="btn-orange btn" d="M414.819 311.946c0-.731-.474-1.086-1.058-.794l-10.033 5.016c-.584.292-1.058 1.122-1.058 1.852v2.647c0 .73.474 1.086 1.058.794l10.033-5.017c.584-.292 1.058-1.122 1.058-1.852v-2.646z"/>
          <path id="btn-yellow" class="btn-yellow btn" d="M436.792 300.959c0-.73-.474-1.086-1.058-.794l-10.033 5.016c-.584.293-1.058 1.123-1.058 1.853v2.646c0 .73.474 1.086 1.058.794l10.033-5.016c.584-.292 1.058-1.122 1.058-1.853v-2.646z"/>
          <path id="btn-yellow" class="btn-yellow btn" d="M458.765 289.973c0-.731-.474-1.086-1.058-.794l-10.033 5.016c-.584.292-1.058 1.122-1.058 1.852v2.647c0 .73.474 1.086 1.058.794l10.033-5.017c.584-.292 1.058-1.122 1.058-1.852v-2.646z"/>
          <path id="btn-blue" class="btn-blue btn" d="M480.738 278.986c0-.73-.474-1.086-1.058-.794l-10.033 5.016c-.584.293-1.058 1.123-1.058 1.853v2.646c0 .731.474 1.086 1.058.794l10.033-5.016c.584-.292 1.058-1.122 1.058-1.853v-2.646z"/>
        </g>
      </g>
      
      
      
      <path id="door-coin" d="M492.473 351.311c0-.901-.466-1.737-1.232-2.21a2.5962 2.5962 0 00-2.528-.114c-1.701.851-3.708 1.854-5.41 2.705-2.307 1.153-3.764 3.511-3.764 6.091v.002c0 .9.466 1.737 1.232 2.21.766.473 1.722.516 2.528.114 1.701-.851 3.707-1.854 5.409-2.705 2.307-1.154 3.765-3.512 3.765-6.091v-.002z" fill="#596276"/>
      <clipPath id="_clip12">
        <path d="M492.473 351.311c0-.901-.466-1.737-1.232-2.21a2.5962 2.5962 0 00-2.528-.114c-1.701.851-3.708 1.854-5.41 2.705-2.307 1.153-3.764 3.511-3.764 6.091v.002c0 .9.466 1.737 1.232 2.21.766.473 1.722.516 2.528.114 1.701-.851 3.707-1.854 5.409-2.705 2.307-1.154 3.765-3.512 3.765-6.091v-.002z"/>
      </clipPath>
      <g clip-path="url(#_clip12)">
        <path d="M496.369 340.156l-20.415 10.208v9.21l20.415-10.208v-9.21z" fill="#303853"/>
        <g id="coins">
          <g  class="coin">
            <ellipse  cx="483.057" cy="356.164" rx="2.313" ry="2.381" fill="#f9ce74"/>
            <ellipse cx="483.057" cy="356.164" rx="1.801" ry="1.854" fill="#f7d794"/>
          </g>
          <g class="coin">
            <ellipse cx="484.037" cy="352.44" rx="2.313" ry="2.381" fill="#f9ce74"/>
            <ellipse cx="484.037" cy="352.44" rx="1.801" ry="1.854" fill="#f7d794"/>
          </g>
          <g class="coin">
            <ellipse cx="488.315" cy="355.596" rx="2.313" ry="2.381" fill="#f9ce74"/>
            <ellipse cx="488.315" cy="355.596" rx="1.801" ry="1.854" fill="#f7d794"/>
          </g>
          <g class="coin">
            <ellipse cx="486.867" cy="349.824" rx="2.313" ry="2.381" fill="#f9ce74"/>
            <ellipse cx="486.867" cy="349.824" rx="1.801" ry="1.854" fill="#f7d794"/>
          </g>
        </g>
      </g>
      <path id="ad" d="M428.911 332.189a4.985 4.985 0 00-2.365-4.241 4.9839 4.9839 0 00-4.851-.218c-11.753 5.876-34.509 17.254-42.378 21.188a4.9878 4.9878 0 00-2.756 4.46v19.806c0 1.728.895 3.333 2.365 4.242 1.47.908 3.305.991 4.851.218 11.753-5.877 34.509-17.254 42.378-21.189 1.689-.844 2.756-2.571 2.756-4.46v-19.806z" fill="#f9ce74"/>
      <clipPath id="_clip13">
        <path d="M428.911 332.189a4.985 4.985 0 00-2.365-4.241 4.9839 4.9839 0 00-4.851-.218c-11.753 5.876-34.509 17.254-42.378 21.188a4.9878 4.9878 0 00-2.756 4.46v19.806c0 1.728.895 3.333 2.365 4.242 1.47.908 3.305.991 4.851.218 11.753-5.877 34.509-17.254 42.378-21.189 1.689-.844 2.756-2.571 2.756-4.46v-19.806z"/>
      </clipPath>
      <g clip-path="url(#_clip13)">
        <g id="tire-front">
          <g id="tire">
            <path d="M402.736 339.985c6.898-3.449 12.499-.649 12.499 6.25 0 6.898-5.601 15.299-12.499 18.748-6.898 3.449-12.499.649-12.499-6.25 0-6.898 5.601-15.299 12.499-18.748z" fill="#fff"/>
            <g fill="#f45f5f">
              <path d="M409.07 350.754c0-2.456-1.595-3.653-3.56-2.67l-5.548 2.773c-1.965.983-3.56 3.775-3.56 6.231 0 2.457 1.595 3.653 3.56 2.671l5.548-2.774c1.965-.982 3.56-3.774 3.56-6.231z"/>
              <path d="M406.72 346.121a.783.783 0 011.456.332c.097 1.19.207 2.539.276 3.394.04.49-.298.931-.782 1.02h-.002a1.9451 1.9451 0 01-1.944-.797 1.944 1.944 0 01-.086-2.1c.37-.633.745-1.273 1.082-1.849z"/>
              <path d="M398.752 349.91a.7589.7589 0 00-.761-.067.7584.7584 0 00-.434.629c-.033.439-.071.954-.112 1.494a1.916 1.916 0 001.025 1.842c.679.355 1.504.27 2.097-.215.001 0 .002-.001.002-.001.373-.305.583-.766.566-1.247a1.542 1.542 0 00-.649-1.206c-.578-.409-1.213-.859-1.734-1.229z"/>
            </g>
          </g>
        </g>
        <path d="M414.462 328.274l-4.826 2.412-17.225 47.147 4.826-2.413 17.225-47.146z" fill="#fff" fill-opacity=".25"/>
        <path d="M428.358 321.326l-11.408 5.703-17.225 47.147 11.408-5.704 17.225-47.146z" fill="#fff" fill-opacity=".25"/>
      </g>
      <path id="door-drink" d="M467.396 354.373c0-1.733-.897-3.342-2.371-4.253a5.0007 5.0007 0 00-4.865-.219c-15.827 7.913-52.938 26.469-63.357 31.678a4.9996 4.9996 0 00-2.764 4.472v10.597c0 1.733.898 3.342 2.372 4.254 1.474.911 3.314.993 4.864.218 15.827-7.913 52.938-26.468 63.357-31.678a4.9996 4.9996 0 002.764-4.472v-10.597z" fill="#596276"/>
      <clipPath id="_clip14">
        <path d="M467.396 354.373c0-1.733-.897-3.342-2.371-4.253a5.0007 5.0007 0 00-4.865-.219c-15.827 7.913-52.938 26.469-63.357 31.678a4.9996 4.9996 0 00-2.764 4.472v10.597c0 1.733.898 3.342 2.372 4.254 1.474.911 3.314.993 4.864.218 15.827-7.913 52.938-26.468 63.357-31.678a4.9996 4.9996 0 002.764-4.472v-10.597z"/>
      </clipPath>
      <g clip-path="url(#_clip14)">
        <path d="M472.726 340.609l-84.003 42.001v16.372l84.003-42.002v-16.371z" fill="#303853"/>
        <g id="can-in">
          <path id="can-color-base" class="can-base" d="M420.737 376.226h-.357l-4.605-2.303 18.601-9.229.014-.01c1.192-.631 2.908-.819 4.862.158 1.961.98 3.718 2.739 4.876 4.727l.447.765.192.451c.582 1.226.905 2.5.905 3.686 0 1.658-.63 2.855-1.677 3.456l-.025.014-10.079 5.04-8.787 4.352c-3.515-.143-6.371-3.727-6.371-5.298 0-.777 1.287-1.238 2.672-1.648l-.668-4.161z" fill="#ff88b1"/>
          <clipPath id="_clip15">
            <path id="can-color-base1" d="M420.737 376.226h-.357l-4.605-2.303 18.601-9.229.014-.01c1.192-.631 2.908-.819 4.862.158 1.961.98 3.718 2.739 4.876 4.727l.447.765.192.451c.582 1.226.905 2.5.905 3.686 0 1.658-.63 2.855-1.677 3.456l-.025.014-10.079 5.04-8.787 4.352c-3.515-.143-6.371-3.727-6.371-5.298 0-.777 1.287-1.238 2.672-1.648l-.668-4.161z"/>
          </clipPath>
          <g clip-path="url(#_clip15)">
            <path id="can-color-shadow" class="can-light" d="M448.987 363.991l-1.019-2.046-40.92 20.382 1.019 2.046 40.92-20.382z" fill="#ffa0c0"/>
          </g>
          <g>
            <path d="M424.655 378.391c1.22 1.768 1.974 3.784 1.974 5.598 0 1.571-.566 2.728-1.525 3.344l-.013.01c-1.158.833-2.917.838-4.881-.144-1.972-.986-3.737-2.759-4.895-4.76l-.428-.733c-.197-.462-.395-.924-.592-1.386l-.249-.927-.008-.029a6.634 6.634 0 01-.248-1.794c0-3.544 2.876-4.982 6.42-3.21 1.714.857 3.273 2.31 4.416 3.989l.029.042z" fill="#596276"/>
            <path d="M419.272 376.463c2.641 1.32 4.785 4.537 4.785 7.178s-2.144 3.713-4.785 2.392c-2.641-1.32-4.785-4.537-4.785-7.178s2.144-3.713 4.785-2.392z" fill="#303853"/>
          </g>
        </g>
      </g>
      <g id="bars">
        <path d="M492.473 300.431c0-1.733-.898-3.342-2.372-4.253a4.9986 4.9986 0 00-4.864-.219c-6.657 3.328-16.178 8.089-20.825 10.412a4.9996 4.9996 0 00-2.764 4.472v8.874c0 1.733.897 3.343 2.371 4.254 1.474.911 3.315.993 4.865.218 6.657-3.328 16.178-8.089 20.825-10.412a4.9996 4.9996 0 002.764-4.472v-8.874z" fill="#303853"/>
        <path d="M485.225 298.647c2.317-1.159 4.199-.218 4.199 2.099 0 2.318-1.882 5.14-4.199 6.299-2.318 1.158-4.199.218-4.199-2.1 0-2.317 1.881-5.139 4.199-6.298z" fill="#596276"/>
        <path d="M487.766 301.574c0-.128-.066-.247-.175-.315a.3722.3722 0 00-.36-.016c-.977.488-3.034 1.517-4.011 2.005a.971.971 0 00-.536.868v.001c0 .129.066.248.175.315.109.068.245.074.36.016.976-.488 3.034-1.517 4.011-2.005.328-.164.536-.5.536-.868v-.001z" fill="#303853"/>
        <g id="change-bar" fill="#596276">
          <path d="M469.132 307.229c1.879-.939 3.405-.177 3.405 1.702s-1.526 4.168-3.405 5.107c-1.878.939-3.404.177-3.404-1.702s1.526-4.167 3.404-5.107z"/>
          <path id="bar" d="M478.106 304.911c0-.465-.24-.896-.635-1.14a1.3376 1.3376 0 00-1.304-.059c-2.638 1.319-7.035 3.517-7.035 3.517v3.405s5.473-2.737 7.871-3.936a1.9956 1.9956 0 001.103-1.785v-.002z"/>
        </g>
        <path d="M478.929 314.812c0-.443-.23-.855-.607-1.089a1.2829 1.2829 0 00-1.246-.056c-2.932 1.467-8.558 4.279-10.966 5.484a2.0606 2.0606 0 00-1.14 1.844v.002c0 .443.23.855.607 1.088.377.234.848.255 1.245.056 2.933-1.466 8.559-4.279 10.967-5.483a2.0606 2.0606 0 001.14-1.844v-.002z" fill="#596276"/>
      </g>
    </g>
    
    <g id="cats" fill="#fff">
    <g>
      <path d="M311.111 384.659c.866.434 1.57 1.778 1.57 3.001 0 1.223-.704 1.864-1.57 1.431-.866-.433-1.569-1.778-1.569-3.001 0-1.222.703-1.864 1.569-1.431z"/>
      <path d="M314.758 383.055c.866.433 1.569 1.777 1.569 3s-.703 1.864-1.569 1.431c-.866-.433-1.57-1.778-1.57-3 0-1.223.704-1.864 1.57-1.431z"/>
      <path d="M318.955 384.986c.866.433 1.569 1.778 1.569 3.001 0 1.223-.703 1.864-1.569 1.431-.866-.433-1.57-1.778-1.57-3.001 0-1.223.704-1.864 1.57-1.431z"/>
      <path d="M322.358 390.224c.866.433 1.569 1.777 1.569 3s-.703 1.864-1.569 1.431c-.866-.433-1.569-1.778-1.569-3 0-1.223.703-1.864 1.569-1.431z"/>
      <path d="M317.468 396.751a.879.879 0 00-1.014-.351c-.88.309-2.078-.411-2.744-1.351-.834-1.175-.834-2.692 0-3.792.312-.453.887-.775 1.546-.996.891-.371 1.92-.12 2.539.619 1.093 1.172 2.123 2.584 2.583 3.711.834 1.934.834 3.451 0 3.793-.709.291-2.021-.269-2.91-1.633z"/>
    </g>
    <g>
      <path d="M332.961 360.637c.866.433 1.569 1.777 1.569 3s-.703 1.864-1.569 1.431c-.866-.433-1.569-1.778-1.569-3.001 0-1.222.703-1.864 1.569-1.43z"/>
      <path d="M336.608 359.032c.866.433 1.569 1.777 1.569 3s-.703 1.864-1.569 1.431c-.867-.433-1.57-1.777-1.57-3s.703-1.864 1.57-1.431z"/>
      <path d="M340.805 360.963c.866.433 1.569 1.778 1.569 3.001 0 1.223-.703 1.864-1.569 1.431-.866-.433-1.57-1.778-1.57-3.001 0-1.223.704-1.864 1.57-1.431z"/>
      <path d="M344.208 366.201c.866.433 1.569 1.777 1.569 3s-.703 1.864-1.569 1.431c-.866-.433-1.57-1.777-1.57-3s.704-1.864 1.57-1.431z"/>
      <path d="M339.318 372.728a.879.879 0 00-1.014-.351c-.88.31-2.078-.411-2.744-1.35-.834-1.176-.834-2.693 0-3.793.312-.453.887-.775 1.546-.996.891-.371 1.919-.12 2.539.619 1.093 1.172 2.123 2.584 2.583 3.711.834 1.934.834 3.451 0 3.793-.709.291-2.021-.269-2.91-1.633z"/>
    </g>
    <g>
      <path d="M311.524 323.001c.866.433 1.569 1.777 1.569 3s-.703 1.864-1.569 1.431c-.866-.433-1.569-1.777-1.569-3s.703-1.864 1.569-1.431z"/>
      <path d="M315.171 321.396c.866.433 1.569 1.778 1.569 3 0 1.223-.703 1.864-1.569 1.431-.867-.433-1.57-1.777-1.57-3s.703-1.864 1.57-1.431z"/>
      <path d="M319.368 323.328c.866.433 1.569 1.777 1.569 3s-.703 1.864-1.569 1.431c-.866-.433-1.57-1.778-1.57-3 0-1.223.704-1.864 1.57-1.431z"/>
      <path d="M322.771 328.565c.866.433 1.569 1.778 1.569 3 0 1.223-.703 1.864-1.569 1.431-.866-.433-1.57-1.777-1.57-3s.704-1.864 1.57-1.431z"/>
      <path d="M317.881 335.092a.8817.8817 0 00-1.014-.351c-.88.31-2.078-.411-2.744-1.35-.834-1.175-.834-2.693 0-3.793.312-.453.887-.774 1.546-.996.891-.371 1.919-.12 2.539.62 1.093 1.171 2.123 2.583 2.583 3.711.834 1.933.834 3.45 0 3.792-.709.291-2.021-.269-2.91-1.633z"/>
    </g>
    <g>
      <path d="M335.221 299.026c.866.433 1.569 1.777 1.569 3s-.703 1.864-1.569 1.431c-.867-.433-1.57-1.777-1.57-3s.703-1.864 1.57-1.431z"/>
      <path d="M338.867 297.421c.866.433 1.57 1.778 1.57 3 0 1.223-.704 1.864-1.57 1.431-.866-.433-1.569-1.777-1.569-3s.703-1.864 1.569-1.431z"/>
      <path d="M343.064 299.353c.867.433 1.57 1.777 1.57 3s-.703 1.864-1.57 1.431c-.866-.433-1.569-1.778-1.569-3 0-1.223.703-1.864 1.569-1.431z"/>
      <path d="M346.467 304.59c.867.433 1.57 1.778 1.57 3 0 1.223-.703 1.865-1.57 1.431-.866-.433-1.569-1.777-1.569-3s.703-1.864 1.569-1.431z"/>
      <path d="M341.577 311.117a.8807.8807 0 00-1.014-.351c-.88.31-2.078-.411-2.744-1.35-.833-1.175-.833-2.693 0-3.793.313-.453.888-.774 1.547-.996.89-.371 1.919-.12 2.539.62 1.092 1.171 2.123 2.583 2.583 3.711.834 1.933.834 3.451 0 3.792-.709.291-2.021-.269-2.911-1.633z"/>
    </g>
    <g>
      <path d="M315.808 267.273c.866.433 1.569 1.777 1.569 3s-.703 1.864-1.569 1.431c-.867-.433-1.57-1.777-1.57-3s.703-1.864 1.57-1.431z"/>
      <path d="M319.454 265.668c.866.433 1.57 1.778 1.57 3 0 1.223-.704 1.864-1.57 1.431-.866-.433-1.569-1.777-1.569-3s.703-1.864 1.569-1.431z"/>
      <path d="M323.651 267.6c.867.433 1.57 1.777 1.57 3s-.703 1.864-1.57 1.431c-.866-.433-1.569-1.778-1.569-3 0-1.223.703-1.864 1.569-1.431z"/>
      <path d="M327.054 272.837c.867.433 1.57 1.778 1.57 3 0 1.223-.703 1.864-1.57 1.431-.866-.433-1.569-1.777-1.569-3s.703-1.864 1.569-1.431z"/>
      <path d="M322.164 279.364a.8807.8807 0 00-1.014-.351c-.88.31-2.078-.411-2.744-1.35-.833-1.176-.833-2.693 0-3.793.313-.453.888-.774 1.547-.996.89-.371 1.919-.12 2.539.62 1.092 1.171 2.123 2.583 2.583 3.711.833 1.933.833 3.45 0 3.792-.709.291-2.022-.269-2.911-1.633z"/>
    </g>
  </g>
  </g>
  
  
  <g id="can-out">
    <path id="can-color-base2" class="can-base" d="M420.737 376.221c-.231-.001-.357 0-.357 0l-4.605-2.303 18.601-9.23.014-.009c1.192-.631 2.908-.819 4.862.158 1.961.98 3.718 2.739 4.876 4.727l.447.765.192.451c.582 1.226.905 2.499.905 3.686 0 1.658-.63 2.855-1.677 3.456l-.025.014-10.079 5.04-8.787 4.352c-3.515-.143-6.371-3.727-6.371-5.298 0-.777 1.287-1.238 2.672-1.648l-.668-4.161z" fill="#ff88b1"/>
    <clipPath id="_clip16">
      <path id="can-color-base3" d="M420.737 376.221c-.231-.001-.357 0-.357 0l-4.605-2.303 18.601-9.23.014-.009c1.192-.631 2.908-.819 4.862.158 1.961.98 3.718 2.739 4.876 4.727l.447.765.192.451c.582 1.226.905 2.499.905 3.686 0 1.658-.63 2.855-1.677 3.456l-.025.014-10.079 5.04-8.787 4.352c-3.515-.143-6.371-3.727-6.371-5.298 0-.777 1.287-1.238 2.672-1.648l-.668-4.161z"/>
    </clipPath>
    <g clip-path="url(#_clip16)">
      <path id="can-color-light"  class="can-light" d="M448.987 363.985l-1.019-2.045-40.92 20.382 1.019 2.046 40.92-20.383z" fill="#ffa0c0"/>
    </g>
    <g>
      <path d="M424.655 378.385c1.22 1.769 1.974 3.785 1.974 5.599 0 1.571-.566 2.728-1.525 3.344l-.013.01c-1.158.833-2.917.838-4.881-.145-1.972-.985-3.737-2.758-4.895-4.76l-.428-.732c-.197-.462-.395-.924-.592-1.387l-.249-.926-.008-.029a6.6412 6.6412 0 01-.248-1.795c0-3.543 2.876-4.981 6.42-3.209 1.714.857 3.273 2.31 4.416 3.989l.029.041z" fill="#596276"/>
      <path d="M419.272 376.458c2.641 1.32 4.785 4.536 4.785 7.177s-2.144 3.714-4.785 2.393c-2.641-1.32-4.785-4.537-4.785-7.178s2.144-3.713 4.785-2.392z" fill="#303853"/>
    </g>
  </g>
  
  
  
  
  <path id="can-line" d="M433 368.49s74.684-50.413 88.949 44.475c0 0 45.484-23.581 59.068 29.534 0 0 21.214-11.661 30.576 15.288L638 470.99" fill="none" stroke="red" stroke-width=".5"/>
</svg>
</div>
              
            
!

CSS

              
                body,html{
  margin: 0;
  padding: 0;
  background: #F7D794;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;  
}


.box{
  width: 800px;
  height: 600px;
  overflow: hidden;
}

#can-line{
  display:none;
}

.btn, #change-bar{
  cursor: pointer;
}

$pink: #FF88B1;
$pink-l: #FFA0C0;
$green: #7FD800;
$green-l: #C3FF1D;
$blue: #00C2D5;
$blue-l: #3ED0DE;
$yellow: #FFF356;
$yellow-l: #FFFCA2;
$orange: #FC8D5D;
$orange-l: #F3A683;

// btn-pink
.pink{fill: $pink;}
.pink-l{fill: $pink-l;}
// btn-green
.green{fill:$green;}
.green-l{fill:$green-l;}
// btn-blue
.blue{fill:$blue;}
.blue-l{fill:$blue-l;}
// btn-yellow
.yellow{fill:$yellow;}
.yellow-l{fill:$yellow-l;}
// btn-orange
.orange{fill:$orange;}
.orange-l{fill:$orange-l;}



// #btn-check{
//   fill: red;
// }


// #btn-pink
// #btn-green
// #btn-blue
// #btn-yellow
// #btn-orange


#can-out{
  // display:none;
}
              
            
!

JS

              
                console.clear();
// GSDevTools.create({
//   minimal:true
// });

//change drop//
let change = gsap.timeline();
gsap.set(".coin",{y:-30});

 $('#change-bar').click(function() {
   if(!change.isActive()){

  change
  .to("#bar",{rotation: 30, transformOrigin:"left center"})
     .to("#bar",{rotation: 0, transformOrigin:"left center"})
  .to(".coin",{
  y:0,
  ease: "bounce.out",
  stagger: 0.2})
  .to(".coin",{opacity: 0, delay: 1});
  
 
   change.restart();
 } 
 });








//BUYING DRINK///
gsap.set("#can-in",{y:-100}); 
gsap.set("#can-out",{opacity: 0})

let tl = gsap.timeline({paused: true});
tl
  .to("#can-in",{y:0, ease: "power1.in"})        //Can-in
  .to("#can-in",{opacity:0, duration:0},"can")  
  .to("#can-out",{opacity:1, duration:0},"can")  //Can-Out
  .to("#can-out",{ motionPath: {
        path: "#can-line",
        align: "#can-line",
        alignOrigin: [0.5, 0.5],
        // autoRotate: true
    },
    duration: "random(1.5, 3)",
    ease: "power4.out"},"can")
    .to("#can-out",{opacity:0, duration:0.5},"-=1") 
  
      //BOUNCE
let vending = gsap.timeline({paused: true});
CustomWiggle.create("myWiggle", {wiggles:6, type:"random"}); //Give wiggles

vending
  .to('#vending',{
  scaleY: 0.95,
  transformOrigin: "bottom",
  ease:"myWiggle"
})
.to('#vending',{
    scaleY: 1
});

//COLOR CHANGE///

$('.btn-orange').click(function() {
   if(!tl.isActive()){
    //avoid overlapping
     $(".can-base").addClass("orange").removeClass("blue yellow green pink");
     $(".can-light").addClass("orange-l").removeClass("blue-l yellow-l green-l pink-l");

    tl.restart();
     vending.restart();
  } 
});

$('.btn-yellow').click(function() {
   if(!tl.isActive()){
    //avoid overlapping
     $(".can-base").addClass("yellow").removeClass("blue orange green pink");
     $(".can-light").addClass("yellow-l").removeClass("blue-l orange-l green-l pink-l");

    tl.restart();
     vending.restart();
  } 
});

$('.btn-blue').click(function() {
   if(!tl.isActive()){
    //avoid overlapping
     $(".can-base").addClass("blue").removeClass("orange yellow green pink");
     $(".can-light").addClass("blue-l").removeClass("orange-l yellow-l green-l pink-l");

    tl.restart();
     vending.restart();
  } 
});


$('.btn-green').click(function() {
   if(!tl.isActive()){
    //avoid overlapping
     $(".can-base").addClass("green").removeClass("blue yellow orange pink");
     $(".can-light").addClass("green-l").removeClass("blue-l yellow-l orange-l pink-l");

    tl.restart();
     vending.restart();
  } 
});

$('.btn-pink').click(function() {
   if(!tl.isActive()){
    //avoid overlapping
     $(".can-base").addClass("pink").removeClass("blue yellow green orange");
     $(".can-light").addClass("pink-l").removeClass("blue-l yellow-l green-l orange-l");

    tl.restart();
     vending.restart();
  } 
});


              
            
!
999px

Console