JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas> 
        <script> 
            var c = document.getElementsByTagName('canvas')[0];
            var b = document.body;
            var a = c.getContext('2d');
        </script>

JavaScript

c.width=c.height="250";
c.style.border="1px solid red";
var path=[];

a=Math.abs;
x=c.getContext('2d');
//x.strokeStyle="#5E2605";
//x.fillRect(0,0,50,50);



//x.beginPath();
function g(g) {
    x.fillStyle= "red"; 
    x.strokeStyle="5"; 
x.moveTo(a(g-115),250);
x.lineTo(a(g-115),215);
//x.stroke();
//x.closePath()

//    x.beginPath()
//x.strokeStyle="green";
//x.moveTo(100,215)
x.quadraticCurveTo(a(g-85),210,a(g-50),215);
//x.quadraticCurveTo(50,170,70,150); //outward curve
x.quadraticCurveTo(a(g-75),185,a(g-95),150);


x.quadraticCurveTo(a(g-80),145,a(g-65),150);
x.quadraticCurveTo(a(g-85),125,a(g-100),100); //inward curve

x.quadraticCurveTo(a(g-90),98,a(g-82),100);
x.quadraticCurveTo(a(g-105),80,a(g-125),50);
x.stroke()
 }
g(0);
g(250);