svgでモーフィングアニメーション

<div>
  <svg x="0px" y="0px" width="258px" height="204px" style="position: relative;">
    <clipPath id="frame">
      <path>
        <animate dur="6s" repeatCount="indefinite" attributeName="d" attributeType="XML"  values="M212.18,106.74c-35.71,46.28-47.39,105.84-105.84,105.84S.5,165.19.5,106.74,48.15-4.66,106.34.9c88.28,8.43,142.87,57.85,105.84,105.84Z;
M212.18,118.54c-1.71,58.43-47.39,105.84-105.84,105.84S.5,176.99.5,118.54,74.83,61.93,106.34,12.7c26.51-41.41,108.07,29.77,105.84,105.84Z;M212.18,118.54c-1.71,58.43-42.28,64.23-100.73,64.23S.5,176.99.5,118.54,74.83,61.93,106.34,12.7c26.51-41.41,108.07,29.77,105.84,105.84Z;M211.28,109.16c4.55,40.5-11.45,96.7-69.9,96.7S.5,181.84.5,123.38,41.98,63.12,73.49,13.89c26.51-41.41,129.29,19.64,137.79,95.27Z; 
M212.18,106.74c-35.71,46.28-47.39,105.84-105.84,105.84S.5,165.19.5,106.74,48.15-4.66,106.34.9c88.28,8.43,142.87,57.85,105.84,105.84Z
">
        </animate>
      </path>
    </clipPath>
    <image clip-path="url(#frame)" height="100%" width="100%" xlink:href="https://plain-design.jp/plain/images/2025/03/yellow_stripe.webp" />
  </svg>
</div>
【複雑なプログラム不要】円がぐにょぐにょ動くアニメーション（HTML/SVG）

こちらのサイトを参照させて頂き、作ってみました。
ただ、すんなりできたわけではありませんでした。

イラストレータで丸を変形させてsvgで書き出したのですが、動きません。

注意点があり、
シェイプのアンカーポイント（頂点）の数は全て同じにする必要があるのと、

以下のサイトを読んでわかったのですが、
https://fuuno.net/ani/ani28/ani28.html

丸に近いと、<path>ではなく、<circle>で書き出されてしまうのです。
なので書き出したsvgが、<path>になっているか確認する必要があります。
svgのデータの記述形式が違うとモーフィングされないので、svgデータを作る際にけっこう注意しないといけないようなので、イラストレーターで書き出すのがいいのかどうかも分かりません。
なんでも簡単にモーフィングできるかというと、そうでもないなという感じはありました。

MORE POSTS