esterTion/snow.htm

## snow.htm
<!DOCTYPE html><html>
  <head><meta charset="UTF-8"><style>html,body{background:#bababa}</style></head>
  <body><script src="snow.js"></script></body>
</html>

## snow.js
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.style.height = '100%';
canvas.style.width = '100%';
canvas.style.position = 'fixed';
canvas.style.top = '0';
canvas.style.left = '0';

var w, h;
function resized() {
  w = canvas.offsetWidth * devicePixelRatio;
  h = canvas.offsetHeight * devicePixelRatio;
  canvas.width = w;
  canvas.height = h;
}
window.addEventListener('resize', resized);
resized();

var ctx = canvas.getContext('2d');
var nextSnowDrop = 0;
var snowDrops = [];
function draw() {
  ctx.clearRect(0, 0, w, h);
  ctx.fillStyle = '#FFFFFF';
  if (nextSnowDrop <= 0) {
    snowDrops.push({ x: Math.random() * .8 + .1, y: 0, speed: Math.random() * 10 - 5, accel: 0, speedY: Math.random() * 2 + 1 });
    nextSnowDrop = 10;
  } else {
    nextSnowDrop--;
  }
  ctx.beginPath();
  snowDrops.forEach(function (i) {
    var spd = i.speed, x = i.x * w, y = i.y, accel = i.accel;
    i.y += i.speedY;
    x += spd;
    i.x = x / w;
    accel += Math.random() * .04 - .02;
    if (accel < -1) accel = -1;
    else if (accel > 1) accel = 1;
    if (spd < -2) spd = -2;
    else if (spd > 2) spd = 2;
    spd += accel;
    i.accel = accel;
    i.speed = spd;
    ctx.moveTo(x, y);
    ctx.arc(x, y, 3 * devicePixelRatio, 0, Math.PI * 2);
    ctx.fill();

    if (y > h) {
      snowDrops.splice(snowDrops.indexOf(i), 1);
    }
  });
  ctx.closePath();
  requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
	<!DOCTYPE html><html>
	<head><meta charset="UTF-8"><style>html,body{background:#bababa}</style></head>
	<body><script src="snow.js"></script></body>
	</html>
	var canvas = document.createElement('canvas');
	document.body.appendChild(canvas);
	canvas.style.height = '100%';
	canvas.style.width = '100%';
	canvas.style.position = 'fixed';
	canvas.style.top = '0';
	canvas.style.left = '0';

	var w, h;
	function resized() {
	w = canvas.offsetWidth * devicePixelRatio;
	h = canvas.offsetHeight * devicePixelRatio;
	canvas.width = w;
	canvas.height = h;
	}
	window.addEventListener('resize', resized);
	resized();

	var ctx = canvas.getContext('2d');
	var nextSnowDrop = 0;
	var snowDrops = [];
	function draw() {
	ctx.clearRect(0, 0, w, h);
	ctx.fillStyle = '#FFFFFF';
	if (nextSnowDrop <= 0) {
	snowDrops.push({ x: Math.random() * .8 + .1, y: 0, speed: Math.random() * 10 - 5, accel: 0, speedY: Math.random() * 2 + 1 });
	nextSnowDrop = 10;
	} else {
	nextSnowDrop--;
	}
	ctx.beginPath();
	snowDrops.forEach(function (i) {
	var spd = i.speed, x = i.x * w, y = i.y, accel = i.accel;
	i.y += i.speedY;
	x += spd;
	i.x = x / w;
	accel += Math.random() * .04 - .02;
	if (accel < -1) accel = -1;
	else if (accel > 1) accel = 1;
	if (spd < -2) spd = -2;
	else if (spd > 2) spd = 2;
	spd += accel;
	i.accel = accel;
	i.speed = spd;
	ctx.moveTo(x, y);
	ctx.arc(x, y, 3 * devicePixelRatio, 0, Math.PI * 2);
	ctx.fill();

	if (y > h) {
	snowDrops.splice(snowDrops.indexOf(i), 1);
	}
	});
	ctx.closePath();
	requestAnimationFrame(draw);
	}
	requestAnimationFrame(draw);