JSFiddle - React, Tailwind, and code Playground

JavaScript

var width = 600, height = 600;
        var rx = 200, ry = 100;
        var circleNumbers = 20;

        var svg = d3.select("body").append("svg")
            .attr("width", width).attr("height", height)
            .attr("transform", "translate(0,150)");

        var ellipse = svg.append("ellipse")
            .attr("cx", width / 2)
            .attr("cy", height / 2)
            .attr("rx", rx)
            .attr("ry", ry)
            .style("stroke", "#BCBBB6")
            .style("stroke-width", "3px")
            .style("fill", "transparent");
        var degree = 360 / circleNumbers;

        for (var i = 0; i < circleNumbers; i++) {
            var circlePosition = polarToCartesian(width / 2, height / 2, rx, ry, i * degree);
            svg.append("circle")
                .attr("cx", circlePosition.x)
                .attr("cy", circlePosition.y)
                .attr("r", "8px")
                .attr("fill", "red");
        }


function polarToCartesian(centerX, centerY, radiusX, radiusY, angleInDegrees) {

            var angleInRadians = (angleInDegrees* Math.PI / 180.0);


            return {
                x: centerX + (radiusX * Math.cos(angleInRadians)),
                y: centerY + (radiusY * Math.sin(angleInRadians))
            };
        }