<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 r = Math.random() * 200;
  var dur = Math.random() * 6;
  var circle = document.createElementNS(svg.namespaceURI, 'circle');
  circle.setAttribute('cx', x);
  circle.setAttribute('cy', y);
  circle.setAttribute('r', r);
  circle.setAttribute('opacity', 0.3);
  circle.setAttributeNS(null, 'fill', '#'+Math.round(0xFFFFFF * Math.random()).toString(16));

  var animation = document.createElementNS(svg.namespaceURI, 'animateMotion');
  var path = 'm 0,0 l 0,500'
  animation.setAttribute('path', path);
  animation.setAttribute('dur', dur);
  animation.setAttribute('repeatCount', 'indefinite');
  circle.appendChild(animation);

  svg.appendChild(circle);
}

f(0, 0);
}
</script>