JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width=24 height=22></canvas>

CSS

body {
  background: #212121;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 1;
ctx.strokeStyle = '#fff';

canvas.addEventListener('mouseenter', function() {
  random = true;
})
canvas.addEventListener('mouseout', function() {
  random = false;
})

canvas.addEventListener('click', function() {
  p = 1;
})




var p = 5;
var fps = 60;
var n = 20;
var offsetX = 0;
var k = 4;
var random = false;
animate();

function animate() {
    setTimeout(function () {
        requestAnimationFrame(animate);

        n+=.1
        offsetX+=.1
        
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        for (var x = offsetX; x < n; x++) {
        		if (random) {
                var y = Math.sin(k*x/p)*p + Math.random() * (3 - (-3)) + (-3);
            } else {
            	var y = Math.sin(k*x/p)*p;
            }
            ctx.lineTo(x-offsetX+1, y+6);
        }
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(1, -y+6, 1, 0, 2 * Math.PI, false);
        ctx.fillStyle = '#fff';
        ctx.fill();
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(20, y+6, 1, 0, 2 * Math.PI, false);
        ctx.fillStyle = '#fff';
        ctx.fill();
        ctx.stroke();

        
    }, 1000 / fps);
}