Падающий снег для сайта с сильным ветром

Продолжаем украшать веб ресурс к зимним праздникам. Сегодня нашел на просторах еще один скрипт метели для сайта. На сей раз мы используем одну картинку, её кстати можно заменить на любую понравившуюся. Сам снег разлетается от центра экрана в разные стороны, создаётся впечатление что ветер дует в лицо и вместе с ним метёт метель. 

HTML

<span>
<p><b><i>Blowy Snow</i></b></p>
</span>

CSS

body {
    background-image: radial-gradient(ellipse farthest-corner at center bottom, rgba(255,5,5,0.6) 5%, #000 100%);
    background-color:#000;
    background-size: 100% 100%;
    background-attachment: fixed;
}
span {
    display: inline-block;
    position: relative;
    padding: 4px;
    width: 200px;
    background-color: #770000;
    border-radius: 5px;
    font: 20px verdana;
    color: #fff; 
    text-align: center;
}
p {
    margin: 5px;
}

JS

(function(){
    //Blowy Snow

    var flakeNum = 250;
    var pic = new Image(20,20);
    pic.src = "https://lenger.kz/uploads/web/png.webp";
    var d = document;
    var deg = 180/3.14;
    var rad = 3.14/180;
    var idx = (typeof d.getElementsByTagName != "undefined")?d.getElementsByTagName('div').length:0;
    var f = {w:0,h:0,cx:0,cy:0,flake:[],x:[],y:[],cutRight:[],cutLeft:[],dst:[],size:[],vel:[],acc:[],blo:[],rate:[],rng:[],ang:[],counter:[]}

    var con = d.createElement('div');
    con.setAttribute('style','display:block;'
    +'position:fixed;'
    +'height:100%;width:100%;'
    +'margin:auto;padding:0px;'
    +'top:0;left:0;left:0;right:0;'
    +'overflow:hidden;' 
    +'visibility:hidden;');
    d.body.appendChild(con);

    for (var i = 0; i < flakeNum; i++) {
        f.counter[i] = 0;
        var img = d.createElement('img');
        img.setAttribute('id','flake'+(idx+i));
        img.setAttribute('src',pic.src);
        img.setAttribute('style','display:none;'
        +'position:absolute;'
        +'transform: translate3d(0px,0px,0)'
        +'height:5vh;width:5vh;'
        +'visibility:visible;');
        con.appendChild(img);
    }

    function win() {
        var ddw = d.documentElement.clientWidth;
        var ddh = d.documentElement.clientHeight;
        var scrollBarRight = (typeof ddw == 'number') ? window.innerWidth - ddw : 0;
        var scrollBarBottom = (typeof ddh == 'number') ? window.innerHeight - ddh : 0;
        f.h = window.innerHeight - scrollBarBottom -1;
        f.w = window.innerWidth - scrollBarRight -1;
        f.cy = f.h/2|0;
        f.cx = f.w/2|0;
    }

    function rsz() {
        win();
        for (var i = 0; i < flakeNum; i++) {
            f.flake[i].style.display = 'none';
            f.counter[i] = 0;
            rst(i);
        }
    }
    window.addEventListener("resize", rsz, false);

    function rst(s) {
        if (f.counter[s] > 1) {
            f.flake[s].style.display = 'block';
        }
        if (f.counter[s] < 2) {
            f.counter[s]++;
        }
        f.cutLeft[s] = 0 + Math.random() * f.cx/2;
        f.cutRight[s] = f.w - Math.random() * f.cx/2;
        f.y[s] = 0 + Math.random() * f.h;
        f.x[s] = (f.cx - f.cx/3) + Math.random() * f.cx/1.5;
        f.rng[s] = f.cx-100 + Math.random() * 200;
        var dy = (f.y[s] - f.cy/6);
        var dx = (f.x[s] - f.rng[s]);
        f.ang[s] = Math.atan2(dy,dx) * deg;
        f.dst[s] = 5 + (Math.sqrt(dy*dy + dx*dx));
        f.size[s] = 0.1;
        f.acc[s] = 0; 
        f.blo[s] = 0;
        f.vel[s] = (1.8 * (f.dst[s] / 2) / 100);             
        f.rate[s] = (-0.01 + Math.random() * 0.02);
    }

    function animate() {
        for (var i = 0; i < flakeNum; i++){
            f.y[i] += f.vel[i] * Math.sin((f.ang[i]) * rad);
            f.x[i] += f.vel[i] * Math.cos((f.ang[i]+=f.blo[i]) * rad);
            f.acc[i] = (f.vel[i] / (f.dst[i] + (400 * f.vel[i] / 100)) * f.vel[i]);
            f.vel[i] += f.acc[i];
            f.size[i] += ((f.vel[i] * 0.6) / (190 * f.dst[i] / 100));
            f.blo[i] += f.rate[i];
            if (f.y[i] < -f.cy/2) {
                f.ang[i]  *= -1;
            }
            if (f.x[i]+f.size[i] < f.cutLeft[i] || f.x[i] > f.cutRight[i] || f.y[i] > f.h || f.x[i] > f.w || f.x[i]+f.size[i] < 0){
                rst(i);
            }
            f.flake[i].style.transform = 'translate3d('+f.x[i]+'px, '+f.y[i]+'px,0) scale('+f.size[i]+')';
        }
    }

    function run() {
        requestAnimationFrame(run);
        animate();
    }

    function init() {
        win();
        for (var i = 0; i < flakeNum; i++){
            f.flake[i] = d.getElementById("flake"+(idx+i));
            rst(i);
        }
        run();
    }
    window.addEventListener("load",init,false);

})();