WEB TOOL / No. 003

Bezier Curve Codec

曲線を、画像ではなく復元可能なデータとして扱う。

Canvas上の点を動かし、3次ベジェ曲線を編集できます。できあがった形はJSONやSVGなどで取り出せます。

WORKBENCH NOTE / 01ANCHOR / CONTROL / CURVE

使い方 点をドラッグして形を変えます。下の数値欄からも座標を編集できます。

出力形式へ
TOOL DESK / 01曲線の作業台保存先:このブラウザー
01 / PREVIEW

曲線を動かす

1280 × 670 px

点をドラッグして移動。Shift+クリックで複数選択し、選択枠の角で拡大・縮小できます。

03 / OUTPUT

データを取り出す

編集内容は各形式へリアルタイムに反映されます。

JSON

保存・再読み込み

Short code

BZC0–2 / normalized

SVG path

d attribute

SVG document

complete markup

Canvas JavaScript

CanvasRenderingContext2D
作品紹介に戻る