JSFiddle - React, Tailwind, and code Playground

by Sean Coker

HTML

<textarea id="paths" cols=130 rows=7>Paths</textarea>
<br/>

CSS

body {
        background-color: ivory;
    }

JavaScript

var svgns = "http://www.w3.org/2000/svg";

        var svg = document.createElementNS(svgns, "svg");
        svg.setAttribute('width', '600px');
        svg.setAttribute('height', '600px');
        document.body.appendChild(svg);

        var cx = 150;
        var cy = 150;

        addPath(svg, "arc1", "transparent", "red", 15, regularArcData(cx, cy, 50, 0, 135, false));
        addPath(svg, "arc2", "transparent", "green", 15, regularArcData(cx, cy, 65 + 2, 0, 180, false));
        addPath(svg, "arc3", "transparent", "blue", 15, regularArcData(cx, cy, 80 + 4, 0, 215, false));
        addPath(svg, "arc4", "transparent", "orange", 15, regularArcData(cx, cy, 95 + 6, 0, 250, false));
        addPath(svg, "arc5", "transparent", "purple", 15, regularArcData(cx, cy, 110 + 8, 0, 270, false));


        function addPath(theSvg, id, fill, stroke, strokeWidth, data) {
            var path = document.createElementNS(svgns, "path");
            path.setAttribute("id", id);
            path.setAttribute("fill", fill);
            path.setAttribute("stroke", stroke);
            path.setAttribute("stroke-width", strokeWidth);
            path.setAttribute('stroke-linejoin', 'round')
            path.setAttribute("d", data);
            theSvg.appendChild(path);

            var pathSvg = ""
            pathSvg += "\n" + "<path id='" + id + "' fill='" + fill + "' stroke='" + stroke + "' stroke-width='" + strokeWidth + "' d='" + data + "'/>";
            $("#paths").text($("#paths").text() + pathSvg);
        }


        function regularArcData(cx, cy, radius, startDegrees, endDegrees, isCounterClockwise) {

            var offsetRadians = 0; // -Math.PI/2 for 12 o'clock
            var sweepFlag = (isCounterClockwise) ? 0 : 1;
            var startRadians = offsetRadians + startDegrees * Math.PI / 180;
            var endRadians = offsetRadians + endDegrees * Math.PI / 180;
            var largeArc = ((endRadians - startRadians) % (2 * Math.PI)) > Math.PI ? 1 : 0;
           ...