DEV Community

Shahibur Rahman
Shahibur Rahman

Posted on

Curving Text Around a Circle Using SVG

Curved text can add a lot of visual appeal, especially when creating badges, coins, or logos. 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 the usual straight line. It’s perfect for badges or coins where you want text to follow the contour of the shape. Using SVG gives you precise control over positioning, spacing, and styling, while remaining scalable and responsive.

Step 1: Define a Circular Path

The first step is to create a path that your text will follow. In SVG, you define paths with the element. For a top semi-circle:

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

Explanation of the d attribute:

  • M 28,190 → Move to the starting point
  • A 162,162 0 0,1 352,190 → Draw an arc with radius 162, ending at 352,190

This path defines the curve along which your text will flow.

Step 2: Attach Text to the Path

Next, use the and elements:

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

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);
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Adjust Spacing Dynamically

Sometimes the text doesn’t perfectly fit the arc. You can use JavaScript to dynamically adjust the spacing:

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();
Enter fullscreen mode Exit fullscreen mode

This ensures that your text always fits the curve, even if the container size changes.

Step 4: Add Bottom Stars or Additional Curved Text

You can also add a bottom arc for stars or other decorative elements:

<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>
Enter fullscreen mode Exit fullscreen mode

Step 5: Styling and Animation

Enhance your curved text with CSS for hover effects or glow:

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

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

✅ Summary

By combining SVG and with a little JavaScript, you can create perfectly curved text for any circular UI element.

  • Perfect for badges, coins, or logos
  • Works with multiple paths and different fonts
  • Supports animations and interactive effects

This technique can be extended to create interactive 3D badges, logos, or other circular UI elements with dynamic, professional typography.

Top comments (0)