var M = Math,
    PI = M.PI,
    TWOPI = PI * 2,
    HALFPI = PI / 2,
    canvas = document.createElement( 'canvas'),
    ctx = canvas.getContext( '2d' ),
    width = canvas.width = 350,
    height = canvas.height = 350,
    cx = width / 2,
    cy = height / 2,
    count = 40,
    sizeBase = 0.1,
    sizeDiv = 5,
    tick = 0;
	loo = 0;
  var rr=Math.floor((Math.random() * 255) + 1);
  var gg=Math.floor((Math.random() * 255) + 1);
  var bb=Math.floor((Math.random() * 255) + 1);
ctx.translate( cx, cy );

(function loop() {
  requestAnimationFrame( loop );  
  ctx.clearRect( -width / 2, -height / 2, width, height );
  ctx.fillStyle = '#fff'; 
  var angle = tick / 8,
      radius = -50 + M.sin( tick / 15 ) * 100,
      size;
  loo=(loo+1)%51;
  if(loo==50){
	  rr=Math.floor((Math.random() * 255) + 1);
	  gg=Math.floor((Math.random() * 255) + 1);
	  bb=Math.floor((Math.random() * 255) + 1);
  }
  for( var i = 0; i < count; i++ ) {
    angle += PI / 64;
    radius += i / 30;
    size = sizeBase + i / sizeDiv;
    
    ctx.beginPath();
    ctx.arc( M.cos( angle ) * radius, M.sin( angle ) * radius, size, 0, TWOPI, false );
    ctx.fillStyle = 'rgb(' + rr + ',' + gg + ',' + bb + ')';
	//ctx.fillStyle = 'hsl(200, 70%, 50%)';
    ctx.fill();
    
    ctx.beginPath();
    ctx.arc( M.cos( angle ) * -radius, M.sin( angle ) * -radius, size, 0, TWOPI, false );
    //ctx.fillStyle = 'hsl(320, 70%, 50%)';
	ctx.fillStyle = 'rgb(' + rr + ',' + gg + ',' + bb + ')';
		
    ctx.fill();
    
    ctx.beginPath();
    ctx.arc( M.cos( angle + HALFPI ) * radius, M.sin( angle + HALFPI ) * radius, size, 0, TWOPI, false );
    //ctx.fillStyle = 'hsl(60, 70%, 50%)';
	//ctx.fillStyle = 'rgb(' + Math.floor((Math.random() * 255) + 1) + ',' + Math.floor((Math.random() * 255) + 1) + ',' + Math.floor((Math.random() * 255) + 1) + ')';
	ctx.fillStyle = 'rgb(' + bb + ',' + rr + ',' + gg + ')';
    ctx.fill();
    
    ctx.beginPath();
    ctx.arc( M.cos( angle + HALFPI ) * -radius, M.sin( angle + HALFPI ) * -radius, size, 0, TWOPI );
    //ctx.fillStyle = 'hsl(0, 0%, 100%)';
	//ctx.fillStyle = 'rgb(' + Math.floor((Math.random() * 255) + 1) + ',' + Math.floor((Math.random() * 255) + 1) + ',' + Math.floor((Math.random() * 255) + 1) + ')';
	ctx.fillStyle = 'rgb(' + bb + ',' + rr + ',' + gg + ')';
    ctx.fill();
  }
  
  tick++;
})();

document.body.appendChild( canvas );