<canvas id='snow'></canvas>
html, body {
  background: #2c3e50;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
}
var canvas = document.getElementById('snow');
var ctx = canvas.getContext('2d');

var w = canvas.width = window.innerWidth;
var h = canvas.height = window.innerHeight;

var num = 60;
var tamaño = 40;
var elementos = [];

inicio();
nevada();

function inicio() {
  for (var i = 0; i < num; i++) {
    elementos[i] = {
      x: Math.ceil(Math.random() * w),
      y: Math.ceil(Math.random() * h),
      tamaño: Math.random() * tamaño
    }
  }
}

function nevada() {
  ctx.clearRect(0, 0, w, h);
  for (var i = 0; i < num; i++) {
    var e = elementos[i];
    ctx.beginPath();
    cristal(e.x, e.y, e.tamaño);
  }
}

function cristal(cx, cy, long) {
  ctx.fillStyle = "white";
  ctx.lineWidth = long / 20;
  ctx.arc(cx, cy, long / 15, 0, 2 * Math.PI);
  for (i = 0; i < 6; i++) {
    ctx.moveTo(cx, cy);
    ctx.strokeStyle = "white";
    ctx.lineTo(cx + long / 2 * Math.sin(i * 60 / 180 * Math.PI),
               cy + long / 2 * Math.cos(i * 60 / 180 * Math.PI));
  }
  ctx.fill();
  ctx.stroke();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.