形がモーフィングする SVG
このサンプルは、SVG の path が時間をかけて別の輪郭へ変形し続ける装飾アニメーションです。JavaScript は使わず、SVG 標準の animate 要素で attributeName="d" を指定し、 values に並べた複数の形状を dur="6s" で往復させています。
解説
このサンプルは、SVG の path が時間をかけて別の輪郭へ変形し続ける装飾アニメーションです。JavaScript は使わず、SVG 標準の animate 要素で attributeName="d" を指定し、values に並べた複数の形状を dur="6s" で往復させています。同じ点数・同じ順番のベジェ曲線どうしを補間するため、変形が滑らかにつながるのがポイントです。
使いどころ
- ヒーロー背景でゆっくり呼吸するような有機的なブロブ
- サービス紹介セクションの装飾的な背景シェイプ
- ロード待ち画面の柔らかいアクセント
カスタマイズは values の中間形状を差し替えると変形のクセが変わります。速度は dur を長くするほど落ち着いた印象に。色は fill やグラデーション定義で調整します。動き続ける装飾は気が散る場合があるため、prefers-reduced-motion を尊重したい時はメディアクエリでアニメーションを止める配慮を入れると親切です。
使用例・適したシーン
- ロゴアニメーション
- チェックマーク登場
- 装飾線・イラスト導入
よくある質問
JavaScript は必要ですか。
不要です。SVG の animate 要素だけで変形が動くため、HTML に貼るだけで再生されます。
形を増やすにはどうしますか。
values に並べたパス文字列を増やします。ただし各形状の制御点の数と順番を揃えないと補間が乱れるので、同じ構造のベジェ曲線で書いてください。