SVG Stroke Fill Text
SVGテキストのストロークが描かれた後、フィルが満たされるアニメーション。
HTML
<svg class="ssft" viewBox="0 0 300 60" width="300" height="60"> <text class="ssft-stroke" x="10" y="45" font-size="42" font-weight="900" font-family="Arial, sans-serif">CREATE</text> <text class="ssft-fill" x="10" y="45" font-size="42" font-weight="900" font-family="Arial, sans-serif">CREATE</text> </svg>
CSS
.ssft { display: block; }
.ssft-stroke {
fill: none;
stroke: #6366f1;
stroke-width: 1.5;
stroke-dasharray: 400;
stroke-dashoffset: 400;
animation: ssft-draw 2s ease forwards;
}
.ssft-fill {
fill: #6366f1;
opacity: 0;
animation: ssft-appear 0.8s ease forwards 1.8s;
}
@keyframes ssft-draw {
to { stroke-dashoffset: 0; }
}
@keyframes ssft-appear {
to { opacity: 1; }
}