<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <title>TheRain</title>

  <!-- Inscribed Forever on BTC, created by @Nexo_sol On Twitter-->

  <style>

    body {

        margin: 0;

        overflow: hidden;

        background: black;

    }

    #artCanvas {

        position: absolute;

        top: 0;

        left: 0;

    }

</style>

</head>

<body>

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

<script>

    const canvas = document.getElementById('artCanvas');

    const ctx = canvas.getContext('2d');

    canvas.width = window.innerWidth;

    canvas.height = window.innerHeight;


    const starCount = 200;

    const stars = Array.from({length: starCount}, () => ({

        x: Math.random() * canvas.width,

        y: Math.random() * canvas.height,

        speed: Math.random() * 5

    }));


    function animate() {

        ctx.fillStyle = 'rgba(0,0,0,0.2)';

        ctx.fillRect(0, 0, canvas.width, canvas.height);

        ctx.fillStyle = 'white';

        stars.forEach(star => {

            star.y += star.speed;

            if (star.y > canvas.height) {

                star.y = 0;

                star.speed = Math.random() * 5;

            }

            ctx.fillRect(star.x, star.y, star.speed, star.speed);

        });


        requestAnimationFrame(animate);

    }


    animate();

</script>

</body>

</html>