Hand Drawn Circle Text Hover
A loose, hand-drawn loop draws itself around the word on hover, overshooting its start the way a pen would. An inline SVG path with pathLength=1 makes the dash math trivial.
Also known as: circle around text on hover, scribble circle highlight, svg circle draw text.
Launch
HTML
<div class="hfx-text-circle-scribble"> Launch <svg viewBox="0 0 200 80" preserveAspectRatio="none" aria-hidden="true"><path pathLength="1" d="M150 8C100-2 24 4 8 32-4 56 60 78 118 74 178 70 202 46 190 24 180 8 140 2 92 6"/></svg> </div>
CSS
.hfx-text-circle-scribble {
--c: var(--hfx-color, #3b82f6);
font-size: calc(var(--hfx-size, 16px) * 2.5);
font-family: system-ui, sans-serif;
font-weight: 800;
line-height: 1.15;
cursor: default;
position: relative;
display: inline-block;}
.hfx-text-circle-scribble svg {
position: absolute;
left: -0.55em;
top: -0.36em;
width: calc(100% + 1.1em);
height: calc(100% + 0.72em);
overflow: visible;
transform: rotate(-2deg);
}
.hfx-text-circle-scribble path {
fill: none;
stroke: var(--c);
stroke-width: 3; /* viewBox units, so it scales with the text */
stroke-linecap: round;
/* the gap is longer than the path, so no round cap peeks out at rest */
stroke-dasharray: 1 2;
stroke-dashoffset: 1.02;
transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-text-circle-scribble:hover path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
.hfx-text-circle-scribble, .hfx-text-circle-scribble *, .hfx-text-circle-scribble::before, .hfx-text-circle-scribble::after, .hfx-text-circle-scribble *::before, .hfx-text-circle-scribble *::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.