<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="500" height="500"></svg>
<script>
for (var i = 0; i < 100; i++) {
function f(x, y) {
  var svg = document.getElementById('svg');
  var x = Math.random() * 500;
  var y = Math.random() * 500;
  var r = Math.random() * 200;
  var dur = Math.floor(Math.random() * 10) + 5;
  var rect = document.createElementNS(svg.namespaceURI, 'rect');
  rect.setAttribute('x', x);
  rect.setAttribute('y', y);
  rect.setAttribute('width', r);
  rect.setAttribute('height', r);
  rect.setAttribute('opacity', 0.8);
  rect.setAttributeNS(null, 'fill', '#'+Math.round(0xFFFFFF * Math.random()).toString(16));

  var animation = document.createElementNS(svg.namespaceURI, 'animateMotion');
  var path = 'm 0,-200 l 0,700'
  animation.setAttribute('path', path);
  animation.setAttribute('dur', dur);
  animation.setAttribute('repeatCount', 'indefinite');

  var animation2 = document.createElementNS(svg.namespaceURI, 'animate');
  animation2.setAttribute('attributeName', 'width');
  animation2.setAttribute('values', '10;'+r+';10');
  animation2.setAttribute('dur', dur);
  animation2.setAttribute('repeatCount', 'indefinite');


  var animation3 = document.createElementNS(svg.namespaceURI, 'animate');
  animation3.setAttribute('attributeName', 'height');
  animation3.setAttribute('values', ''+x+';'+r+';'+y+'');
  animation3.setAttribute('dur', dur);
  animation3.setAttribute('repeatCount', 'indefinite');

  rect.appendChild(animation3);
  rect.appendChild(animation2);
  rect.appendChild(animation);

  svg.appendChild(rect);
}

f(0, 0);
}

</script>