AlpaKit / design / ビジュアル SVG Path エディタ

ビジュアル SVG Path エディタ

オンラインで直感的にSVGパスとベジェ曲線を描画し、CSS clip-pathコードを生成。アルパが作成したパスに沿って歩き回る様子を楽しみましょう！

ツールモード

ノードの種類

グリッドに吸着パスを閉じる (Z)

プリセットテンプレート

SVG Path dコード

CSS clip-pathコード

キャンバスをクリックしてアンカーポイントを追加します。「選択/編集」モードでは、緑のクローバー型アンカーをドラッグして移動させたり、青いハンドルをドラッグしてベジェ曲線の曲がり具合を調整できます。CSSのoffset-pathを使用して、自分で描いたルート通りにアルパを歩かせることが可能です。