JSFiddle - React, Tailwind, and code Playground

by Fred Fourie

HTML

<svg width="100" height="100">
	<circle cx="50" cy="50" r="30" stroke="black" stroke-width="1" fill="white" />	
    <circle cx="50" cy="50" r="50" stroke="black" stroke-width="1" fill="none"/>	
	
	
    <polygon points="50,70 75,75 50,20 25,75 50,70" fill="#FF3333" transform="rotate(0,50,50)" id="point">
        <animateTransform attributeType="xml"
    				  attributeName="transform"
    				  type="rotate"
    				  from="0 50 50"
    				  to="360 50 50"
    				  dur="8s"
    				  repeatCount="indefinite" /></polygon>
  
    
    <polygon points="50,70 75,75 50,20 50,70" fill="#CC2929">
	<animateTransform attributeType="xml"
    				  attributeName="transform"
    				  type="rotate"
    				  from="0 50 50"
    				  to="360 50 50"
    				  dur="8s"
    				  repeatCount="indefinite" /></polygon>
    
</svg>

JavaScript

/*for (i = 0; i < 360; i++) {
    var angle = "rotate("+i+",50,50)";
    console.log(angle);
    document.getElementById("point").style.transform = angle;
}*/

var i = "180";
var angle = "rotate("+i+",50,50)";
//document.getElementById("point").style.WebkitTransform = "rotate()";