SVG PATH / SHAPE INTERPOLATION

SVG Morphing Shape Studio.

図形の輪郭を滑らかに変形。途中の形も確認して、動くSVGを保存。

MORPHING WORKSPACE

変形する2つの形を選ぶ

NATIVE SVG
morph.local / circle → flowerLIVE PATH
CIRCLE → FLOWER

再生ボタンで開始します。

0% / 円100% / 花

スライダーで動きを止めて、途中の形を確認できます。

変形途中の5つの形

押すとその位置へ移動

すべての形を120本の3次ベジェ曲線に揃え、同じ順序の座標同士を補間しています。

背景・対応点・ガイドは、保存SVGに含みません。

SHAPES IN REAL UI

バッジ、ボタン、ヒーローに使う

BRAND BADGE

バッジの輪郭に

中の文字を動かさず、背景の形だけを変形。

BUTTON DECORATION
詳しく見る

ボタンの装飾に

ボタンの領域は固定し、右側の装飾を変形。

HERO ARTWORK

ヒーローの背景に

有機的な形を、見出しの後ろでゆっくり変形。

作例は固定の組み合わせです。「この設定を使う」で、形・配色・時間を編集画面に適用します。保存SVGに文字やボタンのUIは含みません。

EXPORT YOUR SHAPE

動くSVGと、途中の形を保存する

輪郭の変形は、
SVGのanimate。

動くSVGは開始形から自動再生。静止SVGは現在の進行度の形を保存します。HTMLは再生ボタンで開始し、スライダーも操作できます。

SVGにJavaScriptは含みません。再生制御や設定UIにはJavaScriptを使用しています。作例は単一の閉じた輪郭で、任意のSVGのアップロードには対応していません。

動きを減らす設定と画像への埋め込み

インラインSVGとサンプルHTMLは、動きを減らす設定で静止表示します。img経由では内部の設定が反映されない場合があるため、両方のSVGを保存し、pictureで切り替えてください。

<picture>
  <source media="(prefers-reduced-motion: reduce)"
    srcset="./morph-shape.svg">
  <img src="./morph-shape-animated.svg"
    alt="図形の装飾" width="600" height="440">
</picture>

代替テキストは用途に合わせて変更してください。

CURRENT SETTINGS

SVG / ANIMATED PATH

HOW MORPHING WORKS

パスの構造を揃えると、形を補間できる

M + 120 × C + Z

命令の種類・数・順序を揃える

このツールでは輪郭を等間隔に取り直し、同じ数の3次ベジェ曲線へ変換しています。形の近似を含む、変形用のプリセットです。

同じ順序の座標を補間

開始位置と回る方向も揃える

点の対応がずれると、途中で輪郭がねじれます。対応点を表示すると、開始形から終了形へ移動する位置を確認できます。

<animate attributeName="d">

動き自体はSVGで再生する

互換性のある2つのdをvaluesに渡し、keyTimesとkeySplinesで時間を設定。図形の位置や拡大率ではなく、輪郭の座標が変わります。

形が同じ場合は輪郭も変化しません。穴のある図形、複数の独立した輪郭、任意のアイコンやロゴを自動で対応付ける機能はありません。

参考：MDN：animate · SVG仕様：パスデータの補間