<canvas id="c" width="600" height="400"></canvas>
canvas { display: block; margin: 0 auto; }
var c = document.getElementById("c"); var ctx = c.getContext("2d"); var particles = []; for (var i = 0; i < 200; i++) { particles.push({ angle: Math.random() * Math.PI * 2, radius: Math.random() * 150 + 50, speed: Math.random() * 0.02 + 0.005, size: Math.random() * 3 + 1 }); } function draw() { ctx.fillStyle = "rgba(10,10,18,0.15)"; ctx.fillRect(0,0,600,400); particles.forEach(function(p) { p.angle += p.speed; var x = 300 + Math.cos(p.angle) * p.radius; var y = 200 + Math.sin(p.angle) * p.radius * 0.6; ctx.beginPath(); ctx.arc(x, y, p.size, 0, Math.PI*2); ctx.fillStyle = "rgba(68,102,255," + (0.3 + p.size/4) + ")"; ctx.fill(); }); requestAnimationFrame(draw); } draw();