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

              
                <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>
              
            
!

CSS

              
                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
              
            
!

JS

              
                
              
            
!
999px

Console