SVGライン描画
SVG パスが stroke-dashoffset アニメーションで描かれていく。ロゴやチェックマーク演出に。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 完了・成功のチェックマーク演出
- ロゴ・アイコンの描き順を見せる導入
- フォーム送信後の一瞬の達成感
- 避ける場面
- 本文中で繰り返し再生される装飾
- 描画完了まで操作を待たせる場面
- 意味をアニメだけで伝える（テキスト無し）
- 構成要素
- 枠円
- チェックマーク
- 再生ボタン
- 持っている状態
- 通常
- ホバー
- フォーカス
- 無効
- キーボード
Tab で「もう一度」ボタンに到達・Enter/Space で再生する。再生中（1.3s）はボタンが disabled になり連打を防ぐ
- 支援技術
SVG は aria-hidden の装飾で、成功などの意味はテキストで別に持つ。再生中はボタンの disabled で状態が伝わる。reduce では描き終えた状態で静止
- 動き
円 900ms（遅延100ms）→チェック 550ms（遅延750ms）・cubic-bezier(.4,0,.2,1)。stroke-dashoffset で描き順を見せ完了感を作る
デザインの要点
- dasharray と dashoffset をパスの長さ（円 264・チェック 130）に揃える。短いと途中から、長いと遅れて描き始める
- 円を描き終える 750ms からチェックを始めて筆順を作る。同時に描くと「描かれていく」感じが消える
- 再生し直しは animation: none → reflow → 空文字で戻す。同じ値を代入しても再スタートしない
- reduce 設定では dashoffset 0 の描き終えた状態を最初から出す。描画の途中で止めると欠けた図形になる
コード（コピーして使えます）
<div class="ld-wrap">
<svg class="ld-svg" viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<!-- 枠円 -->
<circle class="ld-path ld-circle" cx="60" cy="50" r="42" stroke="#c8d4f7" stroke-width="3"/>
<!-- チェックマーク -->
<path class="ld-path ld-check" d="M28 52 L50 74 L94 28" stroke="#2b50c7" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<button class="ld-btn" type="button">もう一度</button>
</div>