SVG Stroke Draw Text Hover
The word empties to an outline that traces itself around every letter in the accent color, then floods solid again. SVG text with a long stroke-dasharray, so each glyph draws at once.
Also known as: svg text stroke animation, draw text outline on hover, handwriting text effect.
HTML
<svg class="hfx-text-stroke-draw" viewBox="0 0 300 80" role="img" aria-label="Sketch"><text x="150" y="61" text-anchor="middle" font-size="64">Sketch</text></svg>
CSS
.hfx-text-stroke-draw {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
width: 12em;
overflow: visible;
/* a static font: variable system fonts show their overlapping contours when stroked */
font-family: "Arial Black", Arial, sans-serif;
font-weight: 900;
cursor: default;
}
.hfx-text-stroke-draw text {
fill: currentColor;
stroke: currentColor;
stroke-width: 2;
stroke-linejoin: round;
/* roughly the longest letter outline, in viewBox units */
stroke-dasharray: 280;
stroke-dashoffset: 0;
transition: fill 0.3s ease, stroke 0.3s ease;
}
.hfx-text-stroke-draw:hover text {
fill: var(--c);
stroke: var(--c);
animation: hfx-text-stroke-draw-trace 1.4s cubic-bezier(0.4, 0, 0.3, 1) both;
}
@keyframes hfx-text-stroke-draw-trace {
0% { stroke-dashoffset: 280; fill-opacity: 0; }
65% { stroke-dashoffset: 0; fill-opacity: 0; }
100% { stroke-dashoffset: 0; fill-opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.hfx-text-stroke-draw, .hfx-text-stroke-draw *, .hfx-text-stroke-draw::before, .hfx-text-stroke-draw::after, .hfx-text-stroke-draw *::before, .hfx-text-stroke-draw *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.