Morfolojik SVG Animasyonu

<style>
.morph-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

svg {
  width: 200px;
  height: 200px;
}

path {
  fill: none;
  stroke: #ff5e62;
  stroke-width: 8;
  stroke-linecap: round;
  transition: all 0.8s ease-in-out;
}
</style>

<div class="morph-container">
  <svg viewBox="0 0 200 200" id="morph-svg">
    <path id="morph-path" d="M20,20 L180,20 L180,180 L20,180 Z" />
  </svg>
</div>

<script>
const shapes = [
  "M20,20 L180,20 L180,180 L20,180 Z", // kare
  "M100,20 L180,100 L100,180 L20,100 Z", // elmas
  "M100,20 C140,20 180,60 180,100 C180,140 140,180 100,180 C60,180 20,140 20,100 C20,60 60,20 100,20 Z", // daire
  "M20,100 C20,50 100,50 100,20 C100,50 180,50 180,100 C180,150 100,150 100,180 C100,150 20,150 20,100 Z" // kalp
];

let currentShape = 0;
const path = document.getElementById("morph-path");

function morphShape() {
  currentShape = (currentShape + 1) % shapes.length;
  path.setAttribute("d", shapes[currentShape]);
}

setInterval(morphShape, 2000);
</script>