Falling snow effect using HTML & JavaScript

<style>
    body{background:#0F0F0F;margin:0}
    #c{position:fixed;top:0;left:0;pointer-events:none;z-index:9}
    #b{
    background: rgba(0,0,0,0.852);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#sn-b:hover { background: rgba(255, 255, 255, 0.25); transform: scale(1.1); }</style>

<canvas id="c"></canvas>
<button id="b" aria-label="Toggle Snow"><svg viewBox="0 0 24 24"><path d="M13,2V6H11V2H13M17.7,4.9L19.1,6.3L16.2,9.2L14.8,7.8L17.7,4.9M4.9,6.3L6.3,4.9L9.2,7.8L7.8,9.2L4.9,6.3M22,11V13H18V11H22M2,13V11H6V13H2M14.8,16.2L16.2,14.8L19.1,17.7L17.7,19.1L14.8,16.2M9.2,16.2L7.8,14.8L4.9,17.7L6.3,19.1L9.2,16.2M11,22V18H13V22H11Z"/></svg></button>

<script>
let d=document,a=d.getElementById('c'),x=a.getContext('2d'),w,h,R=Math.random,S=localStorage,v=S.getItem('s')!='0',
F=[...Array(150)].map(()=>({x:R()*screen.width,y:R()*screen.height,r:R()*3+.5,d:R()*9}));
let Z=()=>{w=a.width=innerWidth;h=a.height=innerHeight},
L=()=>{
    if(!v)return x.clearRect(0,0,w,h);
    x.clearRect(0,0,w,h);
    F.forEach(f=>{
        x.beginPath();x.arc(f.x,f.y,f.r,0,7);
        x.fillStyle=`rgba(255,255,255,${f.r/4})`;x.fill();
        f.y+=f.r**.6;f.x+=Math.sin(f.y*.01+f.d)*.5;
        if(f.y>h){f.y=-5;f.x=R()*w}
    });
    requestAnimationFrame(L)
};
Z();onresize=Z;
d.getElementById('b').onclick=()=>{v=!v;S.setItem('s',v?1:0);v?L():x.clearRect(0,0,w,h)};
v&&L();
</script>

You may like these posts :

Write Your Comment