<canvas class="snow"></canvas>

var canvas = document.querySelector('.snow'),
    ctx = canvas.getContext('2d'),
    windowW = window.innerWidth,
    windowH = window.innerHeight,
    numFlakes = 200,
    flakes = [];

function Flake(x, y) {
  var maxWeight = 5,
      maxSpeed = 3;
  
  this.x = x;
  this.y = y;
  this.r = randomBetween(0, 1);
  this.a = randomBetween(0, Math.PI);
  this.aStep = 0.01;

  
  this.weight = randomBetween(2, maxWeight);
  this.alpha = (this.weight / maxWeight);
  this.speed = (this.weight / maxWeight) * maxSpeed;
  
  this.update = function() {
    this.x += Math.cos(this.a) * this.r;
    this.a += this.aStep;
    
    this.y += this.speed;
  }
  
}

function init() {
  var i = numFlakes,
      flake,
      x,
      y;
  
  while (i--) {
    x = randomBetween(0, windowW, true);
    y = randomBetween(0, windowH, true);
    
    
    flake = new Flake(x, y);
    flakes.push(flake);
  }
  
  scaleCanvas();
  loop();  
}

function scaleCanvas() {
  canvas.width = windowW;
  canvas.height = windowH;
}

function loop() {
  var i = flakes.length,
      z,
      dist,
      flakeA,
      flakeB;
  
  // clear canvas
  ctx.save();
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, windowW, windowH);
  ctx.restore();
  
  // loop of hell
  while (i--) {
    
    flakeA = flakes[i];
    flakeA.update();
    

    /*for (z = 0; z < flakes.length; z++) {
      flakeB = flakes[z];
      if (flakeA !== flakeB && distanceBetween(flakeA, flakeB) < 150) {          
        ctx.beginPath();
        ctx.moveTo(flakeA.x, flakeA.y);
        ctx.lineTo(flakeB.x, flakeB.y);
        ctx.strokeStyle = '#444444';
        ctx.stroke();
        ctx.closePath();
      }
    }*/

    
    ctx.beginPath();
    ctx.arc(flakeA.x, flakeA.y, flakeA.weight, 0, 2 * Math.PI, false);
    ctx.fillStyle = 'rgba(255, 255, 255, ' + flakeA.alpha + ')';
    ctx.fill();
    
    if (flakeA.y >= windowH) {
      flakeA.y = -flakeA.weight;
    }  
  }
  
  requestAnimationFrame(loop);
}

function randomBetween(min, max, round) {
  var num = Math.random() * (max - min + 1) + min;

  if (round) {
    return Math.floor(num);
  } else {
    return num;
  }
}

function distanceBetween(vector1, vector2) {
  var dx = vector2.x - vector1.x,
      dy = vector2.y - vector1.y;

  return Math.sqrt(dx*dx + dy*dy);
}

<canvas id="canvas"></canvas>

body{margin:0;height:100%;}
canvas{
    position:absolute;top:0;left:0
    background-image: linear-gradient(bottom, rgb(105,173,212) 0%, rgb(23,82,145) 84%);
    background-image: -o-linear-gradient(bottom, rgb(105,173,212) 0%, rgb(23,82,145) 84%);
    background-image: -moz-linear-gradient(bottom, rgb(105,173,212) 0%, rgb(23,82,145) 84%);
    background-image: -webkit-linear-gradient(bottom, rgb(105,173,212) 0%, rgb(23,82,145) 84%);
    background-image: -ms-linear-gradient(bottom, rgb(105,173,212) 0%, rgb(23,82,145) 84%);
    
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(105,173,212)),
        color-stop(0.84, rgb(23,82,145))
    );
}

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

var flakes = [],
    canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    flakeCount = 400,
    mX = -100,
    mY = -100

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

function snow() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < flakeCount; i++) {
        var flake = flakes[i],
            x = mX,
            y = mY,
            minDist = 150,
            x2 = flake.x,
            y2 = flake.y;

        var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
            dx = x2 - x,
            dy = y2 - y;

        if (dist < minDist) {
            var force = minDist / (dist * dist),
                xcomp = (x - x2) / dist,
                ycomp = (y - y2) / dist,
                deltaV = force / 2;

            flake.velX -= deltaV * xcomp;
            flake.velY -= deltaV * ycomp;

        } else {
            flake.velX *= .98;
            if (flake.velY <= flake.speed) {
                flake.velY = flake.speed
            }
            flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
        }

        ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";
        flake.y += flake.velY;
        flake.x += flake.velX;
            
        if (flake.y >= canvas.height || flake.y <= 0) {
            reset(flake);
        }

        if (flake.x >= canvas.width || flake.x <= 0) {
            reset(flake);
        }

        ctx.beginPath();
        ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
        ctx.fill();
    }
    requestAnimationFrame(snow);
};

function reset(flake) {
    flake.x = Math.floor(Math.random() * canvas.width);
    flake.y = 0;
    flake.size = (Math.random() * 3) + 2;
    flake.speed = (Math.random() * 1) + 0.5;
    flake.velY = flake.speed;
    flake.velX = 0;
    flake.opacity = (Math.random() * 0.5) + 0.3;
}

function init() {
    for (var i = 0; i < flakeCount; i++) {
        var x = Math.floor(Math.random() * canvas.width),
            y = Math.floor(Math.random() * canvas.height),
            size = (Math.random() * 3) + 2,
            speed = (Math.random() * 1) + 0.5,
            opacity = (Math.random() * 0.5) + 0.3;

        flakes.push({
            speed: speed,
            velY: speed,
            velX: 0,
            x: x,
            y: y,
            size: size,
            stepSize: (Math.random()) / 30,
            step: 0,
            opacity: opacity
        });
    }

    snow();
};

canvas.addEventListener("mousemove", function(e) {
    mX = e.clientX,
    mY = e.clientY
});

window.addEventListener("resize",function(){
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
})

init();

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Codystar">
<h1>ZORNET.RU</h1>
<div id="snow"></div>

html {
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #fff;
    background-color: #9cf;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6af), to(#bdf));
    background-image: -webkit-linear-gradient(#6af, #bdf);
    background-image: -moz-linear-gradient(#6af, #bdf);
    background-image: linear-gradient(#6af, #bdf);
}

::-webkit-scrollbar {
    display: none;
}

h1 {
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
    text-align: center;
    font: 10em "Codystar", sans-serif;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.snowflake {
    position: absolute;
    display: block;
    position: absolute;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-image: -webkit-radial-gradient(
  center,
  circle farthest-corner,
  rgba(255, 255, 255, 1) 40%,
  rgba(255, 255, 255, 0) 100%
    );
    background-image: -moz-radial-gradient(
  center,
  circle farthest-corner,
  rgba(255, 255, 255, 1) 40%,
  rgba(255, 255, 255, 0) 100%
    );
    background-image: -ms-radial-gradient(
  center,
  circle farthest-corner,
  rgba(255, 255, 255, 1) 40%,
  rgba(255, 255, 255, 0) 100%
    );
    background-image: radial-gradient(
  center,
  circle farthest-corner,
  rgba(255, 255, 255, 1) 40%,
  rgba(255, 255, 255, 0) 100%
    );
}

#snow {
    position: absolute;
    width: 100%;
    height: 100%;
}

var Snowflake = (function() {

    var flakes;
    var flakesTotal = 250;
    var wind = 0;
    var mouseX;
    var mouseY;

    function Snowflake(size, x, y, vx, vy) {
  this.size = size;
  this.x = x;
  this.y = y;
  this.vx = vx;
  this.vy = vy;
  this.hit = false;
  this.melt = false;
  this.div = document.createElement('div');
  this.div.classList.add('snowflake');
  this.div.style.width = this.size + 'px';
  this.div.style.height = this.size + 'px';
    }

    Snowflake.prototype.move = function() {
  if (this.hit) {
   if (Math.random() > 0.995) this.melt = true;
  } else {
   this.x += this.vx + Math.min(Math.max(wind, -10), 10);
   this.y += this.vy;
  }

  // Wrap the snowflake to within the bounds of the page
  if (this.x > window.innerWidth + this.size) {
   this.x -= window.innerWidth + this.size;
  }

  if (this.x < -this.size) {
   this.x += window.innerWidth + this.size;
  }

  if (this.y > window.innerHeight + this.size) {
   this.x = Math.random() * window.innerWidth;
   this.y -= window.innerHeight + this.size * 2;
   this.melt = false;
  }

  var dx = mouseX - this.x;
  var dy = mouseY - this.y;
  this.hit = !this.melt && this.y < mouseY && dx * dx + dy * dy < 2400;
    };

    Snowflake.prototype.draw = function() {
  this.div.style.transform =
  this.div.style.MozTransform =
  this.div.style.webkitTransform =
   'translate3d(' + this.x + 'px' + ',' + this.y + 'px,0)';
    };

    function update() {
  for (var i = flakes.length; i--; ) {
   var flake = flakes[i];
   flake.move();
   flake.draw();
  }
  requestAnimationFrame(update);
    }

    Snowflake.init = function(container) {
  flakes = [];

  for (var i = flakesTotal; i--; ) {
   var size = (Math.random() + 0.2) * 12 + 1;
   var flake = new Snowflake(
    size,
    Math.random() * window.innerWidth,
    Math.random() * window.innerHeight,
    Math.random() - 0.5,
    size * 0.3
   );
   container.appendChild(flake.div);
   flakes.push(flake);
  }
    
    container.onmousemove = function(event) {
    mouseX = event.clientX;
    mouseY = event.clientY;
    wind = (mouseX - window.innerWidth / 2) / window.innerWidth * 6;
   };

   container.ontouchstart = function(event) {
    mouseX = event.targetTouches[0].clientX;
    mouseY = event.targetTouches[0].clientY;
    event.preventDefault();
   };

   window.ondeviceorientation = function(event) {
    if (event) {
     wind = event.gamma / 10;
    }
   };
    
   update();
    };

    return Snowflake;

}());

window.onload = function() {
  setTimeout(function() {
   Snowflake.init(document.getElementById('snow'));
  }, 500);
}

<canvas id='canv'></canvas>
<h2>ZORNET.RU</h2>

@import url(https://fonts.googleapis.com/css?family=Molle:400italic&subset=latin,latin-ext);
body{
background-color: hsla(0,0%,0%,1);
margin: 0px;
overflow: hidden;
font-family: 'Molle', cursive;
}
h2{
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate( -50%, -50%);
  font-size:3em;
  color:hsla(255, 255%, 255%, .1);
}

var c = document.getElementById('canv'),
    $ = c.getContext("2d");
var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight;

Snowy();
function Snowy() {
  var snow, arr = [];
  var num = 600, tsc = 1, sp = 1;
  var sc = 1.3, t = 0, mv = 20, min = 1;
    for (var i = 0; i < num; ++i) {
      snow = new Flake();
      snow.y = Math.random() * (h + 50);
      snow.x = Math.random() * w;
      snow.t = Math.random() * (Math.PI * 2);
      snow.sz = (100 / (10 + (Math.random() * 100))) * sc;
      snow.sp = (Math.pow(snow.sz * .8, 2) * .15) * sp;
      snow.sp = snow.sp < min ? min : snow.sp;
      arr.push(snow);
    }
  go();
  function go(){
    window.requestAnimationFrame(go);
      $.clearRect(0, 0, w, h);
      $.fillStyle = 'hsla(242, 95%, 3%, 1)';
      $.fillRect(0, 0, w, h);
      $.fill();
        for (var i = 0; i < arr.length; ++i) {
          f = arr[i];
          f.t += .05;
          f.t = f.t >= Math.PI * 2 ? 0 : f.t;
          f.y += f.sp;
          f.x += Math.sin(f.t * tsc) * (f.sz * .3);
          if (f.y > h + 50) f.y = -10 - Math.random() * mv;
          if (f.x > w + mv) f.x = - mv;
          if (f.x < - mv) f.x = w + mv;
          f.draw();}
}
function Flake() {
   this.draw = function() {
      this.g = $.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.sz);
      this.g.addColorStop(0, 'hsla(255,255%,255%,1)');
      this.g.addColorStop(1, 'hsla(255,255%,255%,0)');
      $.moveTo(this.x, this.y);
      $.fillStyle = this.g;
      $.beginPath();
      $.arc(this.x, this.y, this.sz, 0, Math.PI * 2, true);
      $.fill();}
  }
}
/*________________________________________*/
window.addEventListener('resize', function(){
  c.width = w = window.innerWidth;
  c.height = h = window.innerHeight;
}, false);