Chapter 12: SVG textPath

SVG textPath does — it takes your text and makes it flow along any path you define.

I’m going to explain it like we’re building beautiful curved text together — step by step, slowly, with copy-paste examples.

What is <textPath> really?

• It’s a child element that must live inside a <text> (or sometimes nested in <tspan>, but usually directly in <text>)
• It tells the browser: “Ignore the normal x/y positioning — instead, follow this path I’m pointing to!”
• The path is defined separately (usually in <defs>) with a normal <path> element that has an id
• The <textPath> links to that path using href=”#the-id”

Result: Your letters bend, rotate, and follow the direction of the path — super useful for:

• Circular logos / badges / stamps
• Wavy / arched titles
• Text on maps (rivers, roads)
• Decorative banners
• Animated scrolling text (combine with JS later)

Here are some real-world looking examples of what <textPath> can create (curved around circle, along arc, wavy path):

visualcinnamon.com

stackoverflow.com

veloxthemes.com

Basic structure (must-know pattern)

Result: The text bends along a nice quadratic curve.

Key attributes on <textPath>

Most important one = startOffset

• “0%” → starts at beginning of path
• “50%” → centers text on path (super common for circles/arcs)
• Negative % or px → starts before path begins

Example 1 – Classic circular text (top half only)

Result: Text perfectly centered along top semicircle.

Here’s what circular/arc text often looks like in practice:

visualcinnamon.com

Placing text on arcs with d3.js | Visual Cinnamon

Example 2 – Full circle text (top + bottom — no upside-down!)

Common trick: two paths — one for top, one for bottom (flip sweep flag).

Result: Both halves readable — no upside-down text!

Example 3 – Wavy fun path with startOffset shift

Shifted a bit to start earlier — looks playful.

Here’s a wavy text example:

blog.olivierlarose.com

How to Move a Text along an SVG Path on Scroll using React and Framer Motion

Common beginner mistakes & tips

• Forget <defs> or wrong id → text disappears
• No startOffset=”50%” on circle → text starts at weird place
• Path direction wrong → text upside-down (flip sweep-flag 0↔1 in A command)
• Text too long → overflows or clips (use textLength + lengthAdjust=”spacingAndGlyphs”)
• Browser differences → test in Chrome/Firefox/Safari (especially full circles)
• Accessibility → add aria-label or duplicate normal text hidden for screen readers

Mini practice challenges

1. Make your name curve along the top of a circle (use two paths if you want bottom too)
2. Create a wavy “SALE 50% OFF” banner
3. Try text on a heart-shaped path (you can copy a heart <path d=”…” /> from earlier lessons)

Paste your code here if you want — I’ll review it like we’re sitting together tweaking it 😄

Which part feels tricky? startOffset? Making full circles without upside-down text? Path direction? Arcs? Just tell me — we’ll zoom in with more examples until it feels easy and fun! 🚀