A Pen by max.

index.html

<canvas id="myCanvas" width="800" height="600'></canvas>

script.js

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

canvas = document.getElementById("myCanvas");
ctx= canvas.getContext("2d");



var amount = 100,
    gravity = 0.4;
    

function Snow(x, y, distance){
  this.xP =x;
  this.yP =y;
  this.distance = distance;
  this.velocity = distance * (Math.random());
  this.radius = distance * 2;
}
Snow.prototype.draw = function(){
  // Create particles
  var radgrad = ctx.createRadialGradient(this.xP,this.yP,0,this.xP,this.yP,this.radius);
  radgrad.addColorStop(0, 'rgba(255,255,255,.7)');
  
  
  ctx.fillStyle= radgrad;
  ctx.shadowColor= "#fff";
  ctx.shadowBlur =10;
  
  ctx.beginPath();
  ctx.arc(this.xP, this.yP, this.radius, 0, Math.PI*2);
  ctx.fill();
  ctx.closePath();
}

var snow = [];
function loop(){
  clearContext();
  for(i =0; i < snow.length; i++){
    var s = snow[i];
    s.yP +=s.velocity * gravity;
    // give some wind direction
    /*var d = new Date();
       t =  d.getTime();
    
    s.xP +=Math.sin(t/1200);*/
    s.draw();
    if(s.yP > canvas.height){
      s.yP = 0;  
    }
    /*if(s.xP > canvas.height){
      s.xP = 0;  
    }*/
  }
  
  requestAnimationFrame(loop);
}

for(i=0; i < amount; i++){
  var snows = new Snow(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 3);
  /*snows.draw();*/
  snow.push(snows);
}

requestAnimFrame(loop);
clearContext = function(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
}

Snow.markdown

Snow

let it snow

A Pen by max on CodePen.

License.

style.scss

@import "compass";
body {
  background:black;
}
#myCanvas {
  @extend body;
}