JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<svg viewBox="0 0 300 300" width="500" height="500" style="border:1px solid red;"preserveAspectRatio="xMinYMax meet">
<polygon points="50,2.0799276572610665 91.5,73.96003617136948 8.5,73.96003617136948" id="shape2">
        
     <!-- Making cirle from rectangle -->
     <animate begin="shape2.mouseover" attributeName="rx" dur="2000ms" to="50%" fill="freeze"/>
     <animate begin="shape2.mouseout" attributeName="rx" dur="325ms" to="0" fill="freeze"/>

     <!-- In order to save square value, we need bigger radius then rectangle -->
     <!-- S = width * height -->
     <!-- S = PI * r^2 -->
     <!-- d = r * 2 =  sqrt(S/PI) * 2 = 56 -->
     <animate begin="shape2.mouseover" attributeName="width" dur="375ms" to="56" fill="freeze"/>
     <animate begin="shape2.mouseout;370ms" attributeName="width" dur="675ms" to="50" fill="freeze"/>
     <animate begin="shape2.mouseover" attributeName="height" dur="375ms" to="56" fill="freeze"/>
     <animate begin="shape2.mouseout;370ms" attributeName="height" dur="675ms" to="50" fill="freeze"/>

     <!-- In order to pin shape center position on the screenm we need to move back on half of delta radius -->
     <!-- (56 - 50) / 2 = 3 -->
     <animate begin="shape2.mouseover" attributeName="x" dur="375ms" to="97" fill="freeze"/>
     <animate begin="shape2.mouseout" attributeName="x" dur="675ms" to="100" fill="freeze"/>
     <animate begin="shape2.mouseover" attributeName="y" dur="375ms" to="-3" fill="freeze"/>
     <animate begin="shape2.mouseout" attributeName="y" dur="675ms" to="0" fill="freeze"/>
     
     <!-- TODO: "rx" attribute animation timing working strange. -->
  </polygon>
</svg>