SOURCE

var xmlns="http://www.w3.org/2000/svg", xlinkns ="http://www.w3.org/1999/xlink", select = function(s) {
      return document.querySelector(s);
    }, selectAll = function(s) {
      return document.querySelectorAll(s);
    },  bubble = select('#bubble'), bubbleGroup = select('.bubbleGroup');

//•••••PLAY WITH THESE VALUES••••••••//

var numBubbles = 60;
var bubbleSize = 30.7;
var offset = 5.9
var startScale = 5;
var endScale = 0.3;
//1 = normal, 0.5 is half, 2 is double etc
var animationSpeed = 1;
//whether they join like liquid or not
var hasGooFilter = false;
var dur = 2;

//•••••••••••••••••••••••

TweenMax.set(bubbleGroup,{
  filter:(hasGooFilter) ? 'url(#goo)' : '',
 fill:getComputedStyle(document.body, null).getPropertyValue('background-color')

})

TweenMax.set(bubble, {
  attr:{
    r:bubbleSize
  }
})


var tl = new TimelineMax(), b;

for(var i = 0; i < numBubbles; i++){
    
  b = document.createElementNS(xmlns, 'use');
  bubbleGroup.appendChild(b);
  TweenMax.set(b,{
    svgOrigin:'300 300'
  })  
    b.setAttributeNS(xlinkns, 'xlink:href', '#bubble');
  
    TweenMax.set(b,{
      rotation:i * (360/numBubbles)
    });
  
    var t = TweenMax.fromTo(b, dur, {
      scale:startScale
    },{
      scale:endScale,
      repeat:-1,
      ease:Power1.easeInOut,
      yoyo:true
    })
      tl.add(t, i/offset)
    }

TweenMax.set(bubbleGroup,{
  transformOrigin:'50% 50%'
})

tl.seek(100);
tl.timeScale(animationSpeed);

<svg id="mySVG" viewBox="0 0 600 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
  <circle id="bubble" stroke="#CBF3F0" stroke-width="0.5" cx="280" cy="300" r="7"/>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="7" 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 19 -9" result="cm" />
    
        <feComposite in="SourceGraphic" in2="cm" >
  	</filter>  
  </defs>
  <g class="bubbleGroup" >
  </g>
</svg>

body {
  background-color:#2EC4B6;
  overflow: hidden;
  text-align:center;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


svg{
  width:100%;
  height:100%;
}