<html> <head> <title>CANVAS</title> <style> * { margin: 0; padding: 0; } html, body { height: 100%; width: 100%; } canvas { display: block; } </style> </head> <body> <br><br><center><canvas id="canvas"></canvas></center> <script> window.onload = function(){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var W = window.innerWidth, H = window.innerHeight; canvas.width = W; canvas.height = H; var particles = []; //Lets create some particles now var particle_count = 126; var start_count = 6; var b=1; var r=0; var g=5; var q=0; for(var i = 0; i < particle_count; i++) { particles.push(new particle(i)); } function particle(v) { //this.location = {x: nx+W/2, y: ny+H/2}; this.radius = 13-b; } function draw(){ ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = "white"; ctx.fillRect(0, 0, W, H); for(var i = 0; i < particles.length; i++){ var p = particles[i]; ctx.beginPath(); ctx.fillStyle = "rgba(0, 0, 0, 0.5)"; if(i%g==0){ g=i+(start_count*b); //0 10 30 60 r=(Math.PI*2)/(start_count*b); b++; } nx=Math.sin(r*i)*(30*b); ny=Math.cos((r*i))*(30*b); //ny=Math.max( Math.cos(r*i), Math.sin(q) )*(30*b); //ny=Math.pow(Math.sin(r*i), q)*(10*b); ctx.arc(nx+W/2, ny+H/2, p.radius, Math.PI*2, false); ctx.fill(); } q++; } //draw(); setInterval(draw, 33); } </script> </body> </html>