<html> <head> <title>CANVAS</title> <style> * { margin: 0; padding: 0; } html, body { height: 100%; width: 100%; } canvas { display: block; } </style> </head> <body> <canvas id="CANVAS"></canvas> <script> var canvas = document.getElementById("CANVAS"); canvas.width = document.body.clientWidth; canvas.height =document.body.clientHeight; var ctx = canvas.getContext("2d"); //Canvas dimensions var W = canvas.width; var H = canvas.height; //Lets paint the canvas black ctx.fillStyle = "black"; ctx.fillRect(0, 0, W, H); var x = 100; var y = 100; var compositeTypes = [ 'source-over','source-in','source-out','source-atop', 'destination-over','destination-in','destination-out','destination-atop', 'lighter','darker','copy','xor' ]; //Lets animate the particle function draw() { //Moving this BG paint code insde draw() will help remove the trail ctx.globalCompositeOperation =compositeTypes[0]; //Lets reduce the opacity of the BG paint to give the final touch ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; ctx.fillRect(0, 0, W, H); res=Math.abs(Math.sin(x)*150); var gradient = ctx.createRadialGradient(x, y, 0, x, y, res); var r = Math.random()*255>>0; var g = Math.random()*255>>0; var b = Math.random()*255>>0; gradient.addColorStop(0, "rgba("+r+", "+g+", "+b+", 0.1)"); gradient.addColorStop(0.9, "rgba("+r+", "+g+", "+b+", 1)"); gradient.addColorStop(1, "rgba("+r+", "+g+", "+b+", 0.1)"); //Lets blend the particle with the BG ctx.globalCompositeOperation = "lighter"; ctx.beginPath(); ctx.strokeStyle =gradient; ctx.arc( canvas.width/2, canvas.height/2, res, 0, Math.PI*2 , false); ctx.lineWidth = 30; ctx.stroke(); x=x+0.01; //if(x >=100) x = 0; //y++; } setInterval(draw, 13); </script> </body> </html>