Snipr Code Grid:
{"settings":{"resources":"","title":"Javascript Snowy Landscape"},"code":{"html":"%3Ccanvas%20id%3D%22snow%22%3E%3C%2Fcanvas%3E","js":"var%20w%20%3D%20window.innerWidth%2C%0A%20%20%20%20h%20%3D%20window.innerHeight%2C%0A%20%20%20%20canvas%20%3D%20document.getElementById('snow')%2C%0A%20%20%20%20ctx%20%3D%20canvas.getContext('2d')%2C%0A%20%20%20%20rate%20%3D%2060%2C%0A%20%20%20%20arc%20%3D%201500%2C%0A%20%20%20%20time%2C%0A%20%20%20%20count%2C%0A%20%20%20%20size%20%3D%202%2C%0A%20%20%20%20speed%20%3D%2010%2C%0A%20%20%20%20lights%20%3D%20new%20Array%2C%0A%20%20%20%20colors%20%3D%20%5B'%23eee'%2C'%23fff'%5D%3B%0A%0Acanvas.setAttribute('width'%2Cw)%3B%0Acanvas.setAttribute('height'%2Ch)%3B%0A%0Afunction%20init()%20%7B%0A%20%20time%20%3D%200%3B%0A%20%20count%20%3D%200%3B%0A%0A%20%20for(var%20i%20%3D%200%3B%20i%20%3C%20arc%3B%20i%2B%2B)%20%7B%0A%20%20%20%20lights%5Bi%5D%20%3D%20%7B%0A%20%20%20%20%20%20x%3A%20Math.ceil(Math.random()%20*%20w)%2C%0A%20%20%20%20%20%20y%3A%20Math.ceil(Math.random()%20*%20h)%2C%0A%20%20%20%20%20%20toX%3A%20Math.random()%20*%205%20%2B%201%2C%0A%20%20%20%20%20%20toY%3A%20Math.random()%20*%205%20%2B%201%2C%0A%20%20%20%20%20%20c%3A%20colors%5BMath.floor(Math.random()*colors.length)%5D%2C%0A%20%20%20%20%20%20size%3A%20Math.random()%20*%20size%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A%0Afunction%20bubble()%20%7B%0A%20%20ctx.clearRect(0%2C0%2Cw%2Ch)%3B%0A%0A%20%20for(var%20i%20%3D%200%3B%20i%20%3C%20arc%3B%20i%2B%2B)%20%7B%0A%20%20%20%20var%20li%20%3D%20lights%5Bi%5D%3B%0A%20%20%20%20%0A%20%20%20%20ctx.beginPath()%3B%0A%20%20%20%20ctx.arc(li.x%2Cli.y%2Cli.size%2C0%2CMath.PI*2%2Cfalse)%3B%0A%20%20%20%20ctx.fillStyle%20%3D%20li.c%3B%0A%20%20%20%20ctx.fill()%3B%0A%20%20%20%20%0A%20%20%20%20li.x%20%3D%20li.x%20%2B%20li.toX%20*%20(time%20*%200.05)%3B%0A%20%20%20%20li.y%20%3D%20li.y%20%2B%20li.toY%20*%20(time%20*%200.05)%3B%0A%20%20%20%20%0A%20%20%20%20if(li.x%20%3E%20w)%20%7B%20li.x%20%3D%200%3B%20%7D%0A%20%20%20%20if(li.y%20%3E%20h)%20%7B%20li.y%20%3D%200%3B%20%7D%0A%20%20%20%20if(li.x%20%3C%200)%20%7B%20li.x%20%3D%20w%3B%20%7D%0A%20%20%20%20if(li.y%20%3C%200)%20%7B%20li.y%20%3D%20h%3B%20%7D%0A%20%20%7D%0A%20%20if(time%20%3C%20speed)%20%7B%0A%20%20%20%20time%2B%2B%3B%0A%20%20%7D%0A%20%20timerID%20%3D%20setTimeout(bubble%2C1000%2Frate)%3B%0A%7D%0Ainit()%3B%0Abubble()%3B","css":"%23canvas%20%7B%0A%20%20width%3A%20100%25%3B%0A%20%20height%3A%20100%25%3B%0A%7D%0A%0Abody%20%7B%0A%20%20background-image%3Aurl('https%3A%2F%2Fimages.unsplash.com%2Fphoto-1482489603187-f0ae98f407a3%3Fdpr%3D1%26auto%3Dcompress%2Cformat%26fit%3Dcrop%26w%3D2000%26h%3D1000')%3B%0A%20%20background-size%3Acover%3B%0A%20%20background-position%3A0%2050%25%3B%0A%7D"}}
<canvas id="snow"></canvas>
var w = window.innerWidth,
    h = window.innerHeight,
    canvas = document.getElementById('snow'),
    ctx = canvas.getContext('2d'),
    rate = 60,
    arc = 1500,
    time,
    count,
    size = 2,
    speed = 10,
    lights = new Array,
    colors = ['#eee','#fff'];

canvas.setAttribute('width',w);
canvas.setAttribute('height',h);

function init() {
  time = 0;
  count = 0;

  for(var i = 0; i < arc; i++) {
    lights[i] = {
      x: Math.ceil(Math.random() * w),
      y: Math.ceil(Math.random() * h),
      toX: Math.random() * 5 + 1,
      toY: Math.random() * 5 + 1,
      c: colors[Math.floor(Math.random()*colors.length)],
      size: Math.random() * size
    }
  }
}

function bubble() {
  ctx.clearRect(0,0,w,h);

  for(var i = 0; i < arc; i++) {
    var li = lights[i];
    
    ctx.beginPath();
    ctx.arc(li.x,li.y,li.size,0,Math.PI*2,false);
    ctx.fillStyle = li.c;
    ctx.fill();
    
    li.x = li.x + li.toX * (time * 0.05);
    li.y = li.y + li.toY * (time * 0.05);
    
    if(li.x > w) { li.x = 0; }
    if(li.y > h) { li.y = 0; }
    if(li.x < 0) { li.x = w; }
    if(li.y < 0) { li.y = h; }
  }
  if(time < speed) {
    time++;
  }
  timerID = setTimeout(bubble,1000/rate);
}
init();
bubble();
#canvas {
  width: 100%;
  height: 100%;
}

body {
  background-image:url('https://images.unsplash.com/photo-1482489603187-f0ae98f407a3?dpr=1&auto=compress,format&fit=crop&w=2000&h=1000');
  background-size:cover;
  background-position:0 50%;
}