SVG blob モーフィング背景
SVG blob モーフィング背景は、有機的な 液体のような形がゆっくり姿を変え続ける 装飾です。このサンプルは画像でもCSSアニメーションでもなく、SVGの path に animate 要素を入れ、 attributeName="d" で複数の輪郭データ（ d 属性の値）を 8s かけて次々と切り替えています。
解説
SVG blob モーフィング背景は、有機的な液体のような形がゆっくり姿を変え続ける装飾です。このサンプルは画像でもCSSアニメーションでもなく、SVGの path に animate 要素を入れ、attributeName="d" で複数の輪郭データ（d 属性の値）を 8s かけて次々と切り替えています。repeatCount="indefinite" で延々と繰り返すため、なめらかに変形するなめらかな背景になります。ベクター描画なのでどんな解像度でも輪郭がくっきり保たれます。
使う場面
- ヒーローやセクション背景の柔らかい装飾
- アバターやアイコンを切り抜くマスク形状
- 余白に動きを足したいランディングページ
色は path の fill（#667eea）を変えるだけで差し替えられます。複数の d 値はすべて同じ点数・近い形にしておくと、変形が自然につながります。点数が大きく違うと形が飛んで見えるので注意してください。常に動き続ける装飾なので、目立たせすぎると本文の邪魔になります。背景の一部として透明度や配色を抑えめにし、動きが苦手なユーザーには prefers-reduced-motion で静止状態を見せる配慮も検討してください。
使用例・適したシーン
- ロゴアニメーション
- チェックマーク登場
- 装飾線・イラスト導入
よくある質問
色やサイズはどう変えますか
色はpath要素のfill属性を書き換えます。サイズはblobを包む要素の幅と高さ（このサンプルは240px四方）を変えれば拡大縮小できます。SVGはベクター描画なので、大きくしても輪郭がぼやけません。
変形がカクついて見えるのですが
切り替える複数のd属性の値が、形や点の数で大きく食い違っているとカクつきます。各形状の制御点の数をそろえ、近い輪郭どうしを順に並べると、なめらかに変形してつながります。