Небольшой тест на svg
<body>
<button id="p2">Удвоить</button>
<br>
<svg width="410" height="410" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="205" cy="205" r="200" stroke="black" fill="transparent" stroke-width="1"/>
<polygon id="mnog" stroke="red" fill="transparent" stroke-width="1"/>
</svg>
<script>
const O =[205,205];
const R = 200;
let mnog = [[205, 5], [405, 205], [205, 405], [5, 205]];
const draw = (mnog) =>{
const pol = mnog.flat()
document.getElementById('mnog').setAttribute('points', pol)
}
const sredn = ([xo, yo], [xa, ya], [xb, yb], R) => {
const xp = (xa+xb)/2;
const yp= (ya+yb)/2
const d = Math.sqrt((xp-xo)**2 + (yp-yo)**2)
return [xo+(xp-xo)*R/d, yo+(yp-yo)*R/d]
}
const doublm = (mnog) => {
const sred = []
for (let i=0; i<mnog.length; i++)
sred.push(sredn(O, mnog[i], mnog[i === mnog.length-1? 0: i+1], R))
const res = []
for (let i=0; i<mnog.length; i++)
res.push(mnog[i], sred[i])
return res
}
document.getElementById('p2').addEventListener('click', () => {
mnog = doublm(mnog)
draw(mnog)
})
draw(mnog);
</script>
</body>