演出・リッチ
SVGライン描画
SVG パスが stroke-dashoffset アニメーションで描かれていく。ロゴやチェックマーク演出に。
プレビュー
クリック
操作クリック/タップで動きます。
コード(コピーして使えます)
<div class="ld-wrap">
<svg class="ld-svg" viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- 枠円 -->
<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">もう一度</button>
</div>