SVG線描画アニメーション生成SVG Stroke Draw Animation Generator
線画SVGを手描き風アニメに。動かない理由もその場で診断。Hand-drawn stroke animations from SVG—with on-the-spot diagnosis when it fails.
お気に入りについて About favorites
この端末のブラウザにのみ保存され、サーバーには送信されません。 Saved on this device only—never sent to our servers.
診断 Diagnosis
プレビュー Preview
スクロール表示モードはプレビューではその場で1回再生します。 Scroll mode replays once in place in the preview.
実装例（HTML + CSS） Implementation example (HTML + CSS)
CSS のみ CSS only
使い方・ユースケース How to Use & Use Cases
線（stroke）のある SVG をドロップまたは選択します。読み込み後すぐに診断結果とプレビューが表示されます。塗りだけ・テキストのまま・画像埋め込みなどは理由付きで案内します。 Drop or choose a stroke-based SVG file. You get an instant diagnosis and preview. Fill-only, raw text, or embedded images are explained with clear messages.
速度・再生タイミング（順番に描く / 同時 / スクロール表示）を調整し、CSS と実装例（HTML + CSS + 必要なら JS）をコピーします。プレビューの「再生」で何度でも確認できます。 Tune speed and playback (one by one, simultaneous, or on scroll), then copy CSS and a full HTML example. Use Replay in the preview to test again.
よくある質問FAQ
どんな SVG が使えますか？What SVGs work?
線（stroke）で描かれた path / line / polyline などが対象です。塗りつぶしだけ、テキスト要素のまま、埋め込み画像だけの SVG はアニメーションできません。テキストから作る場合は、当サイトの「アニメーションテキスト生成」が便利です。Stroke-based paths, lines, polylines, and similar shapes. Fill-only art, raw text, or embedded images will not animate. For English text, use our Stroke Text SVG Generator to create compatible stroke SVGs in one click.
このツールの特徴は？What does this tool offer?
線画 SVG を手描き風アニメーションに変換し、動かないときは理由を表示します。ドロップ後すぐプレビューでき、速度や再生順を調整して CSS と HTML 実装例（スクロール表示用 JS 含む）をコピーできます。Turns stroke SVGs into hand-drawn CSS animations with clear failure reasons. Preview instantly on drop, tune speed and order, then copy CSS and an HTML example (including optional scroll-trigger JS).
プレビューで線の長さがずれますPreview stroke length looks off
複雑な SVG や transform 付きの要素では stroke-dasharray の長さがずれることがあります。SVGOMG などで簡略化してから再度お試しください。Complex SVGs or transformed shapes can mis-measure dash length. Try simplifying the SVG (e.g. with SVGOMG) and upload again.
ページを閉じれば、端末内のデータは自動的に消去されます。契約書や顧客資料など、慎重に扱うデータも安心してご利用ください。When you close the page, data on your device is cleared automatically. Safe for sensitive files such as contracts and client documents.
