SVGの「線が描かれる」エフェクトを瞬時にデザイン。 パスの長さを自動計算し、滑らかなラインアニメーションを実現するCSSコードを出力します。
SVGパスアニメーション作成ツールとは？
本ツールは、SVGの「stroke-dasharray（破線の間隔）」と「stroke-dashoffset（破線の開始位置）」を操作して、まるでその場でペンで描いているような演出（ラインドローイング）を簡単に作成できるジェネレーターです。 通常、この演出を実現するにはJavaScriptでパスの長さを取得する必要がありますが、本ツールはブラウザ上でその計測とCSS生成を完結させます。
こんなシーンで便利です
Webサイトのロゴアニメーション
ページ読み込み時にサイトのロゴを「シュッ」と描き出すことで、高級感やテック系の印象をユーザーに与えることができます。
アイコンのマイクロインタラクション
チェックマークや矢印、ハートなどのアイコンにホバーやクリック時の演出として追加し、操作に対するフィードバックを強化します。
ランディングページの視線誘導
手書き風の矢印や波線をアニメーションさせることで、ユーザーの視線を特定のボタンや重要なコンテンツへ自然に導きます。
インフォグラフィックの動的表示
グラフの枠線や図解のコネクタ部分に適用し、情報をステップバイステップで提示する際のアニメーションとして活用できます。
使い方は簡単 4ステップ
- FigmaやIllustratorからコピーしたパスデータ（d属性）をテキストエリアに貼り付けます。
- 「線の太さ」や「色」をデザインに合わせて調整します。
- 再生時間やイージング（加速・減速）を変更して、最適な動きを探ります。
- 「CSSコピー」ボタンを押し、プロジェクトのスタイルシートに貼り付けます。
※パスデータが不正な場合はプレビューが表示されません。'M'（移動）から始まる正しいパス形式を入力してください。
ご利用時の注意点
- getTotalLength()の自動化：本ツールは内部でgetTotalLength()メソッドを呼び出し、正確なパスの長さをピクセル単位で算出しています。
- CSSの適用方法：生成されたCSSは、SVG内の <path> タグにクラスとして付与するか、直接スタイルを適用して使用します。
- レスポンシブ性：SVGのviewBoxが正しく設定されていれば、パスアニメーションも自動的に拡大・縮小に対応します。
SVGアニメーション実装プロパティと設定目安
CSSでラインドローイング（線が描かれる演出）を実装する際に頻用されるパラメータと設定のコツです。
| 項目名（CSSプロパティ） | 役割・設定内容 | 検索・実装時のポイント |
|---|---|---|
| stroke-dasharray | 線の間隔（破線）を指定 | パスの全長（getTotalLength）と同じ値を設定するのが基本です。 |
| stroke-dashoffset | 線の開始位置をずらす | この値を全長から0へアニメーションさせることで線が描かれます。 |
| animation-timing-function | 加速・減速（イージング） | ease-in-outは滑らかに、linearは一定速度で描画されます。 |
| animation-fill-mode | 終了後の状態保持 | forwardsを指定すると、描き終わった後の線が消えずに残ります。 |
| pathLength属性 | パス長の固定（SVG2.0） | 1を指定して100%制御する方法もありますが、現状は実測値指定が確実です。 |
| Figma / Illustrator | パスデータの書き出し | 「パスの単純化」を行うことでCSSコードを軽量化できます。 |
| CSS vs JavaScript | 実装手法の選択 | 軽量化ならCSS、スクロール連動ならIntersection Observer併用が主流。 |
【SEOキーワードと実装のTips】
SVGアニメーションは「Lighthouse」などのパフォーマンス計測でも「JavaScript不要の軽量な演出」として高く評価されます。 特にロゴのインラインSVG化は、LCP（最大視覚コンテンツの表示時間）の改善にも寄与するため、SEO対策の一環としても非常に有効な手法です。
【対応ブラウザと注意点】
Chrome, Firefox, Safari, Edge等の主要ブラウザで動作しますが、古いブラウザではSVGのCSS制御に一部制限がある場合があります。 本ツールで生成するコードは、最も汎用性が高く、軽量な標準CSS Animation規格に準拠しています。
モダンフロントエンドにおけるSVGアニメーションの応用設計と最適化手法
単一のラインドローイング生成から一歩進み、実際のコンポーネント開発やプロダクション環境へのデプロイ時に求められる非同期制御や視覚効果の最適化テクニックを解説します。
Intersection Observerを用いたスクロール連動型トリガーの実装
ページ全体の初期読み込み（オンロード）時にすべてのSVGアニメーションを一斉に開始させると、画面外の演出がユーザーに気付かれず消費されてしまいます。
これを防ぐには、JavaScriptのIntersection Observer APIを併用し、対象のSVG要素が画面内（ビューポート）に10%以上侵入した瞬間を検知してクラス名を付与し、CSS Animationを発火させるトリガー制御が業務要件では必須となります。
複数パスの連続描画を実現するanimation-delayの一括管理と設計
ロゴや複雑なベクターイラストを構成する複数のパスをバラバラではなく、一筆書きのように順番に描画させたい場合は、CSSのanimation-delay（アニメーション遅延）を段階的にずらして設定します。
各パスの描画にかかる時間を1.2秒とした場合、2番目のパスには「1.2s」、3番目には「2.4s」のディレイ値を算出してクラスを割り当てることで、単一ジェネレーターの制限を超えた壮大なタイムライン演出をCSSのみで構築可能です。
ホバーインタラクション時のリバース再生とユーザー体験の向上
ボタンやナビゲーションアイコンのホバー時に線を描く演出を加える場合、マウスホバーが外れた（マウスアウト）際のアニメーション挙動の設計も重要です。
ホバー時に特定のクラスを付与して通常再生（正常方向）させた後、ホバー解除時にanimation-direction: reverseを適用したリバース用クラスへ切り替えることで、描かれた線が逆方向にスルスルと消えていくような自然で心地よいUIのマイクロインタラクションが完成します。
アクセシビリティに配慮したprefers-reduced-motionへの対応
激しい視覚効果や画面の動きによって体調不良（めまいや動揺病）を起こすユーザーに配慮することは、現代のWebアクセシビリティの重要なガイドラインです。
CSSのメディアクエリである@media (prefers-reduced-motion: reduce)を定義し、システム設定でアニメーションを抑制しているユーザーに対しては、ラインドローイングの実行をスキップして最初からstroke-dashoffset: 0の状態（線が完全に描かれた状態）を静的に表示するフォールバック設計を必ず組み込んでください。
よくある失敗と対策
getTotalLengthをJSで取得せず、破線の数値を勘違いして線が途切れる
SVGのパス長を正しく計測（JavaScriptのgetTotalLengthメソッドを使用）せずに、stroke-dasharrayやstroke-dashoffsetの数値を適当に設定した結果、ラインアニメーションが途中で止まったり、余白が生まれて線が途切れたりする実装ミスです。
💡 対策・解決策を見る▼
デザインツールから書き出したSVGパスデータ（d属性）の指定ミスでアニメーションが動かない
FigmaやAdobe IllustratorからSVGを書き出す際、複合パス（compound path）やグループ化された状態のまま複雑なd属性のコードをコピーしてしまい、CSSのstrokeプロパティやアニメーションが意図した通りに描画されない失敗です。
💡 対策・解決策を見る▼
animation-fill-modeの指定漏れにより、描き終わった直後に線が消える
CSS Animationでラインドローイングを実装する際、animation-fill-mode: forwardsの記述を忘れてしまい、1周描き終わった瞬間にアニメーションのキーフレームが0%の状態（線が消えた状態）にリセットされてしまうコーディングミスです。
💡 対策・解決策を見る▼
SVGのviewBoxやwidth・heightのレスポンシブ設定を誤り、線がはみ出る
SVGタグ全体のviewBox属性が正しく設定されていない、あるいはCSS側でレスポンシブ対応（width: 100%; height: auto;など）の調整を怠ったために、画面サイズが変わった時にアニメーションの描画位置がずれたり、外枠からはみ出て見えなくなる失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.貼り付けたSVGパスデータが外部のサーバーに保存されたり情報漏洩するリスクはありませんか
A. 一切ありません。当ツールは完全ローカル処理型の安全設計を採用しています。入力されたパスデータや調整されたパラメータはすべてユーザーのブラウザ内のみで処理され、外部のサーバーへ送信や保存が行われることはありません。ページを閉じればデータは即座に完全消去されます。
Q.IllustratorやFigmaから書き出したSVGコードのどの部分を貼り付ければよいですか
A. SVGファイルやコード内にあるpathタグのd属性に記述されているダブルクォーテーションで囲まれた文字列をコピーして貼り付けてください。Mから始まる英数字と記号の羅列が正しいパスデータとなります。タグ全体ではなく属性値のみを入力することで正常に動作します。
Q.生成されたCSSアニメーションコードはスマートフォンや主要なブラウザでも正常に動作しますか
A. はい。主要なモダンブラウザであるChrome、Safari、Firefox、Edge、およびスマートフォン上のブラウザ環境において正常に動作します。標準的なCSS Animation規格に準拠してコードを自動生成しているため、外部ライブラリなしで軽量かつ安定した描画が行えます。
Q.複数のパスが組み合わさった複雑なイラストを同時にアニメーションさせることはできますか
A. 本ツールは単一のパスデータの計測とコード生成に対応しています。複数の異なるパスを同時に動かしたい場合は、それぞれのパスデータを個別に入力してパスの長さを測定し、生成されたCSSコードをそれぞれのpathタグに対して個別にクラス指定して適用を行ってください。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。