JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="mysvg" width="300" height="300"></svg>

CSS

svg {
		border: solid 1px #00f;
		width: 700px;
		height: 550px;
	}

JavaScript

//dimension of svg
		var svgw = $("#mysvg").width();
		var svgh = $("#mysvg").height();

		//center point of svg
		var xcenter = svgw/2;
		var ycenter = svgh/2;

		var point = '<circle cx="' + xcenter + '" cy="' + ycenter + '" r="10" stroke="red" stroke-width="2" fill="orange" />';

		var path1 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" />';
		var path2 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" transform="rotate(-45 ' + xcenter + ' ' + ycenter + ')" />';
		var path3 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" transform="rotate(-90 ' + xcenter + ' ' + ycenter + ')" />';
		var path4 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" transform="rotate(-135 ' + xcenter + ' ' + ycenter + ')" />';
		var path5 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" transform="rotate(-180 ' + xcenter + ' ' + ycenter + ')" />';
		var path6 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" transform="rotate(-225 ' + xcenter + ' ' + ycenter + ')" />';
		var path7 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" transform="rotate(-270 ' + xcenter + ' ' + ycenter + ')" />';
		var path8 = '<path d="M' + xcenter + ',' + ycenter + ' l 250,0' + '" stroke="orange" stroke-width="1" transform="rotate(-315 ' + xcenter + ' ' + ycenter + ')" />';

		$("#mysvg").html(point + path1 + path2 + path3 + path4 + path5 + path6 + path7 + path8);