JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<svg class=“morph” id=“morph” viewBox=“0 0 100 100”> <polygon points=“50,2.0799276572610665 91.5,73.96003617136948 8.5,73.96003617136948” id=“equilateral”> <animate attributeName=“points” dur=“5s” repeatCount=“indefinite” keyPoints=“0;1;0” keyTimes=“0;0.5;1” calcMode=“spline” keySplines=“0.42 0 0.58 1; 0.42 0 0.58 1” values=“50,2.0799276572610665 91.5,73.96003617136948 8.5,73.96003617136948; 50,50 50,50 50,50; 50,2.0799276572610665 91.5,73.96003617136948 8.5,73.96003617136948” /> </polygon> </svg>

CSS

.shape {
  width: 200px; /* Set width of container */
  height: 200px; /* Set height of container */
}

@keyframes shapeShift {
  0% {
    points: "50%,10% 85%,90% 15%,90%";
  }
  100% {
    points: "50,50 85,50 100,65 100,85 85,100 50,100 35,85 0,85 0,65 15,50 0,35 0,15 15,0 35,0 50,15 85,0 100,15 100,35 85,50";
  }
}

#polygon {
  animation: shapeShift 2s forwards; /* Apply animation */
}