JSFiddle - React, Tailwind, and code Playground

by Scilly_guy

HTML

<svg id="svg" width="100%" height="100%" viewBox="0 0 1000 1000"></svg>
    <form>
        <div class="row">
            <label for="rotation">Update using setAttribute</label>
            <div id="rotationOutput"></div>
            <input type="range" min="-360" max="360" id="rotation">
        </div>
        <div class="row">
            <label for="redraw">Update by redrawing</label>
            <div id="redrawOutput"></div>
            <input type="range" min="-360" max="360" id="redraw">
        </div>
        <div class="row">
            <label for='viewClippath'>Toggle Clippath overlays</label>
            <input type="checkbox" id="viewClippath">
        </div>
    </form>

CSS

.toggleable{
            display:none;
        }
        form{
            position: absolute;
            top:1rem;
            right: 1rem;
            display: flex;
            flex-direction: column;
            align-items:flex-end;
        }
        .row{            
            display: flex;
            flex-direction: row;
        }
        label{
          padding-right:5px;
        }

JavaScript

const svg=document.getElementById("svg");        
        const SVGNS='http://www.w3.org/2000/svg';
        const rotation=document.getElementById('rotation');
        const rotationOutput=document.getElementById('rotationOutput');
        rotation.value=0;
        const redraw=document.getElementById('redraw');
        const redrawOutput=document.getElementById('redrawOutput');
        redraw.value=0;
        updateOutputs();
        const viewClippath=document.getElementById('viewClippath');
        viewClippath.checked=false;
        function drawSquare(size,pos){
            const square=document.createElementNS(SVGNS,'rect');
            square.setAttributeNS(null,'x',pos.x-size/2);
            square.setAttributeNS(null,'y',pos.y-size/2);
            square.setAttributeNS(null,'width',size);
            square.setAttributeNS(null,'height',size);
            square.setAttributeNS(null,'fill','white');
            square.setAttributeNS(null,'stroke','black');
            square.classList.add('drawnSquare');
            return square;
        }

        function pointsOnACircle(centre,radius,number){
            const points = [];
            const angleStep = (2 * Math.PI) / number;

            for (let i = 0; i < number; i++) {
                const angle = i * angleStep;
                const x = centre.x + radius * Math.cos(angle);
                const y = centre.y + radius * Math.sin(angle);
                points.push({ x, y });
            }

            return points;
        }

        const centre={x:200,y:200}
        const number=13;
        const angle=30;
        const size=100;
        function drawCircularArray(centre,radius,number,angle,size,drawFunction){
            const points=pointsOnACircle(centre,radius,number);
            const drawn=[];
            points.forEach((point,i)=>{           
                drawn.push(drawFunction(size,point));
                drawn[drawn.length-1].setAttributeNS(null,'transform',`rotate(${angle -...