<html>
<head>
<style>
body {padding:0px;margin:0px;}
</style>
</head>
<body>
<canvas id="demo"></canvas>
<script>
var c=document.getElementById('demo');
c.style.backgroundColor="#222";
var cc=c.getContext("2d");

window.addEventListener("load",setDimensions);
window.addEventListener("resize",setDimensions);

setInterval(draw,25); //takes care of the drawing

function setDimensions() {
	c.width=window.innerWidth;
	c.height=window.innerHeight;	
	
	//add shadow
	cc.shadowBlur=7;
	cc.shadowColor="black";
	cc.shadowOffsetX = 5;
	cc.shadowOffsetY = 5;
};

//array of colors
var colors = ["#3E5060","#75BDC9","#F5F4F3","#FF8686","#FFBF4A"];

var blobarray = [ ];

function draw() {

	var blob = {
		x:c.width/2, 
		y:c.height/2,
		color:colors[Math.floor(Math.random()*colors.length)], // random color from array "colors"
		size:1,
		xSpeed:(Math.random() < 0.5 ? -1 : 1) * Math.floor(Math.random() * 10) + 1,  //random square-size between -15 and +15
		ySpeed:(Math.random() < 0.5 ? -1 : 1) * Math.floor(Math.random() * 10) + 1  //random square-size between -15 and +15		
		};

	blobarray.push(blob);
		
	cc.clearRect(0,0,c.width,c.height);	//if you comment this line out, the arcs leave a trace
	
	for (var i=0;i<blobarray.length;i++) {
	
		blob=blobarray[i];		
		
		if (blob.x==c.width/2) { //first time, the arc needs to be placed in the middle of the screen
			blob.x=(c.width/2)-(blob.size/2); 
			blob.y=(c.height/2)-(blob.size/2);
			
		} else {
			blob.x=blob.x += blob.xSpeed;
			blob.y=blob.y += blob.ySpeed;
		};		
		
		cc.fillStyle = blob.color;		
		
		cc.beginPath();		
		cc.arc(blob.x, blob.y, blob.size, 0, Math.PI * 2);
		cc.fill();
			
		blob.size=blob.size * 1.04; //makes the arcs bigger with every step
				
		if (blob.size>50) {
			blobarray.splice(blob, 1); //remove blob items when they're bigger than 100px;	
		};		
	};

};

</script>
</body>
</html>