JSFiddle - React, Tailwind, and code Playground

by Scilly_guy

HTML

<svg id="svg" width="100%" height="100%" viewBox="0 0 1000 1000"></svg>

JavaScript

const svg=document.getElementById("svg");      
        const SVGNS='http://www.w3.org/2000/svg';

        let angle1=55;
        let centre1={x:100,y:100};
        let angle2=-105;
        let centre2={x:150,y:150};

        const square=document.createElementNS(SVGNS,'rect');
        square.setAttributeNS(null,'width',50);
        square.setAttributeNS(null,'height',50);
        square.setAttributeNS(null,'x',100);
        square.setAttributeNS(null,'y',100);
        square.setAttributeNS(null,'fill','white');
        square.setAttributeNS(null,'stroke','black');
        square.setAttributeNS(null,'transform',`rotate(${angle1} ${centre1.x} ${centre1.y})`);
        svg.append(square);
        const squareTwo=document.createElementNS(SVGNS,'rect');
        squareTwo.setAttributeNS(null,'width',50);
        squareTwo.setAttributeNS(null,'height',50);
        squareTwo.setAttributeNS(null,'x',130);
        squareTwo.setAttributeNS(null,'y',130);
        squareTwo.setAttributeNS(null,'fill','white');
        squareTwo.setAttributeNS(null,'stroke','black');
        squareTwo.setAttributeNS(null,'transform',`rotate(${angle2} ${centre2.x} ${centre2.y})`);
        svg.append(squareTwo);

        let t=setInterval(intervalFunc,50);

        function intervalFunc(){            
            angle1+=5.1;
            angle2-=3;
        square.setAttributeNS(null,'transform',`rotate(${angle1} ${centre1.x} ${centre1.y})`);
        squareTwo.setAttributeNS(null,'transform',`rotate(${angle2} ${centre2.x} ${centre2.y})`);
        const obsucred=obscuredSection(square,squareTwo);
        obsucred.setAttributeNS(null,'fill','#55FF5555');
            svg.replaceChildren(square,squareTwo,obsucred);
        }

        svg.addEventListener('mousedown',()=>{
            if(t){
            clearInterval(t);
            t=undefined;
            }
            else{
                t=setInterval(intervalFunc,50);
            }
        });

        function...