svg path parser:

<script src="https://cdn.jsdelivr.net/npm/path-data-polyfill@1.0.4/path-data-polyfill.min.js"></script>

<svg viewBox="-10 -10 20 20">
<title>This is for Path parser</title>
<desc>This is for Path parser and an example</desc>
<style>
path {fill:gold; stroke:blue;stroke-width:.2;}
line {stroke:gray;stroke-width:.02;fill:none;}
</style>


<defs></defs>
<g id="g1" transform="translate(0,0)">
<path id="path1" d="M0,0 Q10,0 10,10 Q5,10 0,0"/>

</g>



</svg>


<script>

var NS="http://www.w3.org/2000/svg";
const path = document.querySelector('#path1');
console.log(path)
const data = path.getPathData();
console.log(data);
data[0].values[0]
data[0].values[1]
data[1].values[0]
data[1].values[1]
data[1].values[2]
data[1].values[3]
var line=document.createElementNS(NS,'line');
line.setAttribute('x1',data[0].values[0]);
line.setAttribute('y1',data[0].values[1]);
line.setAttribute('x2',data[1].values[0]);
line.setAttribute('y2',data[1].values[1]);
var svg=document.querySelector('svg')
svg.getElementById('g1').appendChild(line);

var line=document.createElementNS(NS,'line');
line.setAttribute('x1',data[1].values[0]);
line.setAttribute('y1',data[1].values[1]);
line.setAttribute('x2',data[1].values[2]);
line.setAttribute('y2',data[1].values[3]);
var svg=document.querySelector('svg')
svg.getElementById('g1').appendChild(line);;

var line=document.createElementNS(NS,'line');
line.setAttribute('x1',data[1].values[2]);
line.setAttribute('y1',data[1].values[3]);
line.setAttribute('x2',data[2].values[0]);
line.setAttribute('y2',data[2].values[1]);
var svg=document.querySelector('svg')
svg.getElementById('g1').appendChild(line);;

var line=document.createElementNS(NS,'line');
line.setAttribute('x1',data[2].values[0]);
line.setAttribute('y1',data[2].values[1]);
line.setAttribute('x2',data[2].values[2]);
line.setAttribute('y2',data[2].values[3]);
var svg=document.querySelector('svg')
svg.getElementById('g1').appendChild(line);;

</script>

<script>
var g1=document.getElementById('g1');
var clone1=g1.cloneNode(true);
clone1.id="g2";
console.log(clone1);
clone1.style="transform-box:fill-box;transform-origin:0% 0%;transform:rotate(90deg);";
svg.appendChild(clone1);


var clone2=g1.cloneNode(true);
console.log(clone2);
clone2.id="g3";
clone2.style="transform-box:fill-box;transform-origin:0% 00%;transform:rotate(180deg);";
svg.appendChild(clone2);

var clone3=g1.cloneNode(true);
console.log(clone3);
clone3.id="g4";
clone3.style="transform-box:fill-box;transform-origin:0% 00%;transform:rotate(-90deg);";
svg.appendChild(clone3);
</script>