JSFiddle - React, Tailwind, and code Playground

by Fred Fourie

HTML

<svg width="100" height="100">
    <circle cx="50" cy="50" r="48" stroke="black" stroke-width="1" fill="#1B75BC" opacity="0.8"/>
    
    <circle cx="50" cy="50" r="45" stroke="black" stroke-width="1" fill="white" />
    
    <polygon id="compassSub" points="50,70 70,75 50,20 30,75 50,70" fill="#FF3333" opacity="0.9" transform="rotate(0,50,50)"></polygon>
    
    <polygon points="50,70 70,75 50,20 30,75 50,70" fill="#FF3333" opacity="0.3" transform="rotate(30,50,50)"></polygon>

    <polygon points="50,15 45,5 55,5" fill="#FF3333" opacity="0.9" transform="rotate(0,50,50)"></polygon>
    
</svg>

JavaScript

document.getElementById("compassSub").setAttribute("transform", "rotate(345,50,50)");