JSFiddle - React, Tailwind, and code Playground

HTML

<svg>
    <line x1="0" y1="250" x2="500" y2="250"
        style="stroke:black;stroke-width:1"/>
    <line x1="250" y1="0" x2="250" y2="500"
        style="stroke:black;stroke-width:1"/>
</svg>

JavaScript

var XMAX = 500;
var YMAX = 500;

// Create path instructions
var path = [];
for (var i = 0; i <= XMAX; i++) {
    var angle = (i / XMAX) * Math.PI * 2;  // angle = 0 -> 2π
    var x = angle * XMAX / (Math.PI * 2);
    var y = Math.sin(angle) * (YMAX / 2) + (YMAX / 2);
    // M = move to, L = line to
    path.push((i == 0 ? 'M' : 'L') + x + ',' + y);
}

// Create PATH element
var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
pathEl.setAttribute('d', path.join(' ') );
pathEl.style.stroke = 'blue';
pathEl.style.fill = 'none';

// Add it to svg element
document.querySelector('svg').appendChild(pathEl);