Curving Text Around a Circle Using SVG

#webdev #svg #frontend #javascript

In this tutorial, I’ll walk you through how to curve text along a circular path using SVG—just like in the 3D coin badge we built with HTML, CSS, and JS

🎯 Why Use Curved Text?

Curved text allows you to wrap content along a circular path instead of a straight line.

✨ Benefits:

Perfect for badges, seals, or coins.
SVG gives precise control over positioning, spacing, and styling.
Fully scalable and responsive.

🛠️ Step 1: Define a Circular Path

The first step is creating a path that your text will follow. In SVG, paths are defined with .

<path id="circle-top" d="M 28,190 A 162,162 0 0,1 352,190" />

Breaking it down:

M 28,190 → Move to starting point.
A 162,162 0 0,1 352,190 → Draw an arc with radius 162 to the point (352,190).

This arc defines the curve your text will follow.

📝 Step 2: Attach Text to the Path

Use <text> and <textPath>:

<text class="curved-text-top" dy="16">
  <textPath href="#circle-top" startOffset="50%">
    20 YEARS ORLANDO & SURROUNDING CITIES
  </textPath>
</text>

Attributes explained:

href="#circle-top" → References the path you just defined.
startOffset="50%" → Centers the text along the path.
dy="16" → Adjusts vertical alignment.

CSS styling:

.curved-text-top {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 6px;
  fill: white;
  text-anchor: middle;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.7);
}

⚙️ Step 3: Adjust Spacing Dynamically

Sometimes the text won’t perfectly fit the arc. Use JavaScript to adjust dynamically:

const path = document.getElementById('circle-top');
const textPath = document.querySelector('textPath');

function fitTextToArc() {
  const pathLength = path.getTotalLength();
  const padding = 14;
  const available = pathLength + padding;

  textPath.setAttribute('lengthAdjust', 'spacingAndGlyphs');
  textPath.setAttribute('textLength', available.toFixed(1));
}

window.addEventListener('resize', fitTextToArc);
fitTextToArc();

This ensures the text always fits, even when the container resizes.

⭐ Step 4: Add Bottom Stars or Extra Curved Text

You can add another arc for stars, decorative icons, or additional text:

<path id="circle-bottom" d="M 352,190 A 138,138 0 0,1 28,190" />

<text class="curved-stars-bottom" dy="7">
  <textPath href="#circle-bottom" startOffset="50%">
    <tspan class="star">★</tspan>
    <tspan class="star">★</tspan>
    <tspan class="star">★</tspan>
    <tspan class="star">★</tspan>
    <tspan class="star">★</tspan>
  </textPath>
</text>

✨ Step 5: Styling and Animation

Make your text and stars come alive with CSS animations:

.curved-stars-bottom .star {
  animation: starPulse 2s infinite;
}

@keyframes starPulse {
  0%,100% { fill: white; transform: scale(1); }
  50% { fill: #ffd700; transform: scale(1.3); }
}