SVGパスアニメーションの使い方は？

形を選ぶか、自分のパスのd属性を貼り付けます。再生時間、遅延、イージングを決めて、「再生」を押すか、タイムラインをドラッグします。パスを追加して「パスを順番にずらす」をオンにし、CSSかSVGをコピーします。

発見ライブラリスタジオレルム学ぶラボ

ログイン

発見ライブラリスタジオレルム学ぶラボ

0.0s ループ

パスを貼り付けるか、形を選んでください

ラボ

SVGパスアニメーション

SVGパスアニメーションは、ベクターの線をペンで描いているように見せます。

パス

形

アニメーション

再生時間2.0s

遅延0.0s

イージング

方向

線

線の太さ3px

線の色

不透明度50%で塗る

パスを順番にずらす

CSSの出力

このツールについて

SVGパスアニメーションは、ベクターのパスをペンで描くように描きます。各パスの長さを測ってstroke-dasharrayをその長さにし、stroke-dashoffsetを全長から0まで動かすので、線が始点から伸びていくように見えます。同じ2つのプロパティが、自分のページに貼り付けられるCSSキーフレームになります。

使い方

形を選ぶか、自分のパスのd属性を貼り付けます。
再生時間、遅延、イージングを決めて、「再生」を押すか、タイムラインをドラッグします。
パスを追加して「パスを順番にずらす」をオンにし、CSSかSVGをコピーします。

ガイドを読む（英語）

用語（英語）： stroke-dasharray · キーフレーム · イージング

よくある質問

「往復」はどう再生されますか？

「往復」では、線が描かれたあと、消えながら始点まで戻ります。「ループ」がオンなら繰り返し、オフなら1往復して、何も描かれていない状態で終わります。CSSにも同じ方向と回数が入るので、自分のページでも同じように再生されます。

パスはアップロードされますか？

いいえ。パスはお使いの端末の中で描かれ、外に出ることはありません。

ブラウザの中で作られます。何もアップロードされません。

48のツールすべてフォントの組み合わせドット絵エディタ文字の流し込み用語集（英語）