JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<svg viewBox="0 0 194.6 185.1">
    
    <polygon fill="#FFD41D" points="97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 
    67.2,60.9">
      
      <animate id="animation-to-check" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="110,58.2 147.3,0 192.1,29 141.7,105.1 118.7,139.8 88.8,185.1 46.1,156.5 0,125 23.5,86.6 
    71.1,116.7"/>

      
      <animate id="animation-to-star" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 
    67.2,60.9"/>

      
    </polygon>
    
  </svg>

JavaScript

var  animationToCheck = document.getElementById("animation-to-check"),
    animationToStar = document.getElementById("animation-to-star");

    animationToStar.beginElement();
    animationToYellow.beginElement();