HOME / EFFECTS / SVGアニメーション

SVGアニメーション8種＋線画ジェネレーター｜コピペCSSで描く

SVGは拡大しても劣化せず、CSSから直接スタイルを当てられるため、アニメーションとの相性が非常に良い形式です。ここではSVGを動かす表現を8種類集めました。線が描かれていく表現、図形が有機的に変形する表現、パスに沿って要素が走る表現まで、いずれもライブラリなしで実装できます。

SVG 線画ジェネレーター

図形・色・太さ・速度を選ぶと、下のコードがその場で書き換わります。出力されるのは JavaScript を使わない CSS だけの実装です。パスに pathLength="1" を指定しているため、線の長さを測る処理が要りません。

HTML + CSS

出力コードには prefers-reduced-motion の停止指定を含めています。動きを減らす設定の端末では、線が最初から描かれた状態で表示されます。

SVGアニメーション · 8 EFFECTS

No.049SVG LINE DRAWCSS No.050WAVE DIVIDERCSS No.058SVG SQUIGGLE UNDERLINECSSSVG No.059SVG MARCHING ANTSCSSSVG No.074SVG SIGNATURE DRAWCSSSVG No.075SVG GAUGECSSJSSVG No.099SVG BLOB ROTATECSSSVG No.121OFFSET PATH MOTIONCSSSVG

実装の勘所

線画は stroke-dasharray と stroke-dashoffset で作る

パスの全長を stroke-dasharray に指定し、同じ値を stroke-dashoffset に入れると線が消えます。そこから dashoffset を0へアニメーションさせると、線が描かれていくように見えます。全長は JavaScript の getTotalLength() で取得するか、pathLength="1" を指定して 0〜1 で扱うと簡潔になります。

インラインSVGにする

img タグで読み込んだSVGには外部CSSが届かず、内部の path に色もアニメーションも当てられません。CSSから制御したい場合はHTMLに直接SVGを書いてください。

SMILではなくCSSかWeb Animations APIを使う

animate 要素などのSMILは非推奨扱いになった経緯があり、対応状況も不安定です。同じ表現はCSSアニメーションで実現できるため、新規実装ではそちらを選んでください。

FAQ

Q. SVGアニメーションはCSSとSMILのどちらで書くべきですか？

CSSです。SMIL（animate / animateMotion 要素）は一時期廃止が検討された経緯があり、現在も対応が不揃いです。線の描画は stroke-dashoffset、パス上の移動は offset-path で、いずれもCSSアニメーションとして書けます。CSSならイージング・遅延・prefers-reduced-motion 対応もそのまま使えます。

Q. SVGの色がCSSで変えられません。

img タグや background-image としてSVGを読み込んでいる可能性が高いです。この場合SVGは独立した文書として扱われ、親ページのCSSは届きません。HTMLに直接SVGのコードを書く（インラインSVG）と、path に fill や stroke を当てられるようになります。

Q. コードは無料で使えますか？

はい。Motion Lab のコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。商用プロジェクトでもそのまま利用できます。

他のカテゴリを見る

テキストアニメーション 28 ホバーエフェクト 8 スクロールアニメーション 23 マイクロインタラクション 28 カードアニメーション 20 背景アニメーション 14 ボタンアニメーション 18 ローディングアニメーション 14 トランジション・画面遷移 13 モーダル・ドロワー 15 カーソルエフェクト 11

全199種類を技術別（CSS / JS / Tailwind / Framer Motion / GSAP）で絞り込むなら カタログ一覧、 長文の解説を読むなら ガイド、 AIエージェントでの実装手順は Claude Code でWebアニメーションを実装する へ。

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 マイクロインタラクション ―UI/UXデザインの神が宿る細部 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスクPR

📚 Kindle Unlimited — 技術書・デザイン書が読み放題。30日無料体験 → 🎧 Audible — 移動中に耳で学ぶオーディオブック。30日無料体験 → 📦 Amazon Prime — Prime Reading・配送特典つき。30日無料体験 → 🎵 Music Unlimited — 作業用BGMに。1億曲が聴き放題・30日無料体験 →

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

CREATOR TOOLS · スクール（PR）

🎬 Adobe Creative Cloud — After Effects / Photoshop 業界標準ツール → 💻 SkillHacks — プログラミング・動画編集オンラインスクール → 🚀 デイトラ — Web制作スクール・実案件レベルまで習得 →

※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。