JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

canvas {
  display:block;
}

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var image = new Image();
image.src = 'https://habrastorage.org/files/8a7/448/be7/8a7448be746f45b782a7288ff883a5d3.jpg';
var height = 0;

var snowflakes = [];
for (var i = 0; i < 300; i++) {
  var radius = -(i*i) + 100;
  snowflakes[i] = {
    x: Math.random() * window.innerWidth,
    y: Math.random() * window.innerHeight,
    radius: radius > 0 ? radius : Math.random() * 7 + 1
  };
}

function draw() {
  context.drawImage(image, 0, 0, window.innerWidth, window.innerHeight);
  for (var i = 0; i < 300; i++) {
    var flake = snowflakes[i];
    if (flake.x > canvas.width + flake.radius) {
      flake.x = -flake.radius * 1.5;
    } else {
      flake.x += flake.radius * 1.5;
    }
    if (flake.y > canvas.height + flake.radius) {
      flake.y = -flake.radius;
    } else {
      flake.y += flake.radius;
    }
    context.beginPath();
    var opacity = 1.1 - flake.radius / 100;
    context.fillStyle = 'rgba(255, 255, 255, ' + opacity + ')';
    context.arc(flake.x, flake.y, flake.radius, 0, 2 * Math.PI, false);
    context.fill();
  }
}

setInterval(draw, 30);

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    draw();
}

resize();

window.addEventListener('resize', resize, false);