SVG Signature Draw

CODE

HTML

<div class="demo-stage ssd-stage"><svg class="ssd-svg" viewBox="0 0 300 100"><path class="ssd-path" d="M20 70 C40 20 60 20 70 60 S100 90 120 50 S150 10 170 60 S210 90 230 50 C250 30 270 40 285 65"/></svg></div>

CSS

.ssd-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.ssd-svg { width:min(320px,85%); height:auto; }
.ssd-path { fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:600; stroke-dashoffset:600; animation:ssd 4s ease-in-out infinite; }
@keyframes ssd { 0% { stroke-dashoffset:600; } 45%,85% { stroke-dashoffset:0; } 100% { stroke-dashoffset:600; } }
/* REDUCED-MOTION:v1 */
@media (prefers-reduced-motion: reduce) {
  .ssd-path {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

AI PROMPT

Claude Code Cursor v0

PROMPT

手書きサインが一筆書きで描かれるエフェクトをSVG+CSSだけで作って。流れるような<path>（C/S曲線コマンドで筆記体風）に stroke-dasharray を線長以上（例600）、stroke-dashoffset を同値で初期非表示。@keyframesで dashoffset を0へ animateすると左から描かれる。後半は0で保持→末尾でリセットしてループ。JS不要。ブランドロゴ・署名・ヒーローのアクセントに。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

SVG署名描画（SVG Signature Draw）とは

手書きサインが一筆書きで描かれるエフェクト。stroke-dashoffsetのみで実装。ブランドロゴ・署名・ヒーローのアクセントに。この効果はSVG要素をCSS（必要に応じてJavaScript）でアニメーションさせ、拡大しても劣化しないベクター図形のパスや塗りを動かします。

使いどころ

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

CSS実装のポイント

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

CSSとJavaScriptの違い

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

FAQ

SVG署名描画（SVG Signature Draw）はどんな効果ですか？

手書きサインが一筆書きで描かれるエフェクト。stroke-dashoffsetのみで実装。ブランドロゴ・署名・ヒーローのアクセントに。ロゴ・アイコン・図版・セクションの区切りなど、ベクター図形をいかした表現に向く演出です。

SVG Signature DrawはCSSだけで実装できますか？

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

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

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

RELATED EFFECTS

SVG署名描画（SVG Signature Draw）とは

使いどころ

CSS実装のポイント

CSSとJavaScriptの違い

FAQ