Snow!

HTML

<!DOCTYPE html>
<html>

<head>
    <style>

    </style>
    <title>SNOW! WOW!</title>
</head>

<body>
    <canvas id="window" width="800" height="800">

    </canvas>
</body>

</html>

CSS

#window {
            background-color: black;
        }

JavaScript

var width = 800
        var height = 800
        var number = 2500
        var snows = []

        for (i = 0; i < number; i++) {
            snows.push({ x: Math.random() * width, y: Math.random()*(height), radius: 5 });
        }

        function update() {
            snows.forEach(s => {
                if (s.y > height) {
                        s.y = 0
                    }
                {
                    s.x += 1.5 * Math.sin(s.y*0.5) * Math.random()
                    s.y += 0.1 * (Math.random() * 5)
                }

            })
        }
        function clearWindow() {
            var c = document.getElementById('window');
            var ctx = c.getContext('2d');
            ctx.clearRect(0, 0, width, height);
        }
        function drawCircle(s) {
            var c = document.getElementById('window');
            var ctx = c.getContext('2d');
            ctx.beginPath();
            ctx.arc(s.x, s.y, s.radius, 0 * Math.PI, 2 * Math.PI);
            ctx.fillStyle = "white"
            ctx.fill()
            ctx.closePath()
        }
        snows.forEach(s => drawCircle(s))
        update()
        //clearWindow()

        setInterval(() => {
            clearWindow()
            update()
            snows.forEach(s => drawCircle(s))
        }, 0.0001)