HTML CSS JS Result EDIT ON (function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; window.requestAnimationFrame = requestAnimationFrame; })(); var flakes = [], canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), flakeCount = 400, mX = -100, mY = -100 canvas.width = window.innerWidth; canvas.height = window.innerHeight; function snow() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < flakeCount; i++) { var flake=f lakes[i], x=m X, y=m Y, minDist=1 50, x2=f lake.x, y2=f lake.y; var dist=M ath.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)), dx=x 2 - x, dy=y 2 - y; if (dist < minDist) { var force=m inDist / (dist * dist), xcomp=( x - x2) / dist, ycomp=( y - y2) / dist, deltaV=f orce / 2; flake.velX -=d eltaV * xcomp; flake.velY -=d eltaV * ycomp; } else { flake.velX *=. 98; if (flake.velY <=f lake.speed) { flake.velY=f lake.speed } flake.velX +=M ath.cos(flake.step +=. 05) * flake.stepSize; } ctx.fillStyle="rgba(255,255,255," + flake.opacity + ")"; flake.y +=f lake.velY; flake.x +=f lake.velX; if (flake.y>= canvas.height || flake.y <=0 ) { reset(flake); } if (flake.x>= canvas.width || flake.x <=0 ) { reset(flake); } ctx.beginPath(); ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2); ctx.fill(); } requestAnimationFrame(snow); }; function reset(flake) { flake.x=M ath.floor(Math.random() * canvas.width); flake.y=0 ; flake.size=( Math.random() * 3) + 2; flake.speed=( Math.random() * 1) + 0.5; flake.velY=f lake.speed; flake.velX=0 ; flake.opacity=( Math.random() * 0.5) + 0.3; } function init() { for (var i=0 ; i < flakeCount; i++) { var x=M ath.floor(Math.random() * canvas.width), y=M ath.floor(Math.random() * canvas.height), size=( Math.random() * 3) + 2, speed=( Math.random() * 1) + 0.5, opacity=( Math.random() * 0.5) + 0.3; flakes.push({ speed: speed, velY: speed, velX: 0, x: x, y: y, size: size, stepSize: (Math.random()) / 30, step: 0, opacity: opacity }); } snow(); }; canvas.addEventListener( "mousemove", function(e) { mX=e .clientX, mY=e .clientY }); window.addEventListener( "resize",function(){ canvas.width=w indow.innerWidth; canvas.height=w indow.innerHeight; }) init();