JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var canvas = document.getElementById('myCanvas');
                  var context = canvas.getContext('2d');


                


                  function drawCircle () {
                  var centerX = 316;
                  var centerY = 380;
                  var radius = 285;

                  var gradient = context.createLinearGradient(400,110,100,0);
                  gradient.addColorStop(0, '#378761');
                  gradient.addColorStop(1, '#02260f');

                  context.beginPath();
                  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
                  context.fillStyle = 'white' ;
                  context.fill();
                  context.lineWidth = 20;
                  context.strokeStyle = gradient;
                  context.stroke();
                  };

                  drawCircle ();

                function drawSupport () {
                
                var gradient = context.createLinearGradient(400,110,100,0);
                gradient.addColorStop(0, '#378761');
                gradient.addColorStop(1, '#02260f');
  
                context.fillStyle = gradient;
                context.beginPath();
                context.moveTo(135,712);
                context.bezierCurveTo(255,701,376,701,496,712);
                context.lineTo(512,712);
                context.bezierCurveTo(544,712,571,686,571,653);
                context.bezierCurveTo(571,639,566,625,556,615);
                context.bezierCurveTo(544,600,522,599,508,610);
                context.bezierCurveTo(396,701,236,701,124,610);
                context.bezierCurveTo(109,599,88,600,75,615);
                context.bezierCurveTo(54,639,56,677,81,698);
                context.bezierCurveTo(92,707,106,712,120,712);
                context.lineTo(135,712);
                context.fill();

                };

                drawSupport ();