Circle Spin

How it works

Circle Spin is an animated entrance & kinetic text effect rendered entirely in CSS. It relies on an inline SVG <defs> block (filters, gradients or clip-paths), which the HTML export carries alongside the CSS.

Controls

Circle Spin exposes 6 dedicated controls — Hue, Text Size, Spin, Direction, Separator and Emblem — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.

CSS

/* Circle Spin — made with TEXT-FX · https://text-fx.app
 * HTML: requires the inline <svg> filter defs — see the HTML export.
 * Font: 'Anton', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Anton', sans-serif;
  font-weight: 700;
  letter-spacing: -2px;
  text-transform: none;
}

.text-effect {
  display: inline-block;
  vertical-align: middle;
  width: 4.2em;
  height: 4.2em;
  max-width: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 0.035em hsl(183 95% 65% / 0.55));
  animation: text-effect-spin 18s linear infinite;
  animation-direction: reverse;
}
.text-effect text {
  fill: hsl(183 90% 72%);
  dominant-baseline: central;
  letter-spacing: normal;
}
.text-effect .guide {
  fill: none;
  stroke: hsl(183 55% 60% / 0.45);
  stroke-width: 0.8;
}
.text-effect .hub {
  fill: hsl(183 96% 66%);
}

@keyframes text-effect-spin {
  to { transform: rotate(360deg); }
}

HTML

This effect needs the markup below (per-letter spans, SVG defs, or a data-text attribute).

<!-- Made with TEXT-FX · https://text-fx.app -->

<style>
.text-effect {
  font-family: 'Anton', sans-serif;
  font-weight: 700;
  letter-spacing: -2px;
  text-transform: none;
}

.text-effect {
  display: inline-block;
  vertical-align: middle;
  width: 4.2em;
  height: 4.2em;
  max-width: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 0.035em hsl(183 95% 65% / 0.55));
  animation: text-effect-spin 18s linear infinite;
  animation-direction: reverse;
}
.text-effect text {
  fill: hsl(183 90% 72%);
  dominant-baseline: central;
  letter-spacing: normal;
}
.text-effect .guide {
  fill: none;
  stroke: hsl(183 55% 60% / 0.45);
  stroke-width: 0.8;
}
.text-effect .hub {
  fill: hsl(183 96% 66%);
}

@keyframes text-effect-spin {
  to { transform: rotate(360deg); }
}
</style>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true" class="text-effect"><defs><path id="text-effect-ring" d="M 50,50 m 0,-32 a 32,32 0 1,1 0,64 a 32,32 0 1,1 0,-64"></path></defs><circle class="guide" cx="50" cy="50" r="41"></circle><text font-size="9.308"><textPath href="#text-effect-ring" startOffset="0%" textLength="40.212" lengthAdjust="spacingAndGlyphs">Your text — </textPath><textPath href="#text-effect-ring" startOffset="20%" textLength="40.212" lengthAdjust="spacingAndGlyphs">Your text — </textPath><textPath href="#text-effect-ring" startOffset="40%" textLength="40.212" lengthAdjust="spacingAndGlyphs">Your text — </textPath><textPath href="#text-effect-ring" startOffset="60%" textLength="40.212" lengthAdjust="spacingAndGlyphs">Your text — </textPath><textPath href="#text-effect-ring" startOffset="80%" textLength="40.212" lengthAdjust="spacingAndGlyphs">Your text — </textPath></text><circle class="hub" cx="50" cy="50" r="3.2"></circle></svg>

Related Entrance & Kinetic effects

• Fade In
• Letter Wave
• Stagger Reveal
• Typewriter
• Jelly Wobble