JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="c"></svg>

CSS

#c {
  border:1px solid #000000; 
    width: 600px;
    height: 600px;
}

JavaScript

function makeSVG(tag, attrs) {
    var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
    
    for (var k in attrs){
        el.setAttribute(k, attrs[k]);
    }
    
    return el;
}

var centerX = 300;
var centerY = 300;
var distance = 200;
var pieces = 7;
var container = document.getElementById('c');


for (var i = 0; i <= pieces; i++) {
    var ellipse = makeSVG(
            'ellipse', 
            { 
                style: 'fill:yellow',
                cx: centerX + distance * Math.cos(i * (360 / pieces) * Math.PI / 180), 
                cy: centerY + distance * Math.sin(i * (360 / pieces) * Math.PI / 180),
                rx: "30",
                ry: "50" 
            }
    );
    console.log(i,ellipse);
    container.appendChild(ellipse);
}