SVGの「線が描かれる」エフェクトをブラウザ上で調整できます。 パスの長さを自動計測し、コピーしてすぐ使えるCSSとHTMLを出力します。
.svg-draw {
fill: none;
stroke: #6366f1;
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
}
.svg-draw-1 {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: svg-draw 1.5s ease-in-out 0.00s infinite;
}
@keyframes svg-draw {
to {
stroke-dashoffset: 0;
}
}
/* アニメーションを抑制している利用者には、描き終わった状態を静的に表示する */
@media (prefers-reduced-motion: reduce) {
[class*="svg-draw-"] {
animation: none;
stroke-dashoffset: 0;
}
}SVGアニメーションジェネレーターとは？CSSだけで線を描く仕組み
本ツールは、SVGの「stroke-dasharray（破線の間隔）」と「stroke-dashoffset（破線の開始位置）」を操作して、その場でペンで描いているような演出（ラインドローイング）を作成できるジェネレーターです。 通常この演出にはJavaScriptでgetTotalLength()を実行してパスの長さを取得する手間がかかりますが、本ツールはブラウザ上で計測とCSS生成を完結させます。SVGコードをそのまま貼り付けるだけで、含まれる複数のパスを自動検出し、順次描画のディレイ・逆再生・viewBoxの自動フィット・prefers-reduced-motion対応まで含んだCSSとHTMLを出力します。
こんなシーンで便利です
ロゴのラインアニメーション
複数パスで構成されたロゴも、SVGコードを貼るだけで検出。順番に描く間隔を設定すれば一筆書きのような演出になります。
アイコンのマイクロインタラクション
チェックマークや矢印にホバー演出を追加。逆再生をオンにすれば、描いた線が消えていく動きも確認できます。
ランディングページの視線誘導
手書き風の矢印や波線をアニメーションさせて、ユーザーの視線をボタンや重要なコンテンツへ自然に導きます。
インフォグラフィックの段階表示
グラフの枠線やコネクタに適用し、ディレイを付けて情報をステップごとに提示する演出に活用できます。
使い方は簡単 4ステップ
- FigmaやIllustratorからコピーしたSVGコード（またはd属性）をテキストエリアに貼り付けます。
- 再生時間・イージング・順番に描く間隔を調整して、動きを確認します。
- 線の太さや色をデザインに合わせて設定します。
- 「CSSをコピー」「HTMLをコピー」で、生成されたコードをプロジェクトに貼り付けます。
※表示範囲の自動フィットをオンにすると、Figmaなどの大きな座標系のSVGでも枠内に収まるよう自動調整されます。
ご利用時の注意点
- 自動計測：内部でgetTotalLength()を呼び出し、各パスの長さをピクセル単位で算出しています。検出本数と全長はプレビュー右上に表示されます。
- 対応する図形：path・line・polyline・polygon を最大24個まで検出します。line系はpathのd属性へ自動変換されます。
- CSSの適用方法：出力されたHTMLのクラス（svg-draw / svg-draw-1 …）と、生成されたCSSをセットで使用してください。
- アクセシビリティ：生成CSSには prefers-reduced-motion 用のフォールバックが自動的に含まれます。
- レスポンシブ性：viewBoxが設定されていれば、アニメーションも拡大・縮小に自動で追随します。
SVGアニメーションで使うCSSプロパティ一覧と設定の目安
ラインドローイングを実装する際に使うパラメータと、生成コードでの扱いをまとめました。
| 項目名（CSSプロパティ） | 役割・設定内容 | 本ツールでの扱い・実装のポイント |
|---|---|---|
| stroke-dasharray | 破線の間隔を指定 | パスの全長と同じ値を自動で埋め込みます（手計算不要）。 |
| stroke-dashoffset | 破線の開始位置をずらす | 全長から0へ変化させることで線が描かれます。keyframesも自動生成。 |
| animation-delay | 再生開始を遅らせる | 「順番に描く間隔」を設定すると、パスごとに段階的な値を自動計算します。 |
| animation-direction | 再生方向（正順・逆再生） | 逆再生をオンにすると reverse が付与され、線が消える演出になります。 |
| animation-fill-mode | 終了後の状態を保持 | ループOFF時は forwards を自動付与。描き終わった線が消えません。 |
| prefers-reduced-motion | 動きの抑制設定への配慮 | 抑制中の利用者には静的表示にするメディアクエリを自動で出力します。 |
| viewBox属性 | SVGの表示範囲 | 貼り付けたコードから読み取り、必要なら外接矩形から自動フィットします。 |
【CSSだけで実装するメリット】
SVGアニメーションは「JavaScript不要の軽量な演出」として、Lighthouseなどのパフォーマンス計測でも有利に働きます。特にロゴのインラインSVG化はLCP（最大視覚コンテンツの表示時間）の改善にも寄与するため、表示速度の観点からも有効な手法です。
【対応ブラウザと注意点】
Chrome・Firefox・Safari・Edgeの主要ブラウザで動作します。生成コードは最も汎用性が高い標準CSS Animationの仕様に準拠しており、外部ライブラリを一切必要としません。
モダンフロントエンドにおけるSVGアニメーションの応用設計と最適化手法
単一のラインドローイング生成から一歩進み、コンポーネント開発やプロダクション環境で求められる制御と最適化のテクニックを解説します。
Intersection Observerを用いたスクロール連動型トリガーの実装
ページの初期読み込み時にすべてのSVGアニメーションを一斉に開始させると、画面外の演出はユーザーに気付かれないまま消費されてしまいます。
JavaScriptのIntersection Observer APIを併用し、対象のSVG要素がビューポートへ10%以上入った瞬間にクラスを付与してCSS Animationを発火させる制御が、実務では標準的な手法です。
本ツールが出力するCSSはクラス指定のみで完結しているため、そのクラスを後から付与する形へ書き換えるだけでトリガー制御に対応できます。
複数パスの連続描画を実現するanimation-delayの設計
ロゴや複雑なイラストを構成する複数のパスを一筆書きのように順番に描画させるには、CSSのanimation-delayを段階的にずらします。
各パスの描画時間が1.2秒なら、2番目には1.2s、3番目には2.4sを割り当てるのが基本形ですが、あえて重ねて0.2秒刻みにするとテンポの良い印象になります。
本ツールの「順番に描く間隔」はこの遅延値を自動計算するため、数値を1つ変えるだけで全体のリズムを調整できます。
ホバー時のリバース再生と、心地よいマイクロインタラクション
ボタンやナビゲーションアイコンに線を描く演出を加える場合、マウスが離れたときの挙動まで設計することが重要です。
ホバー時に通常再生させ、解除時にanimation-direction: reverseを適用したクラスへ切り替えると、描かれた線が逆方向に消えていく自然な動きになります。
本ツールの逆再生スイッチで、切り替え後にどう見えるかを事前に確認できます。
パスの単純化と、描画品質・ファイルサイズのバランス
アンカーポイントが多すぎるパスは、d属性の文字列が長くなりHTMLの肥大化を招きます。
デザインツール側で「パスの単純化」を実行し、見た目が崩れない範囲でアンカーを減らしてから書き出すのが定石です。
また、塗り（fill）を含む図形はラインドローイングに向かないため、「線（stroke）でアウトライン化」した状態のパスを用意すると、意図した通りの描画になります。
SVGアニメーションでよくある失敗と、その直し方
getTotalLengthを取得せず、stroke-dasharrayの数値を推測して線が途切れる
パスの長さを計測せずに、stroke-dasharrayやstroke-dashoffsetの値を適当に設定してしまう実装ミスです。値が短すぎると線が途中で止まり、長すぎると描き始めまでに空白の時間が生まれます。パスの形を少し変えるたびに数値の調整が必要になる点も厄介です。
💡 対策・解決策を見る▼
複数パスのロゴを1つのパスとして扱い、一部しかアニメーションしない
FigmaやIllustratorから書き出したロゴは複数のpathタグで構成されていることがほとんどですが、そのうち1つのd属性だけをコピーしてしまい、ロゴの一部分しか描かれない失敗です。全パスを手作業で個別に計測するのは現実的ではありません。
💡 対策・解決策を見る▼
viewBoxの設定を誤り、プレビューで線がはみ出す・小さすぎて見えない
デザインツールの座標系は数百〜数千の単位になることがあり、viewBoxが「0 0 100 100」のままだと図形が枠外に出てしまいます。逆に小さな図形が広いviewBoxの中央に点のように表示されることもあり、動きが確認できません。
💡 対策・解決策を見る▼
animation-fill-modeの指定漏れで、描き終わった直後に線が消える
ループ再生をしない場合にforwardsの記述を忘れると、1周描き終わった瞬間にキーフレームの初期状態（線が消えた状態）へ戻ってしまいます。プレビューでは気づきにくく、公開後に発覚しがちなミスです。
💡 対策・解決策を見る▼
動きの抑制設定をしている利用者への配慮が抜け落ちている
OSの設定でアニメーションを減らしている利用者に対しても演出をそのまま再生してしまうと、めまいなどの体調不良を引き起こす可能性があります。アクセシビリティのガイドラインでも配慮が求められている項目ですが、実装時に見落とされがちです。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.SVGアニメーションのジェネレーターとして、どこまで自動でCSSを作ってくれますか
A. パスの長さの計測から、stroke-dasharray・stroke-dashoffset・keyframes・animationプロパティの記述まですべて自動生成します。生成されるCSSはそのままスタイルシートに貼り付けて使える完成形で、外部ライブラリは不要です。あわせてクラス名を付与済みのSVGマークアップも出力されるため、HTMLとCSSの両方をコピーするだけで動作します。
Q.IllustratorやFigmaから書き出したSVGコードは、どの部分を貼り付ければよいですか
A. SVGコード全体をそのまま貼り付けてください。svgタグから閉じタグまでを丸ごと入力すると、含まれているpath・line・polyline・polygonを自動的に検出し、viewBoxも読み取って表示範囲を合わせます。pathタグのd属性だけを貼り付ける従来の使い方にも対応しているため、必要な部分だけを切り出しても構いません。
Q.複数のパスが組み合わさったロゴやイラストも動かせますか
A. 動かせます。SVGコード内の図形を最大24個まで検出し、それぞれのパス長を個別に計測して別々のクラスを割り当てます。「順番に描く間隔」を設定すると、各パスのanimation-delayが自動的に段階的な値になり、一筆書きのように順に描かれる演出になります。間隔を0にすればすべてが同時に描画されます。
Q.Figmaから書き出したSVGが枠からはみ出したり、小さすぎて見えないのはなぜですか
A. デザインツールの書き出しでは座標系がツール上のアートボードに合わせて大きな数値になっていることがあり、プレビューの表示範囲と一致しないためです。本ツールは表示範囲の自動フィット機能を備えており、描画された図形の実際の外接矩形を測って余白を含めた最適なviewBoxを自動計算します。元のviewBoxをそのまま使いたい場合は自動フィットをオフにしてください。
Q.パスの長さを自分でJavaScriptから取得する必要はありますか
A. ありません。本ツールがブラウザ上でgetTotalLengthを実行し、各パスの長さをピクセル単位で実測してCSSに埋め込みます。プレビュー右上に検出したパスの本数と全長が表示されるので、値が正しく取れているかもその場で確認できます。CSSだけで完結するため、公開後のページでJavaScriptを読み込む必要もありません。
Q.アニメーションを苦手とする利用者への配慮は生成コードに含まれますか
A. 含まれます。生成されるCSSには、システム設定でアニメーションを抑制している利用者向けのメディアクエリが自動的に付与され、その場合は描き終わった状態を静的に表示します。画面の動きで体調を崩す方に配慮する仕組みで、アクセシビリティのガイドラインでも推奨されている実装です。
Q.生成されたCSSアニメーションは主要なブラウザで正常に動作しますか
A. はい。Chrome、Safari、Firefox、Edgeおよびスマートフォンのブラウザで動作します。標準的なCSS Animationの仕様に準拠したコードのみを生成しており、外部ライブラリに依存しないため軽量です。JavaScriptを使わない実装のため、ページの表示速度にもほとんど影響しません。
Q.貼り付けたSVGデータが外部のサーバーに保存される心配はありませんか
A. ありません。当ツールは完全ローカル処理型の設計で、入力されたSVGコードや調整したパラメータはすべてブラウザ内だけで処理されます。外部サーバーへの送信や保存は行われず、ページを閉じればデータは消去されます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。