SVG波線アンダーライン（SVG Squiggle Underline）はどんな効果ですか？

単語の下に手描き風の波線アンダーラインが左から描かれるエフェクト。stroke-dashoffsetのループだけで実装、強調テキスト・見出し・リンクの装飾に。ロゴ・アイコン・図版・セクションの区切りなど、ベクター図形をいかした表現に向く演出です。

SVG Squiggle UnderlineはCSSだけで実装できますか？

はい。CSSを中心に実装できます。本ページにコピーして使えるコードを掲載しています。

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

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

SVG Squiggle Underline — CSS+SVG Effect with AI Prompt

CODE

HTML

<div class="demo-stage squ-stage"><div class="squ-wrap"><span class="squ-word">HANDMADE</span><svg class="squ-svg" viewBox="0 0 220 20" preserveAspectRatio="none"><path class="squ-path" d="M4 12 Q30 2 56 12 T108 12 T160 12 T212 12"/></svg></div></div>

CSS

.squ-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.squ-wrap { position:relative; display:inline-block; }
.squ-word { color:#fff; font-family:'Oswald',sans-serif; font-size:clamp(2rem,7vw,3.2rem); letter-spacing:.08em; }
.squ-svg { position:absolute; left:0; bottom:-8px; width:100%; height:20px; overflow:visible; }
.squ-path { fill:none; stroke:#E91B89; stroke-width:3; stroke-linecap:round; stroke-dasharray:240; stroke-dashoffset:240; animation:squ-draw 3s ease-in-out infinite; }
@keyframes squ-draw { 0% { stroke-dashoffset:240; } 40%,80% { stroke-dashoffset:0; } 100% { stroke-dashoffset:240; } }

AI PROMPT

Claude Cursor v0

PROMPT

単語の下に手描き風の波線アンダーラインが描かれるエフェクトをSVG+CSSだけで作って。テキストを<span>で囲み、その直後にposition:absoluteの<svg>を重ねる。波線は<path d='M4 12 Q30 2 56 12 T108 12 T160 12 T212 12'>のようにQ（最初の山）+ T（以降は対称continuationで滑らかな波）で描く。pathに stroke-dasharray（線長以上の値）と stroke-dashoffset（同値）を設定し、@keyframesで0へ animateすると左から線が描かれる。後半は0で保持→末尾でリセットして3sループ。JS不要。強調テキスト・見出し・リンクの装飾に。

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 UIデザインの心理学 ―わかりやすさ・使いやすさの法則 📖 Fundamentals of Web Animation with GSAP

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

SVG波線アンダーライン（SVG Squiggle Underline）とは

単語の下に手描き風の波線アンダーラインが左から描かれるエフェクト。stroke-dashoffsetのループだけで実装、強調テキスト・見出し・リンクの装飾に。この効果はSVG要素をCSS（必要に応じてJavaScript）でアニメーションさせ、拡大しても劣化しないベクター図形のパスや塗りを動かします。

使いどころ

ロゴ・アイコン・図版・セクションの区切りなど、ベクター図形をいかした表現に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。