JSFiddle - React, Tailwind, and code Playground

by frumbert

HTML

<div id="center" class="circle" style="left:250px;top:250px"   >
</div>

CSS

.circle

{
    position: absolute;
    width: 100px;
    height: 100px;
background-repeat: no-repeat;background-position: center center;
border: 2px solid #8fc9eb;

border-radius: 50%;

-moz-border-radius: 50%;

}

.sm
        {
            width: 50px;
            height: 50px;
        border: 1px solid #a19084;

        }

JavaScript

function sind(x) {
                return Math.sin(x * Math.PI / 180);
            }

            /*the law of cosines: 
                        
            cc = aa + bb - 2ab cos(C), where c is the satellite diameter a and b are the legs
                        
            solving for cos C, cos C = ( aa + bb - cc ) / 2ab

            Math.acos((a * a + b * b - c * c) / (2 * a * b)) = C
            */
            function solveAngle(a, b, c) {  // Returns angle C using law of cosines
                var temp = (a * a + b * b - c * c) / (2 * a * b);
                if (temp >= -1 && temp <= 1)
                    return radToDeg(Math.acos(temp));
                else
                    throw "No solution";
            }

            function radToDeg(x) {
                return x / Math.PI * 180;
            }

            var satellite = {
                //settings must have: collection (array), itemDiameter (number), minCenterDiameter (number), center (json with x, y numbers)
                //optional: itemPadding (number), evenDistribution (boolean), centerPadding (boolean), noOverLap (boolean)
                getPosition: function (settings) {
                    //backwards compat
                    settings.centerPadding = settings.centerPadding || settings.itemPadding;
                    settings.noOverLap = typeof settings.noOverLap == 'undefined' ? true : settings.noOverLap;
                    settings.startingDegree = settings.startingDegree || 270;

                    var itemIndex = $.inArray(settings.item, settings.collection);
                    var itemCnt = settings.collection.length;
                    var satelliteSide = settings.itemDiameter + (settings.itemSeparation || 0) + (settings.itemPadding || 0);
                    var evenDistribution = typeof settings.evenDistribution == 'undefined' ? true : settings.evenDistribution;
                    var degreeOfSeparation = (360 / itemCnt); 
                    /*
                   ...