Rotating Circular Text
Text set on a circle spins slowly around a round button with a bobbing arrow, the classic scroll-down badge. SVG textPath with textLength, so the phrase always closes the circle exactly.
Also known as: circular text css, text on a circle animation, rotating text badge.
HTML
<div class="txt-circular-text-rotate" aria-label="Scroll to explore">
<svg class="txt-circular-text-rotate-ring" viewBox="0 0 100 100" aria-hidden="true">
<defs><path id="txt-circular-text-rotate-path" d="M50 50m-38 0a38 38 0 1 1 76 0a38 38 0 1 1-76 0"/></defs>
<text font-size="10.5"><textPath href="#txt-circular-text-rotate-path" textLength="237">SCROLL TO EXPLORE • SCROLL TO EXPLORE •</textPath></text>
</svg>
<span class="txt-circular-text-rotate-core" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M12 5v14M6 13l6 6 6-6"/></svg>
</span>
</div>CSS
.txt-circular-text-rotate {
--c: var(--txt-color, #3b82f6);
font-size: var(--txt-size, 32px);
font-family: system-ui, sans-serif;
font-weight: 700;
line-height: 1.2;
position: relative;
display: grid;
place-items: center;
width: 4.6em;
height: 4.6em;}
.txt-circular-text-rotate-ring {
position: absolute;
inset: 0;
overflow: visible;
fill: currentColor;
font-weight: 700;
animation: txt-circular-text-rotate-spin 14s linear infinite;
}
.txt-circular-text-rotate-core {
display: grid;
place-items: center;
width: 2.1em;
height: 2.1em;
border-radius: 50%;
background: var(--c);
overflow: hidden;
}
.txt-circular-text-rotate-core svg {
width: 1em;
height: 1em;
fill: none;
stroke: #fff;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
animation: txt-circular-text-rotate-bob 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes txt-circular-text-rotate-spin {
to { transform: rotate(360deg); }
}
@keyframes txt-circular-text-rotate-bob {
0%, 100% { transform: translateY(-0.12em); }
50% { transform: translateY(0.14em); }
}
@media (prefers-reduced-motion: reduce) {
.txt-circular-text-rotate, .txt-circular-text-rotate *, .txt-circular-text-rotate::before, .txt-circular-text-rotate::after, .txt-circular-text-rotate *::before, .txt-circular-text-rotate *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<div class="relative grid h-24 w-24 place-items-center" aria-label="Scroll to explore">
<svg class="absolute inset-0 animate-[spin_14s_linear_infinite] fill-current font-bold" viewBox="0 0 100 100" aria-hidden="true">
<defs><path id="txt-circular-text-rotate-path" d="M50 50m-38 0a38 38 0 1 1 76 0a38 38 0 1 1-76 0"/></defs>
<text font-size="10.5"><textPath href="#txt-circular-text-rotate-path" textLength="237">SCROLL TO EXPLORE • SCROLL TO EXPLORE •</textPath></text>
</svg>
<span class="grid h-11 w-11 place-items-center rounded-full bg-blue-500" aria-hidden="true">
<svg class="h-5 w-5 animate-bounce fill-none stroke-white stroke-[2.4]" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M6 13l6 6 6-6"/></svg>
</span>
</div>Customizing this snippet
- Color: set
--txt-coloron the element or a parent. Currently previewing#3b82f6. - Font size: set
--txt-size. Every other dimension is inem, so the whole thing scales together. Currently previewing40px. - 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.