JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.moveTo(100, 20);

    // line 1
    context.lineTo(200, 160);

    // quadratic curve
    context.quadraticCurveTo(230, 200, 250, 120);

    // bezier curve
    context.bezierCurveTo(290, -40, 300, 200, 400, 150);

    // line 2
    context.lineTo(500, 90);

    // create radial gradient
    var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
    // light blue
    grd.addColorStop(0, '#8ED6bb');
    // dark blue
    grd.addColorStop(1, '#004Cc3');

    context.lineWidth = 55;
    context.strokeStyle = grd;
    context.stroke();

</script>

CSS

body {
            margin: 0px;
            padding: 0px;
        }