SVG STROKE / CSS ANIMATION

SVG Stroke
Animation Studio.

SVGの線を、順番に描く。描画時間・間隔を調整して、動くSVGを保存。

LIVE STROKE ANIMATION

線を描く順番と時間を調整する

SVG + CSS
stroke.local / botanical12 ELEMENTS

CANVAS

1MB・80図形まで。基本図形とgに対応。塗り・元の配色は引き継ぎません。文字・画像・use・style・マスク・フィルターなどは非対応。ファイルはサーバーへ送信しません。

BOTANICALDRAW WITH CSS
茎から葉へ、線を順番に描くREADY

描画合計 5.9s

スライダーを動かすと一時停止します。「再生」は最初から開始します。

各線の開始と終了

SVG内の順番

各行の↑↓でSVG内の要素を並べ替えられます。選択した線はプレビューで強調します（保存するSVGには含めません）。1要素に複数の輪郭がある場合は、まとめて動きます。

自動再生はしません。再生ボタンを押してください。

USE IN YOUR PROJECT

アニメーション付きSVGを保存する

SVGだけで、
線が描かれる。

描画アニメーションはSVG内のCSSです。動くSVGは表示されたときに開始します。サンプルHTMLは、デモと同じく再生ボタンで開始します。

保存SVGの背景は透明です。サンプルHTMLには選んだ背景色を適用します。

JavaScriptは設定・アップロード・要素の並べ替え・再生操作・保存に使用します。SVGの線を描く動きはCSSだけで実装しています。

再生時に空になる線画は装飾用です。重要な情報や操作ボタンは別のHTMLで表示してください。OSの「動きを減らす」設定では完成状態にします。

CURRENT SETTINGS

SVG / 表示時に開始

HOW IT WORKS

線の長さをそろえて、破線をずらす

pathLength="1"

線の長さを1として扱う

実際の長さが違っても、SVGの破線計算では各図形の全長を1として扱えます。図形の形やサイズは変わりません。

stroke-dasharray: 1

全長を1本の破線にする

全長と同じ長さの線と空白を設定します。ダッシュの長さには割合（%）ではなく、pathLengthに合わせた数値を使います。

stroke-dashoffset: 1 → 0

線が見える位置へ動かす

破線の位置を1から0へずらすと線が現れます。各要素の開始位置を変えると、順番に描いたり重ねて描いたりできます。

このツールの「1本」はSVGの描画要素1個です。パスの始点・終点は元のSVGのまま、円や矩形はSVGの規定の開始位置から描きます。アップロードしたSVGは対応する図形とtransformだけを再構築し、元のコードをそのままページへ挿入しません。

参考：MDN：pathLength · MDN：stroke-dasharray · MDN：stroke-dashoffset