// noprotect

​

var n = 3000;

var balls = [];

var svg = document.querySelector('svg')

for (var i = 0; i < n; i++) {

  var circ = document.createElementNS('http://www.w3.org/2000/svg','circle');

  circ.setAttribute('cx', '100');

  circ.setAttribute('cy', '100');

  circ.setAttribute('r', '50');

  circ.id = i;

  svg.appendChild(circ);

​

  balls.push({

    x: Math.random() * window.innerWidth,

    y: Math.random() * window.innerHeight,

    v: 1,

    r: 50,

    a: Math.random() * 2 * Math.PI,

    element: circ,

  });

}

​

function move() {

  for(b in balls) {

    var ball = balls[b];

    ball.x += ball.v * Math.cos(ball.a);

    ball.y += ball.v * Math.sin(ball.a);

    ball.r += ball.v * Math.sin(ball.a);

    ball.a += 0.03;

    ball.element.setAttribute('cx', ball.x);

    ball.element.setAttribute('cy', ball.y);

    //ball.element.setAttribute('r', ball.r);

  }

  window.requestAnimationFrame(move); //

}

move();

​