Untitled

<html>

<head>
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: black;
        }

        canvas {
            display: block;
        }
    </style>

</head>

<body>
    <canvas id="c"></canvas>
    <script>
        var coltext = "#00ff00";
        //color pattern for matrix
        var r = "7f0".split("");
        var g = "f80".split("");
        var b = "f09".split("");
        setInterval(function () {
            coltext = "#" + r[Math.floor(Math.random() * r.length)]
                + g[Math.floor(Math.random() * g.length)]
                + b[Math.floor(Math.random() * b.length)];
        }, 3000);

        window.onload = function () {
            var c = document.getElementById("c");
            var ctx = c.getContext("2d");
            c.height = window.innerHeight;
            c.width = window.innerWidth;

            var matrix = "0123456789ABCDEF";
            //converting the string into an array of single characters
            matrix = matrix.split("");

            var font_size = 20;
            var columns = c.width / font_size; //number of columns for the rain
            //an array of drops - one per column
            var drops = [];
            //x below is the x coordinate
            //1 = y co-ordinate of the drop(same for every drop initially)
            for (var x = 0; x < columns; x++) {
                drops[x] = 1;
            }
            //drawing the characters
            function draw() {
                //translucent BG to show trail
                //Black BG for the canvas
                ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
                ctx.fillRect(0, 0, c.width, c.height);
                //a random color to print
                // coltext = "#" + r[Math.floor(Math.random() * r.length)]
                //     + g[Math.floor(Math.random() * g.length)]
                //     + b[Math.floor(Math.random() * b.length)];

                ctx.fillStyle = coltext; //color text
                ctx.font = 15 + "px arial";
                //looping over drops
                for (var i = 0; i < drops.length; i++) {
                    var text = matrix[Math.floor(Math.random() * matrix.length)];
                    //x = i*font_size, y = value of drops[i]*font_size
                    ctx.fillText(text, i * font_size, drops[i] * font_size);

                    //sending the drop back to the top randomly after it has crossed the screen
                    //adding a randomness to the reset to make the drops scattered on the Y axis
                    if (drops[i] * font_size > c.height && Math.random() > 0.975)
                        drops[i] = 0;
                    //incrementing Y coordinate
                    drops[i]++;
                }
            }
            setInterval(draw, 35);
        };
    </script>
</body>

</html>