Shape something new讓形狀變個樣

Try a new outline, pick a color and play the transformation between two shapes換個輪廓、挑個顏色，按下播放看看兩個形狀如何變換

Fill

Morph progress0%

Automatic motion is off; drag the slider to change the shape

Like this shape? Download it to keep it

Advanced settings & export

8 nodes / CUBIC

Shape generationNodes 8Irregularity 65%Smoothing 90%

Generation seed A

Changing nodes or irregularity regenerates A and B from their seeds; smoothing preserves manual positions

Node precisionSelected node

Drag a node or use arrow keys; hold Shift for 10 px steps, Esc cancels the current drag. On touchscreens, scroll outside the canvas

Output appearance

Stroke

Stroke width 2 px

Take this shape

Exports the current static shape with a transparent background, without controls, animation or dependencies

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600">
  <path d="M 300 125.54 C 335.22 123.07 399.26 148.19 425.65 174.35 C 452.03 200.52 475.73 262.13 475.91 300 C 476.08 337.87 453.21 404.78 426.83 426.83 C 400.44 448.87 338.76 446.25 300 446.97 C 261.24 447.68 198.47 453.64 168.4 431.6 C 138.33 409.55 96.15 336.11 99.52 300 C 102.88 263.89 160.79 217.03 190.86 190.86 C 220.93 164.69 264.78 128.02 300 125.54 Z" fill="#b44269" stroke="#40393b" stroke-width="2" stroke-linejoin="round"/>
</svg>

Enable JavaScript to play. You can still read how it works below.啟用 JavaScript 即可操作實驗，下方的製作說明仍可直接閱讀

How it works看看怎麼做的

SVG shape studioSVG 形狀工作台

Bézier paths
Seeded geometry
SVG export

Repeatable seeded contours種子產生可重現的輪廓

Seed, node count and irregularity determine the initial contour. Smoothing controls Bézier handles derived from neighboring nodes; drag or arrow keys edit nodes directly.種子、節點數與不規則程度決定起始形狀，平滑參數控制相鄰節點推導的 Bézier 控制柄，拖曳或方向鍵可直接修改節點

Matching paths can morph一致的路徑才能變形

A and B share a node count and cubic segment structure. Interpolating corresponding anchors and handles creates each frame. Editing stays at endpoint A or B to avoid changing an in-between state.A、B 兩形狀使用相同節點數與三次曲線段，對應端點及控制柄插值產生每一格，編輯端點時固定在 A 或 B，避免誤改中間狀態

Export the frame you see下載畫面中的那一格

Export a static SVG with its viewBox, path, fill and stroke. It contains no editor handles or executable scripts and can be used directly as a web asset.匯出是含 viewBox、path 與當前填色、描邊的靜態 SVG，不包含工具控制點或執行腳本，可直接作為網頁素材使用