SVGパスモーフィング：2つのシェイプ間をアニメーション

パスモーフィングの基礎

SVGパスモーフィングは、各コマンドの座標を補間して1つのパスシェイプを別のシェイプにアニメーションします。重要な制約：両方のパスは同じ数と種類のコマンドを持つ必要があります。

基本例：円から四角形へ

円（4つの3次セグメント）：

M 50,0 C 78,0 100,22 100,50
C 100,78 78,100 50,100
C 22,100 0,78 0,50
C 0,22 22,0 50,0 Z

四角形（4つの3次セグメント、ただしコントロールポイントは直線上）：

M 50,0 C 50,0 100,0 100,0
C 100,0 100,100 100,100
C 100,100 0,100 0,100
C 0,100 0,0 0,0 Z

両方ともMとZに加えて正確に4つのCコマンドを持つため、ブラウザは各パラメータペアをスムーズに補間できます。

CSSアニメーション

@keyframes morph {
  0% { d: path("M 50,0 C 78,0 100,22 ..."); }
  100% { d: path("M 50,0 C 50,0 100,0 ..."); }
}
.morphing-path {
  animation: morph 1s ease-in-out infinite alternate;
}

注：CSSのdプロパティアニメーションはモダンブラウザ（Chrome 89+、Firefox 97+、Safari 17+）でサポートされています。

モーフィング用パスの準備

1. コマンド数の一致：両方のパスに同一のM、C、Lなどのシーケンスが必要
2. すべての曲線を3次に変換：Q、T、S、Aを同等のCコマンドに置換
3. 追加ポイントの挿入：一方のパスのセグメントが多い場合、よりシンプルなパスを分割して一致させる
4. 巻き方向の正規化：両方のパスが時計回り（または両方が反時計回り）にする

SMILの代替手段

より広いブラウザサポートにはSVGの<animate>を使用：

<path d="M 50,0 C 78,0 ...">
  <animate attributeName="d"
    values="M 50,0 C 78,0 ...; M 50,0 C 50,0 ..."
    dur="1s" repeatCount="indefinite" />
</path>

ライブラリ

自動正規化による複雑なモーフィングには、Flubber、GSAP MorphSVG、d3-shapeの補間関数などのライブラリを検討してください。