SVG向けのアニメーションを作成・調整するツールです。アイコン演出、線画アニメーション、Webサイト内の装飾モーションの検討に使えます。
SVGをドロップ
またはクリックして選択
1. Stroke (線)
時間
2.0
s
遅延
0.0
s
順差(Stagger)
0.1
s
線幅
線の色
動き方 (Easing)
Standard
Linear
Ease In
Ease Out
2. Fill (塗り)
時間
1.0
s
線終了後の待機
0.0
s
塗りの色
色を強制上書き
動き方 (Easing)
Ease In Out
Ease In
Linear
アニメーションを再生成
SVGを読み込んでください
/* ここにCSSが出力されます */