JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox = "0 0 1100 400" version = "1.1">
    <g stroke = "black" stroke-width = "1" fill = "none" id="g1">
    </g>
</svg>

JavaScript

function TCanvas_Arc(x1,y1, x2,y2, x3,y3, x4,y4) {
  try{
        function dist(x1, y1, x2, y2) {
		      var dx = x2 - x1;
		      var dy = y2 - y1;
	    	  return Math.sqrt(dx * dx + dy * dy);
	      }
        
        var rx = Math.floor(Math.abs((x2 - x1) / 2));
        var ry = Math.floor(Math.abs((y2 - y1) / 2));
		
	    	var cx = Math.floor((x1 + x2) / 2);
    		var cy = Math.floor((y1 + y2) / 2);
		
	    	var ix1 = x3 - cx;
	    	var iy1 = y3 - cy;
     		var c = (rx * ry) / Math.sqrt(rx * rx * iy1 * iy1 + ry * ry * ix1 * ix1);
				
	     	var x1a = cx + c * ix1;
        var y1a = cy + c * iy1;
		
        var x1b = cx - c * ix1;
        var y1b = cy - c * iy1;

        var ax1 = x1a;
        var ay1 = y1a;
        if (dist(x1a, y1a, x3, y3) > dist(x1b, y1b, x3, y3)) {
          ax1 = x1b;
          ay1 = y1b;
        }
		
        var ix2 = x4 - cx;
        var iy2 = y4 - cy;

        var x2a = cx + c * ix2;
        var y2a = cy + c * iy2;

        var x2b = cx - c * ix2;
        var y2b = cy - c * iy2;

        var ax2 = x2a;
        var ay2 = y2a;
		
        if (dist(x2a, y2a, x4, y4) > dist(x2b, y2b, x4, y4)) {
          ax2 = x2b;
          ay2 = y2b;
        }
		
        var deg = Math.atan2(ay1 - cy, ax1 - cx) - Math.atan2(ay2 - cy, ax2 - cx);
        if (deg < 0)
          deg += 2 * Math.PI;
		
				var largeArcFlag = deg > Math.PI ? 1 : 0;
        var pathStr = 'M ' + ax1 + ' ' + ay1 + ' ' + 
                      'A ' + rx + ' ' + ry + ' 0 ' + largeArcFlag + ' 0 ' + ax2 + ' ' + ay2;

          
        var xmlns = "http://www.w3.org/2000/svg";
        var path = document.createElementNS(xmlns, "path");
        path.setAttribute('d', pathStr);        
        path.setAttribute('stroke','black');
        path.setAttribute('fill','transparent');
        
        return path;
  } catch (e) {
    alert(e);
    return null;
  }
}

document.getElementById('g1').appendChild(TCanvas_Arc(100,100,200,200,0,300,80,0));