JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100">
  <path id="triangle" d="M 0,-50 L -43.30127018922193,37.5 L 43.30127018922193,37.5 Z" fill="#008CBA" />

  <circle id="circle" cx="0" cy="0" r="50" fill="transparent" stroke="#008CBA" stroke-width="5" />

  <animateTransform attributeName="transform"
                    attributeType="XML"
                    type="morph"
                    from="url(#triangle)"
                    to="url(#circle)"
                    dur="2s"
                    fill="freeze" />
</svg>