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

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.


  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
    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
    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

    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):

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

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

  5. User Avatar
    Permalink to comment#

    Nice article ! But I have one question, what is the “d” attribute into “path” ? And how can I change the cercle’s angle ?
    Thank you

    • User Avatar
      Geoff Graham
      Permalink to comment#

      Hey there! d defines the way the SVG path is drawn by specifying points along the path:

      You could attempt to alter the curvature directly in the SVG code (some folks are really good at this!) but it’s honestly much easier to draw the path in an application like Illustrator or Sketch, export it as SVG, then grab the code from there.

  6. User Avatar
    Permalink to comment#

    This is awesome! Thanks for this! Now what if I want rainbow text? I was using this:

        background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
        background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
        -webkit-background-clip: text;
        background-clip: text;

    but I can only put it in a span element to turn out the rainbow look I’m going for. I really don’t want to have to do each letter individually. I like the gradient look… HELP please! :-)

    • User Avatar
      Permalink to comment#

      update: I figured out a workaround but I’d still like to know the answer to this as I find it very interesting!

Leave 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.