SVG Line Draw Hover
ホバーでSVGのアイコンパスが手書き風に描かれるエフェクト。
HTML
<div class="sldh-card">
<svg class="sldh-icon" viewBox="0 0 50 50" width="50" height="50">
<path class="sldh-path" d="M10 25 L20 35 L40 15" fill="none" stroke="#6366f1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="sldh-label">Verified</span>
</div>
CSS
.sldh-card {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 24px;
background: #1e293b;
border-radius: 12px;
cursor: pointer;
}
.sldh-label {
color: #e2e8f0;
font-size: 14px;
font-weight: 600;
}
.sldh-path {
stroke-dasharray: 60;
stroke-dashoffset: 60;
transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.sldh-card:hover .sldh-path {
stroke-dashoffset: 0;
}