JSFiddle - React, Tailwind, and code Playground

by theblang

HTML

<svg width="500" height="500">
    <g id="container">
        <g>
            <circle cx=230 cy=190 r=75 stroke="black" stroke-width="3px" fill-opacity="0.0" />
            <g> 
                <circle cx=230 cy=180 r=20 fill-opacity="0.6" fill="red" />    
                <circle cx=250 cy=200 r=20 fill-opacity="0.6" fill="green" />
                <circle cx=210 cy=200 r=20 fill-opacity="0.6" fill="blue" />
            </g>
            <path d="M230, 250
            L230, 150
            Z" stroke="yellow" stroke-width="5px" />       
        </g>
        
        <g>
            <circle cx=305 cy=265 r=75 stroke="black" stroke-width="3px" fill-opacity="0.0" />
            <g> 
                <circle cx=305 cy=255 r=20 fill-opacity="0.6" fill="red" />    
                <circle cx=325 cy=275 r=20 fill-opacity="0.6" fill="green" />
                <circle cx=285 cy=275 r=20 fill-opacity="0.6" fill="blue" />
            </g>
            <path d="M305, 325
            L305, 225
            Z" stroke="yellow" stroke-width="5px" />
            
            <animateTransform
            attributeType="XML"
            attributeName="transform" 
            type = "rotate"
            from="0 305 265" to="90 305 265"
            begin="0" dur="5s"
            repeateCount="indefinite"
            />         
        </g>   
        
        <g>
            <circle cx=155 cy=265 r=75 stroke="black" stroke-width="3px" fill-opacity="0.0" />
            <g> 
                <circle cx=155 cy=255 r=20 fill-opacity="0.6" fill="red" />    
                <circle cx=175 cy=275 r=20 fill-opacity="0.6" fill="green" />
                <circle cx=135 cy=275 r=20 fill-opacity="0.6" fill="blue" />
            </g>
            <path d="M155, 325
            L155, 225
            Z" stroke="yellow" stroke-width="5px" />
            
            <animateTransform
            attributeType="XML"
            attributeName="transform" 
            type = "rotate"
            from="0...

CSS

svg {
    border: 1px solid;
}

JavaScript

$("#container").click(function() {
   console.log("test"); 
});