SVG Multi-Drip

index.html

<div id="container">

<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In  -->
<svg id="mysvg" version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
<defs>
  <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="9" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 17 -7" result="cm" />
    
        <feComposite in="SourceGraphic" in2="cm" >
  	</filter>  
</defs>
<g id="circle-group" filter="url(#goo)">
  <g id="circles">
<circle class="top-circle" fill="#00367F" cx="30" cy="140" r="15"/>
<circle class="move-circle" fill="#00367F" cx="30" cy="240" r="2"/>
  </g>
  </g>
</svg>
  
  </div>

script.js

var container = document.getElementById('container');
var circles = document.querySelector('#circles');
var circleGroup = document.querySelector('#circle-group');
var mysvg = document.getElementById('mysvg');
var numDrips = 16;
var colorOffset = 60;
var colorMult = 400;

for(var i = 0; i < numDrips; i++){
   var c = circles.cloneNode(true);
  circleGroup.appendChild(c); 
  TweenMax.set(c, {
    x:i * 34

  })
  
  TweenMax.set([c.childNodes[3], c.childNodes[1]], {
    fill:"hsla(" + ((i - colorMult) / numDrips * colorOffset) + ",100%,50%, 1)"
  })

}

circleGroup.removeChild(circles)


TweenMax.set([container], {
  position:'absolute',
  left:'50%',
  xPercent:-50
})

var tl = new TimelineMax({repeat:-1, paused:false, repeatDelay:0, immediateRender:false, yoyo:false,});
tl.timeScale(1);

tl.staggerTo('.move-circle', 3, {
  attr:{
    cy:140,
    r:15
  },
  ease:Bounce.easeOut
}, 0.2)
.staggerTo('.top-circle', 3, {
  attr:{
    cy:240,
    r:2
  },
  ease:Bounce.easeOut
}, 0.2, '-=6')

.staggerTo('.move-circle', 2, {
  attr:{
    cy:240,
    r:2
  },
  ease:Back.easeInOut.config(1)
}, 0.2, '-=2')

.staggerTo('.top-circle', 2, {
  attr:{
    cy:140,
    r:15
  },
  ease:Back.easeInOut.config(1)
}, 0.2, '-=6')

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>

style.css

body{
  background-color:#2d2d2d;
  overflow:hidden;
}
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
svg, #container{
  width:100%;
  height:800px;
  
}

SVG Multi-Drip.markdown

SVG Multi-Drip

More SVG dripping fun!

Play around with colorOffset, colorMult and numDrips.

A Pen by Chris Gannon on CodePen.

License.