<html>
  <head>
    <title>Melting Popsicle SVG Animated with CSS / Sass</title>
  </head>
  <body>
    
    <svg id="popsicle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="169" height="406" viewBox="0 0 169 406">
      <defs>
        <path id="popsicle-a" d="M0,80.491963 C0,36.0374793 36.0313023,0 80.5,0 L80.5,0 C124.958922,0 161,36.035326 161,80.491963 L161,234.003703 C161,257.749902 141.739556,277 118.000389,277 L42.9996109,277 C19.2515816,277 0,257.74182 0,234.003703 L0,80.491963 Z"/>
        <linearGradient id="popsicle-c" x1="50%" x2="50%" y1="0%" y2="100%">
          <stop offset="0%" stop-color="#FA8DA0"/>
          <stop offset="100%" stop-color="#F45467"/>
        </linearGradient>
      </defs>
      <g id="drop-left" stroke-width="4" transform="translate(22 293)">
        <path fill="#F45467" stroke="#302434" stroke-linecap="square" d="M10,39 C15.5228475,39 20,32.9558441 20,25.5 C20,18.0441559 10,0 10,0 C10,0 0,18.0441559 0,25.5 C0,32.9558441 4.4771525,39 10,39 Z"/>
        <path stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" d="M9.32859023,17 C8.16921235,19.7402985 7,23.158811 7,25.0547332 C7,27.2966404 7.69834226,29.3221178 8.82212733,30.7690487" opacity=".7"/>
      </g>
      <g id="drop-right" stroke-width="4" transform="translate(113 330)">
        <path fill="#F45467" stroke="#302434" stroke-linecap="square" d="M10,39 C15.5228475,39 20,32.9558441 20,25.5 C20,18.0441559 10,0 10,0 C10,0 0,18.0441559 0,25.5 C0,32.9558441 4.4771525,39 10,39 Z"/>
        <path stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" d="M9.32859023,17 C8.16921235,19.7402985 7,23.158811 7,25.0547332 C7,27.2966404 7.69834226,29.3221178 8.82212733,30.7690487" opacity=".7"/>
      </g>
      <g fill="none" fill-rule="evenodd" transform="translate(4 4)">
        <g stroke="#302434" stroke-width="4" transform="translate(63 237)">
          <rect width="31" height="161" x="2" y="2" fill="#E2D7B7" rx="15.5"/>
          <path stroke-linecap="square" d="M15 33L15 112M15 123L15 143M2 33L2 112M24 34L24 73M24 85L24 160"/>
        </g>
        <mask id="popsicle-b" fill="#fff">
          <use xlink:href="#popsicle-a"/>
        </mask>
        <path stroke="#302434" stroke-width="4" d="M-2,80.491963 C-2,34.9295266 34.9301161,-2 80.5,-2 C126.064183,-2 163,34.9314472 163,80.491963 L163,234.003703 C163,258.851509 142.847088,279 118.000389,279 L42.9996109,279 C18.1497795,279 -2,258.849157 -2,234.003703 L-2,80.491963 Z"/>
        <path fill="#F5BAC1" d="M0,80.491963 C0,36.0374793 36.0313023,0 80.5,0 L80.5,0 C124.958922,0 161,36.035326 161,80.491963 L161,234.003703 C161,257.749902 141.739556,277 118.000389,277 L42.9996109,277 C19.2515816,277 0,257.74182 0,234.003703 L0,80.491963 Z" mask="url(#popsicle-b)"/>
        <path fill="url(#popsicle-c)" d="M8,88.491963 C8,44.0374793 44.0313023,8 88.5,8 L88.5,8 C132.958922,8 169,44.035326 169,88.491963 L169,242.003703 C169,265.749902 149.739556,285 126.000389,285 L50.9996109,285 C27.2515816,285 8,265.74182 8,242.003703 L8,88.491963 Z" mask="url(#popsicle-b)"/>
        <g stroke-width="4" transform="translate(28 78)">
          <rect width="31" height="161" x="2" y="2" fill="#F45467" stroke="#302434" rx="15.5"/>
          <path stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" d="M25.294568,18 L25.294568,139.49832 C25.294568,146.595699 24.294568,155.45277 15,155.45277" opacity=".7"/>
          <rect width="31" height="161" x="72" y="2" fill="#F45467" stroke="#302434" rx="15.5"/>
        </g>
        <path stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M123.294568,96 L123.294568,217.49832 C123.294568,224.595699 122.294568,233.45277 113,233.45277" opacity=".7"/>
        <path stroke="#FFF" stroke-width="4" d="M85,393 C73,393 71,385.898678 71,379.49832 L71,281" opacity=".7"/>
      </g>
    </svg>



  </body>
</html>
body
  text-align: center
  
#popsicle
  #drop
    &-left
      animation: drop-left 3s ease-in-out infinite
    &-right
      animation: drop-right 2.5s ease-in-out infinite

@keyframes drop-left
  from
    transform: translate(30px, 239px)
    opacity: 1
  to
    transform: translate(30px, 330px)
    opacity: 0

@keyframes drop-right
  from
    transform: translate(120px, 239px)
    opacity: 1
  to
    transform: translate(120px, 360px)
    opacity: 0
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.