Blob morph

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/morph/blob-morph.html
  Desc   : Organic blob morphing between path shapes with SMIL
  ============================================================
-->
<div class="sg-blob-morph" style="--sg-color:#7F77DD; --sg-size:120px;">
  <svg viewBox="0 0 100 100" aria-hidden="true" focusable="false">
    <path>
      <animate
        attributeName="d"
        dur="8s"
        repeatCount="indefinite"
        calcMode="spline"
        keySplines="0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1"
        values="
          M50 12 C 70 12, 88 28, 86 48 C 84 68, 66 88, 46 86 C 26 84, 12 66, 14 46 C 16 26, 30 12, 50 12 Z;
          M52 8  C 74 14, 92 34, 84 52 C 76 70, 60 92, 42 84 C 24 76, 8 60, 16 42 C 24 24, 30 2, 52 8 Z;
          M46 14 C 64 6, 90 22, 90 44 C 90 66, 72 82, 52 88 C 32 94, 10 72, 12 50 C 14 28, 28 22, 46 14 Z;
          M50 12 C 70 12, 88 28, 86 48 C 84 68, 66 88, 46 86 C 26 84, 12 66, 14 46 C 16 26, 30 12, 50 12 Z" />
    </path>
  </svg>
</div>
<style>
  .sg-blob-morph {
    width: var(--sg-size);
    height: var(--sg-size);
  }
  .sg-blob-morph svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .sg-blob-morph path {
    fill: var(--sg-color);
    opacity: 0.9;
  }
</style>