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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <svg width="271" height="271" viewBox="0 0 271 271" fill="none" xmlns="http://www.w3.org/2000/svg">

  <!-- Morph targets -->
  <svg class="morph-targets" width="89" height="89" viewBox="0 0 89 89" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="bottle" d="M50.231 38.379L50.236 38.384C51.5216 39.8012 52.2568 41.6322 52.308 43.545V66.617C52.308 66.726 52.276 66.888 52.204 67.093C52.1302 67.2998 52.0423 67.5012 51.941 67.696C51.8363 67.9002 51.7232 68.1001 51.602 68.295C51.4076 68.4162 51.2081 68.5289 51.004 68.633C50.8089 68.7337 50.6075 68.8216 50.401 68.896C50.2485 68.9556 50.0875 68.9907 49.924 69H38.484L36.681 68.255L36.64 68.188C36.5435 68.0271 36.4525 67.863 36.367 67.696C36.2661 67.501 36.1782 67.2996 36.104 67.093C36.0444 66.9405 36.0093 66.7795 36 66.616V43.545C36.0507 41.6321 36.7859 39.8009 38.072 38.384L38.075 38.381C38.582 37.813 39.176 37.136 39.647 36.4C40.116 35.667 40.493 34.83 40.519 33.938V33.93L40.616 26.942L40.657 24.04L40.669 23.171L40.672 22.935L40.673 22.874V22.853L40.173 22.846L40.673 22.853L40.678 22.489L40.335 22.373H40.334L40.333 22.372L40.322 22.368C40.2007 22.3249 40.0844 22.2689 39.975 22.201C39.9611 22.1914 39.9477 22.1811 39.935 22.17L39.933 22.168C39.8903 22.1092 39.8622 22.0411 39.8509 21.9693C39.8396 21.8975 39.8455 21.8241 39.868 21.755L39.869 21.754L40.348 20.316C40.3806 20.2243 40.4405 20.1448 40.5198 20.0883C40.599 20.0318 40.6937 20.0009 40.791 20H47.517C47.717 20.002 47.893 20.128 47.96 20.316L48.439 21.753V21.754C48.4617 21.8232 48.4677 21.8968 48.4564 21.9688C48.4451 22.0408 48.4168 22.1091 48.374 22.168L48.373 22.17C48.3602 22.1811 48.3469 22.1914 48.333 22.201C48.293 22.228 48.241 22.257 48.183 22.285C48.1188 22.3159 48.053 22.3436 47.986 22.368L47.975 22.372L47.974 22.373H47.973L47.63 22.489L47.635 22.853L48.135 22.846L47.635 22.853V22.874L47.636 22.935L47.639 23.171L47.651 24.04L47.691 26.942L47.789 33.93H47.788L47.789 33.941C47.821 34.831 48.2 35.665 48.668 36.397C49.138 37.132 49.728 37.809 50.231 38.379V38.379Z" stroke="#465A50"/>
<path class="candy" d="M59.057 24.659C57.049 22.6 56.337 21 56.337 21C54.9371 22.3594 54.0113 24.1329 53.6964 26.0587C53.3815 27.9845 53.6941 29.9605 54.588 31.695C49.825 29.215 42.515 31.038 36.948 36.467C31.381 41.896 29.376 49.158 31.735 53.982C28.329 52.1 23.946 52.589 21 55.462C21 55.462 21.417 58.497 23.424 60.555C25.432 62.614 28.89 62.683 30.897 64.741C32.905 66.8 33.617 68.399 33.617 68.399C35.017 67.0398 35.9428 65.2665 36.2578 63.3409C36.5727 61.4152 36.2601 59.4393 35.366 57.705C40.129 60.184 47.439 58.362 53.006 52.933C58.573 47.504 60.575 40.239 58.219 35.418C59.9303 36.356 61.8979 36.7186 63.8311 36.4521C65.7643 36.1855 67.5604 35.3041 68.954 33.938C68.954 33.938 68.537 30.903 66.53 28.844C64.522 26.786 61.064 26.717 59.057 24.658V24.659Z" stroke="#465A50" stroke-miterlimit="10"/>
<path class="pretzel" d="M68.9982 41.4825C68.9982 41.4586 68.9965 41.4356 68.9939 41.4126C68.9562 32.9073 62.1085 26 53.6989 26C50.3345 26 47.1652 27.0869 44.4991 29.1277C41.9362 27.1666 38.7477 26 35.2941 26C26.8609 26 20 32.9454 20 41.4825C20 48.2782 23.3373 54.8073 29.3949 59.9298L29.3905 59.9342C28.8708 60.4603 28.5846 61.161 28.5846 61.9086C28.5846 62.6562 28.8708 63.3577 29.3905 63.883L30.1439 64.6439C30.6628 65.1709 31.3549 65.4606 32.0934 65.4606C32.8319 65.4606 33.5249 65.1709 34.0437 64.6448L34.8356 63.8431C37.7791 65.2763 41.1146 66 44.4562 66C47.7979 66 51.1736 65.2675 54.1355 63.8201L54.951 64.6456C55.4699 65.1718 56.1629 65.4614 56.9014 65.4614C57.6399 65.4614 58.3329 65.1718 58.8509 64.6456L59.6042 63.8839C60.6796 62.7953 60.6796 61.0228 59.6042 59.9351L59.5736 59.9032C65.6531 54.7754 69 48.2552 69 41.4834L68.9982 41.4825ZM48.7096 48.9054C49.9346 46.6404 50.5874 44.0832 50.5874 41.4816C50.5874 38.8801 49.9346 36.3751 48.7875 34.2041C50.2374 33.1987 51.9235 32.6619 53.698 32.6619C58.5026 32.6619 62.4104 36.6178 62.4104 41.4808C62.4104 46.6502 59.956 51.7097 55.4996 55.7799L48.7087 48.9045L48.7096 48.9054ZM33.328 55.9473C33.3184 55.9367 33.314 55.9234 33.3044 55.9136C28.7299 51.6787 26.2808 46.4278 26.4076 41.13C26.524 36.2679 30.5219 32.3882 35.33 32.5273C37.1071 32.5707 38.7836 33.1509 40.2107 34.1961C39.033 36.4283 38.4056 38.935 38.4056 41.4825C38.4056 44.03 39.0566 46.6608 40.2773 48.9133L33.328 55.9473ZM49.7981 59.4302C46.411 60.6109 42.5207 60.641 39.1109 59.5143L44.4965 54.0632L49.7981 59.4302Z" stroke="#465A50"/>
</svg>


  
  <!-- Grid -->
  <path d="M6.10352e-05 270.5H270" stroke="#465A50" />
  <path d="M6.10352e-05 180.5H270" stroke="#465A50" />
  <path d="M6.10352e-05 90.5H270" stroke="#465A50" />
  <path d="M6.10352e-05 0.5H270" stroke="#465A50" />
  <path d="M0.500061 1V271" stroke="#465A50" />
  <path d="M90.5001 1V271" stroke="#465A50" />
  <path d="M180.5 1V271" stroke="#465A50" />
  <path d="M270.5 1V271" stroke="#465A50" />

  <!-- Drops -->
  <svg x="1" y="1" width="89" height="89" viewBox="0 0 89 89" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path class="drop" d="M26 50.261C26 42.234 30.63 34.629 35.345 28.986C37.3471 26.6002 39.5116 24.3555 41.823 22.268C42.709 21.468 43.449 20.844 43.969 20.422C44.187 20.245 44.366 20.104 44.5 20C44.634 20.104 44.813 20.245 45.031 20.422C45.551 20.844 46.291 21.468 47.177 22.268C49.4884 24.3555 51.6529 26.6002 53.655 28.986C58.37 34.629 63 42.234 63 50.261C63 60.55 54.717 68.88 44.5 68.88C34.283 68.88 26 60.55 26 50.261V50.261Z" stroke="#465A50" />
  </svg>
  <svg x="91" y="1" width="89" height="89" viewBox="0 0 89 89" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path class="drop" d="M26 50.261C26 42.234 30.63 34.629 35.345 28.986C37.3471 26.6002 39.5116 24.3555 41.823 22.268C42.709 21.468 43.449 20.844 43.969 20.422C44.187 20.245 44.366 20.104 44.5 20C44.634 20.104 44.813 20.245 45.031 20.422C45.551 20.844 46.291 21.468 47.177 22.268C49.4884 24.3555 51.6529 26.6002 53.655 28.986C58.37 34.629 63 42.234 63 50.261C63 60.55 54.717 68.88 44.5 68.88C34.283 68.88 26 60.55 26 50.261V50.261Z" stroke="#465A50" />
  </svg>
  <svg x="181" y="1" width="89" height="89" viewBox="0 0 89 89" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path class="drop" d="M26 50.261C26 42.234 30.63 34.629 35.345 28.986C37.3471 26.6002 39.5116 24.3555 41.823 22.268C42.709 21.468 43.449 20.844 43.969 20.422C44.187 20.245 44.366 20.104 44.5 20C44.634 20.104 44.813 20.245 45.031 20.422C45.551 20.844 46.291 21.468 47.177 22.268C49.4884 24.3555 51.6529 26.6002 53.655 28.986C58.37 34.629 63 42.234 63 50.261C63 60.55 54.717 68.88 44.5 68.88C34.283 68.88 26 60.55 26 50.261V50.261Z" stroke="#465A50" />
  </svg>

  <svg x="1" y="91" width="89" height="89" viewBox="0 0 89 89" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path class="drop" d="M26 50.261C26 42.234 30.63 34.629 35.345 28.986C37.3471 26.6002 39.5116 24.3555 41.823 22.268C42.709 21.468 43.449 20.844 43.969 20.422C44.187 20.245 44.366 20.104 44.5 20C44.634 20.104 44.813 20.245 45.031 20.422C45.551 20.844 46.291 21.468 47.177 22.268C49.4884 24.3555 51.6529 26.6002 53.655 28.986C58.37 34.629 63 42.234 63 50.261C63 60.55 54.717 68.88 44.5 68.88C34.283 68.88 26 60.55 26 50.261V50.261Z" stroke="#465A50" />
  </svg>
  <svg x="91" y="91" width="89" height="89" viewBox="0 0 89 89" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path class="drop" d="M26 50.261C26 42.234 30.63 34.629 35.345 28.986C37.3471 26.6002 39.5116 24.3555 41.823 22.268C42.709 21.468 43.449 20.844 43.969 20.422C44.187 20.245 44.366 20.104 44.5 20C44.634 20.104 44.813 20.245 45.031 20.422C45.551 20.844 46.291 21.468 47.177 22.268C49.4884 24.3555 51.6529 26.6002 53.655 28.986C58.37 34.629 63 42.234 63 50.261C63 60.55 54.717 68.88 44.5 68.88C34.283 68.88 26 60.55 26 50.261V50.261Z" stroke="#465A50" />
  </svg>
  <svg x="181" y="91" width="89" height="89" viewBox="0 0 89 89" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path class="drop" d="M26 50.261C26 42.234 30.63 34.629 35.345 28.986C37.3471 26.6002 39.5116 24.3555 41.823 22.268C42.709 21.468 43.449 20.844 43.969 20.422C44.187 20.245 44.366 20.104 44.5 20C44.634 20.104 44.813 20.245 45.031 20.422C45.551 20.844 46.291 21.468 47.177 22.268C49.4884 24.3555 51.6529 26.6002 53.655 28.986C58.37 34.629 63 42.234 63 50.261C63 60.55 54.717 68.88 44.5 68.88C34.283 68.88 26 60.55 26 50.261V50.261Z" stroke="#465A50" />
  </svg>

  <svg x="1" y="181" width="89" height="89" viewBox="0 0 89 89" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path class="drop" d="M26 50.261C26 42.234 30.63 34.629 35.345 28.986C37.3471 26.6002 39.5116 24.3555 41.823 22.268C42.709 21.468 43.449 20.844 43.969 20.422C44.187 20.245 44.366 20.104 44.5 20C44.634 20.104 44.813 20.245 45.031 20.422C45.551 20.844 46.291 21.468 47.177 22.268C49.4884 24.3555 51.6529 26.6002 53.655 28.986C58.37 34.629 63 42.234 63 50.261C63 60.55 54.717 68.88 44.5 68.88C34.283 68.88 26 60.55 26 50.261V50.261Z" stroke="#465A50" />
  </svg>
  <svg x="91" y="181" width="89" height="89" viewBox="0 0 89 89" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path class="drop" d="M26 50.261C26 42.234 30.63 34.629 35.345 28.986C37.3471 26.6002 39.5116 24.3555 41.823 22.268C42.709 21.468 43.449 20.844 43.969 20.422C44.187 20.245 44.366 20.104 44.5 20C44.634 20.104 44.813 20.245 45.031 20.422C45.551 20.844 46.291 21.468 47.177 22.268C49.4884 24.3555 51.6529 26.6002 53.655 28.986C58.37 34.629 63 42.234 63 50.261C63 60.55 54.717 68.88 44.5 68.88C34.283 68.88 26 60.55 26 50.261V50.261Z" stroke="#465A50" />
  </svg>
  <svg x="181" y="181" width="89" height="89" viewBox="0 0 89 89" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path class="drop" d="M26 50.261C26 42.234 30.63 34.629 35.345 28.986C37.3471 26.6002 39.5116 24.3555 41.823 22.268C42.709 21.468 43.449 20.844 43.969 20.422C44.187 20.245 44.366 20.104 44.5 20C44.634 20.104 44.813 20.245 45.031 20.422C45.551 20.844 46.291 21.468 47.177 22.268C49.4884 24.3555 51.6529 26.6002 53.655 28.986C58.37 34.629 63 42.234 63 50.261C63 60.55 54.717 68.88 44.5 68.88C34.283 68.88 26 60.55 26 50.261V50.261Z" stroke="#465A50" />
  </svg>

</svg>
              
            
!

CSS

              
                :root {
  font: 20px system-ui;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #DFD9CD;
}

svg {
  overflow: visible;
  width: 100%;
  height: 100%;
  max-width: 80vmin;
}

.morph-targets {
  visibility: hidden;
}
              
            
!

JS

              
                let drops = gsap.utils.toArray(".drop");

let tl = gsap.timeline({
  repeat: -1,
  repeatRefresh: true,
  repeatDelay: .5,
  defaults: {
    ease: 'power3.inOut'
  }
})

tl.to('.drop', {
  morphSVG: gsap.utils.random([".candy", ".bottle", ".pretzel"], true),
  rotate: "random(-20, 20)",
  transformOrigin: 'center',
  stagger: {
    each: .25,
    from: 'random'
  }
})

tl.to('.drop', {
  delay: 1
})

drops.forEach(drop => {
  tl.to(drop, {
    morphSVG: () => drop.dataset.original,
    rotate: 0
  }, '<')
})
              
            
!
999px

Console