JSFiddle - React, Tailwind, and code Playground

by IPWright83

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="1680" height="523">
    <g width="1680" height="523">
        <g class="galaxy-main" width="1680" height="523">
            <g class="planet selected" transform="translate(341,300) scale(0.5,0.5)">
                <circle r="150" style="fill: rgb(72, 119, 159); stroke-dasharray: 944.477796076938px; stroke-dashoffset: 0px; stroke-width: 8px; stroke: rgb(255, 255, 255);"></circle>
                <g class="moon" transform="translate(181.77581967381693,-144.96137893215555)">
                    <circle r="30" class="moon-circle" id="3" style="fill: rgb(72, 119, 159);"></circle>
                </g>
            </g>
        </g>
    </g>
</svg>

JavaScript

function generatePath(planet, moon, join) {

    function distanceBetween(x1, y1, x2, y2) {
        var a = (x2 - x1) * (x2 - x1);
        var b = (y2 - y1) * (y2 - y1);
        return Math.sqrt(a + b);
    };

    function circleYFromX(circle, x) {
        return Math.sqrt(Math.pow(circle.r, 2) - Math.pow(x - circle.x, 2));
    };

    function calculateAngle(origin, point) {
        var tan = (point.y - origin.y) / (point.x - origin.x);
        var angle = Math.atan(tan) / Math.PI * 180 + 90;
        if (point.x < origin.x) angle += 180;
        return angle;
    };

    // Work out the distance between the moon and planet
    var distance = distanceBetween(planet.x, planet.y, moon.x, moon.y);
    var originDistance = planet.r - moon.r;
    var distanceDiff = distance - originDistance;
    if (distanceDiff < 1) {
        distanceDiff = 1;
    }

    console.log(distance);
    console.log(planet.r);
    console.log(moon.r);
    console.log(join.r);
    console.log(planet.r + moon.r + 2 * join.r);

    // Determine if the moon has moved out of the planet's gravitational pull
    if (distance > 2 * join.r + planet.r + moon.r) {
        return;
    }

    moon.h = 0;
    moon.k = 0 - planet.r + moon.r - distanceDiff;

    var triangleA = planet.r + join.r; // Side planet
    var triangleB = moon.r + join.r; // Side moon
    var triangleC = Math.abs(moon.k - 0); // Side c
    var triangleP = (triangleA + triangleB + triangleC) / 2; // Triangle half perimeter
    var triangleArea = Math.sqrt(triangleP * (triangleP - triangleA) * (triangleP - triangleB) * (triangleP - triangleC)); // Triangle area
    var triangleH;
    var triangleD;

    if (triangleC >= triangleA) {
        var triangleH = 2 * triangleArea / triangleC; // Triangle height
        var triangleD = Math.sqrt(Math.pow(triangleA, 2) - Math.pow(triangleH, 2)); // Big circle bisection of triangleC
    } else {
        var triangleH = 2 * triangleArea / triangleA; // Triangle height
        var triangleD =...