Animated Javascript canvas line with random amplitude representing internet traffic

How can I implement these animated lines in the screenshot? They should be endless

screenshot

I tried to do this, but it only turns out to be a sine wave that follows a predictable trajectory, but I need a random trajectory

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wave Animation</title>
    <style>
        canvas {
            display: block;
            margin: 0 auto;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>

<canvas id="myCanvas" width="800" height="400"></canvas>

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    let xOffset = 0;
    const frequency = 0.02;
    const speed = 2;

    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.beginPath();
        ctx.moveTo(0, canvas.height / 2);

        for (let x = 0; x < canvas.width; x++) {
            let currentAmplitude = (x / canvas.width) * 100;
            let y = canvas.height / 2 + Math.sin((x + xOffset) * frequency) * currentAmplitude;
            ctx.lineTo(x, y);
        }

        ctx.strokeStyle = '#000';
        ctx.lineWidth = 2;
        ctx.stroke();

        xOffset += speed;

        requestAnimationFrame(animate);
    }

    animate();
</script>

</body>
</html>