Background.html

<html>
    <link rel="stylesheet" href="style.css" />
    <body>
    <p><canvas id="canvasId" oncontextmenu="return false;"></canvas>
    <script>
    canvas = document.getElementById("canvasId");
    canvas.width  = window.innerWidth;
    canvas.height = window.innerHeight;
    
    if (canvas.getContext) ctx = canvas.getContext("2d"); else alert("Canvas element is not available");
    ctx.font = "bold 16px Courier";
    let intervalID = setInterval(draw, 10);

    let a = 2;
    let h = 0;
    function graph(n) {
        return 50*(Math.E**(-0.004*(n-canvas.width/3)))*Math.sin(((n-canvas.width/3)-h)/a);
    }

    function strGenerate(length) {
        var result = '';
        var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+{}|:"<>?';
        var charactersLength = characters.length;
        for (i = 0; i < length/10; i++) {
            result += (Math.random() + 1).toString(36).substring(2);
        }
        return result;
    }
    let counter = 0;
    let textarr = [];
    function draw()
    {
        //Generate new text
        if (counter == 0) {
            for (let i = 0; i < canvas.width/10; i++) {
                textarr[i] = strGenerate(canvas.height/5);
            }
        }
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, canvas.width,canvas.height);
        ctx.fillStyle = "#7D9DDF";
        for (let i = 0; i < canvas.width/10; i++) {
            for (let j = 0; j < textarr[0].length; j++) {
                if (10+j*10 < canvas.height/2-graph(i*10) && 20+j*10 > canvas.height/2-graph(i*10)) {
                    ctx.fillText(textarr[i].charAt(j), i*10, 10+j*10);
                }
            }
        }
        
        ctx.fillStyle = "rgba(125, 157, 223, 0.25)";
        for (let i = 0; i < canvas.height; i += 16) ctx.fillText(textarr[i/16], 0, 10 + i);

        ctx.fill();

        h+=0.05;
        // a=0.01*Math.sin(h)+1;

        counter++;
        counter %= 25;
    }
</script></body></html>