<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body  onload="init()">
      <canvas id="snow"></canvas>
    </body>
</html>
body { background: #333;}
canvas { display: block;}
function init() {
  var W = window.innerWidth;
  var H = window.innerHeight;
  
  document.body.myData = {
    x: W/2,
    y: 0
  };
  document.onmousemove = mousemove;

  var canvas = document.getElementById('snow');

  
  canvas.width = W;
  canvas.height = H;

  var ctx = canvas.getContext('2d');
  ctx.strokeStyle = 'white';

  var mp = 100;
  var particles = [];
  for (var i = 0; i < mp; i++) {
    particles.push({
      x: Math.random() * W,
      y: Math.random() * H,
      r: Math.random() * 3 + 1
    })
  }

  setInterval(function() {
    draw(W, H, particles, mp, ctx);
  }, 50);
}

function draw(W, H, particles, mp, ctx) {
  ctx.clearRect(0, 0, W, H);

  ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
  ctx.beginPath();
  for (var i = 0; i < mp; i++) {
    var p = particles[i];
    ctx.moveTo(p.x, p.y);
    ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, true);
  }
  ctx.fill();

  update(W, H, particles, mp, ctx);
}

function update(W, H, particles, mp, ctx) {
  var speed_x = (document.body.myData.x - (W / 2)) / W;
  for (var i = 0; i < mp; i++) {
    var p = particles[i];
    p.y += 1 + p.r / 2;
    p.x += speed_x * 10;

    if (p.y > H) {
      particles[i] = {
        x: Math.random() * W,
        y: -10,
        r: p.r
      };
    }
  }
}

function mousemove(event) {
  var mouse_x = mouse_y = 0;
  if (document.attachEvent != null) {
    mouse_x = window.event.clientX;
    mouse_y = window.event.clientY;
  } else if (!document.attachEvent && document.addEventListener) {
    mouse_x = event.clientX;
    mouse_y = event.clientY;
  }
  document.body.myData.x = mouse_x;
  document.body.myData.y = mouse_y;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.