Curved Text Along a Path

We can flow text along a curved line with three tools built right into SVG: <path>, <text> and <textPath>.

The Snippet

<svg viewBox="0 0 500 500">
  <path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
  <text width="500">
    <textPath alignment-baseline="top" xlink:href="#curve">
      Dangerous Curves Ahead
    </textPath>
  </text>
</svg>

How We Got There

Imagine we draw a draw a curved line in SVG and give it an ID called curve.

See the Pen NgwPYB by Geoff Graham (@geoffgraham) on CodePen.

Then, we drop content into the SVG using the <text> tag and give it a width that matches the SVG viewBox dimensions. We're not going to see anything yet, but we know the text is there off screen somewhere.

See the Pen ZyaYOw by Geoff Graham (@geoffgraham) on CodePen.

We really want to see that text. We can wrap our text in the <textPath> tag and set it to follow the lines of our curved path by calling the path ID we set earlier.

See the Pen Kqywpe by Geoff Graham (@geoffgraham) on CodePen.

Now we're cooking with gas!

We don't want that curve to be seen, so let's give the path a transparent fill. We could also do this in CSS, but we're applying it inline directly in the SVG markup for the sake of this example.

See the Pen xrPbgx by Geoff Graham (@geoffgraham) on CodePen.

The rest is CSS! The exact font size will depend on the text itself and what font family is being used but, once you strike the right balance, the SVG itself will handle the responsiveness and ensure everything stays on the curve at any scale.

See the Pen SVG Text Along a Curved Path by Geoff Graham (@geoffgraham) on CodePen.

We could apply this same method to any type of curved path.

See the Pen SVG Text Along a Curved Path by Geoff Graham (@geoffgraham) on CodePen.

Comments

  1. User Avatar
    Brandon Smith
    Permalink to comment#

    Neat! Part of why I follow this site is it keeps me up to date on obscure/bleeding-edge web standards that I’d never hear about anywhere else.

    • User Avatar
      Joe Weaver
      Permalink to comment#

      Same, tbh.

      I have loved this site for about 5 years now since I can always count on it to steer me right! Two thumbs up

  2. User Avatar
    TJ
    Permalink to comment#

    Wow, so much easier than in this css-tricks article from 2012: Set Text on a Circle. SVG FTW.

  3. User Avatar
    goose
    Permalink to comment#

    Now if you can figure out how to do this in Canvas, you’ll be the hero of many people!

  4. User Avatar
    Velenir

    As an alternative to fill="transparent" and maybe more semantically correct you can wrap <path/> in <defs></defs> (or symbol, which also has other uses):

    <defs>
      <path id="curve" .../>
    </defs>
    

    Anything inside won’t be rendered but can be referenced from outside.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag