JSFiddle - React, Tailwind, and code Playground

by Gabriel Z

JavaScript

var width = 1700, height = 800;
        var rx = width/2 -50, ry = height/2 -50;
        var circleNumbers = 20;

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

        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", "25px")
                .attr("fill", "red");
        }


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

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


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