Blog

Create a Stunning CSS Text Circle Animation with SVG

In this article, we will implement stunning CSS Text Circle Animation with SVG. This rotating text effect is perfect for logos, banners, or grabbing attention on a landing page — and the best part? It’s pure HTML and CSS, no JavaScript required.

What You’ll Learn

In this tutorial, we’ll show you how to:

  • Create circular paths with SVG for wrapping text.
  • Style text with glow effects and gradients.
  • Animate text in clockwise and counterclockwise directions.
  • Customize fonts, colors, speed, and size.

Let’s bring this effect to life!

HTML Structure: Building the Circle

We’ll use SVG to draw two concentric circles and animate text along them using <textPath>. Here’s the complete structure.

<div class="circle-wrapper">
  <!-- Outer Circle -->
  <div class="circle-container rotate-cw outer-circle">
    <svg viewBox="0 0 200 200" width="300" height="300">
      <defs>
        <path
          id="circlePathOuter"
          d="M100,100 m-75,0 a75,75 0 1,1 150,0 a75,75 0 1,1 -150,0"
        />
      </defs>
      <text class="rotating-text white glow">
        <textPath href="#circlePathOuter" startOffset="0%">
          • W E L C O M E  T O  C O D E Y M A Z E • T E X T  C I R C L E  A N I M A T I O N •
        </textPath>
      </text>
    </svg>
  </div>

  <!-- Inner Circle -->
  <div class="circle-container rotate-ccw inner-circle">
    <svg viewBox="0 0 200 200" width="220" height="220">
      <defs>
        <path
          id="circlePathInner"
          d="M100,100 m-55,0 a55,55 0 1,1 110,0 a55,55 0 1,1 -110,0"
        />
      </defs>
      <text class="rotating-text cyan glow">
        <textPath href="#circlePathInner" startOffset="0%">
          • C O D E Y M A Z E  C S S
        </textPath>
      </text>
    </svg>
  </div>
</div>

Styling with CSS: Glow and Motion

Now let’s add the style and animation that makes this pop!

body {
  margin: 0;
  background: #111;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-wrapper {
  position: relative;
  width: 300px;
  height: 300px;
}

.circle-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rotating-text {
  font-family: Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 6px;
}

/* Text colors */
.white {
  fill: white;
}

.cyan {
  fill: #00ffff;
}

/* Glow effect */
.glow {
  filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white);
}

/* Animation classes */
.rotate-cw {
  animation: spin 20s linear infinite;
}

.rotate-ccw {
  animation: spinReverse 25s linear infinite;
}

@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes spinReverse {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

Final Result

See the Pen Text Circle Animation by Codeymaze (@Codeymaze) on CodePen.

How It Works

  • SVG Paths define perfect circles using the arc (a) command.
  • <textPath> attaches and animates text along those circles.
  • CSS Animations rotate the entire SVG group, giving the illusion that the text is spinning.
  • Two Circles, rotating in opposite directions, add visual depth and a hypnotic effect.

Final Thoughts

This CSS Text Circle Animation is a lightweight, elegant way to add interactivity and style to your website. You can use it for branding, headers, or even as a loading spinner with some tweaks.

We hope you enjoyed this tutorial! If it sparked your creativity, feel free to share your versions, and follow us for more cutting-edge CSS and web dev tips.

Stay creative, and keep coding!