JSFiddle - React, Tailwind, and code Playground

by Fred Fourie

HTML

<svg width="100" height="100">
    
       <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#003366;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#4D7094;stop-opacity:1" />
    </linearGradient>
  </defs>
    
    <defs>
    <linearGradient id="RED" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#FF8080;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#FF0000;stop-opacity:1" />
    </linearGradient>
  </defs>
        
    <circle cx="50" cy="50" r="49" stroke="black" stroke-width="1" fill="#1B75BC" />	
	<circle cx="50" cy="50" r="45" stroke="black" stroke-width="1" fill="white"  />	
	
	<polygon points="50,70 70,75 50,20 30,75 50,70" fill="url(#RED)" opacity="0.9">
	<animateTransform attributeType="xml"
    				  attributeName="transform"
    				  type="rotate"
    				  from="0 50 50"
    				  to="360 50 50"
    				  dur="4s"
    				  repeatCount="indefinite" /></polygon>