SVG Handwriting Text
SVGパスのstroke-dashoffsetで手書き風にテキストが描かれるエフェクト。
HTML
<svg class="sht-svg" viewBox="0 0 300 60" width="300" height="60"> <text class="sht-text" x="10" y="45" font-size="40" font-weight="bold" font-family="Georgia, serif" fill="none" stroke="#6366f1" stroke-width="1.5">Design</text> </svg>
CSS
.sht-svg {
display: block;
}
.sht-text {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: sht-draw 2.5s ease forwards;
}
@keyframes sht-draw {
to { stroke-dashoffset: 0; }
}