JS Canvas Snow Animation

Demo:

What do you need to do?

To create the JavaScript Canvas Snow Animation follow the steps below:

1. Add HTML
2. Add CSS
3. Add JavaScript

Step1.

Add HTML

<canvas id="snowfall"></canvas>

Step2.

Add CSS

body {
  background-image: linear-gradient( to top, #fff 5%, #0396FF 100%);
  height: 100vh;
  overflow:hidden;
}

canvas {
  filter: blur(1px);
  opacity:0.7;
  height: 100vh;
}

Step3.

Add JavaScript

var canvas = document.getElementById("snowfall");
var contex = canvas.getContext('2d'),
    
cnsWidth = window.innerWidth,
cnsHeight = window.innerHeight,
numberFlakes = 250,
flakes = [];

function Flake(x, y) {
  var topSize = 4.5, topMotion = 2.5;
  
this.x = x;
this.y = y;
this.spacing = spaceBetween(0, 0.8);
this.distance = spaceBetween(0, Math.PI);
this.weight = spaceBetween(2, topSize);
this.scale = (this.weight / topSize);
this.motion = (this.weight / topSize) * topMotion; 
  
this.update = function() {
this.x += Math.cos(this.distance) * this.spacing;   
this.y += this.motion;
  }  
}

function init() {
  var i = numberFlakes;
        
while (i--) {
    x = spaceBetween(0, cnsWidth, true);
    y = spaceBetween(0, cnsHeight, true);
        
flake = new Flake(x, y);
    flakes.push(flake);
  }
  
scaleCanvas();
  loop();  
}

function scaleCanvas() {
  canvas.width = cnsWidth;
  canvas.height = cnsHeight;
}

function loop() {
  var i = flakes.length;
  
contex.save();
contex.setTransform(1, 0, 0, 1, 0, 0);
contex.clearRect(0, 0, cnsWidth, cnsHeight);
contex.restore();
  
while (i--) {    
    flakeFront = flakes[i];
    flakeFront.update();    
    contex.beginPath();
    contex.arc(flakeFront.x, flakeFront.y, flakeFront.weight, 0, 2 * Math.PI, false);
    contex.fillStyle = "#FFFFFF"; + flakeFront.scale + ')';
    contex.fill();
    
    if (flakeFront.y >= cnsHeight) {
      flakeFront.y = -flakeFront.weight;
    }  
  }  
  requestAnimationFrame(loop);
}

function spaceBetween(min, max, round) {
  var number = Math.random() * (max - min + 1) + min;

  if (round) {
    return Math.floor(number);
  } else {
    return number;
  }
}

init();

Enjoy coding!

Read also:

CSS Snowfall

CSS Christmas Tree Snow Globe

CSS Winter window scene