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 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.
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.
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
Wow, so much easier than in this css-tricks article from 2012: Set Text on a Circle. SVG FTW.
Now if you can figure out how to do this in Canvas, you’ll be the hero of many people!
As an alternative to
fill="transparent"and maybe more semantically correct you can wrap<path/>in<defs></defs>(orsymbol, which also has other uses):Anything inside won’t be rendered but can be referenced from outside.
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
Hey there!
ddefines the way the SVG path is drawn by specifying points along the path:https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
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.
you don’t need change circle’s angle. you must just do another path! :-D
This is awesome! Thanks for this! Now what if I want rainbow text? I was using this:
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! :-)
update: I figured out a workaround but I’d still like to know the answer to this as I find it very interesting!
Here’s a little animation. I always wanted to learn how to animate text on a path is css! https://codepen.io/thoughtassassin/pen/aRBJWM
Can anyone explain what does 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″ stand for
Hey Leo! Those control the shape of the path, which in this case, is the curve. SVG is code at the end of the day, and that’s the code for that particular path.
If you’re wondering how in the world you’d know how to write that, then don’t worry, because most of us don’t. We get those from the illustration program we work in, whether that’s Illustrator, Sketch, or some other app, when the SVG is exported.
Nice. How would you ensure that the text is center-aligned on the textPath? Setting text-anchor: middle doesn’t work as it is still left-aligned on the path and leftmost 50% is hidden.
I’ve discovered it’s done by adding the attribute startOffset=”50%” on the textPath element and the aforementioned CSS text-anchor: middle on the text element.
You can now do it with amCharts: https://codepen.io/team/amcharts/pen/MLEKVK
Very nicely done!
I’m looking for a way of displaying a set of images in circular frames with captions around the frame.
Is embedding SVG code for each caption a viable way to do this, or am I asking for trouble?
Good question! I think that’s a perfectly fine way to go. In fact, if you look toward the comment form of this site, you’ll see something similar with the Code of Conduct element. :)
How do you make the path invisable?
Check out the fourth example in the “How We Got There” section. A transparent fill is added to remove the default black. :)
Nice trick!
after finding this tutorial, I messed today little bit with svg animations..
sample code, how text moves along curve path:
Moving Text Is Interactive
Hi, hope you are well. I need to ask a question; I have an online designing site in which there are many product templates. The problem is when a round design is entered using SVG, the position of curved texts are distorted. Why is that ? It would be great if you can help me. Thank you in advance.
can we also add curved to urdu or arabi words? If yes then how?
Here is the code.
Sorry if this is a duplicate message but I don’t think my first message included the code I pasted in. When I preview, it disappears (sigh) I’m working with a theme and there is one piece of code I don’t understand. I’m hoping you can help me because I haven’t been able to figure it out myself. I’m sending even though it disappears on my screen. Maybe you can still see it – I hope
Thank you in advance,
Rosemary
How would you stretch the text across the whole path without changing the letter-spacing manually, doesn’t work well for responsive when you want it to always stretch to the end.
Hi thanks for this!I’m wondering how to change the color of the textpath??
Great explanations! thank you. I have a quick question, I am trying to use text-anchor on a path, however, when I used “middle” half of the text dissapear. When I use “start”, I can see the entire text. What I could be doing wrong?
Hey Alberto! When
text-anchoris set to “middle” that is in reference to the current position of the<text>element, which is set by thexattribute. If we say we want to anchor at the middle, what we’re saying is we want to align the middle of the text element at value of thexattribute. That’s like sliding the text element to the left until the middle anchor is reached, which is why you’re seeing it get cut off. Set it to “start” and the anchor is at the left edge of the text element, revealing the full thing.Think about it like pinning a piece of paper up on a cork board. Imagine we draw a mark on the board indicating where we want to pin up a piece of paper. If we put the pin in the middle of the paper then stick it to the mark we drew on the board, the paper will be positioned one way. If we were to move the pin to the “start” of the paper then re-pin the paper to the board, it will be positioned another way.
Hey Geoff, this is awesome thank you! Apologies if this has been asked already – I was wondering how one might have the text animate along this path? I want the curve to be static, but the text to “crawl” along it if you will. Any pointers to get started? Thanks again!
Hi this is great!
How would I set the path so that the text curve is inverted, like a boat shape, so that the semi circle is flipped?
Hi Anastasia! You’d want to change the points in the path so they curve the other way. I’m pretty bad at doing that sort of thing manually right in the code, so I’d take that SVG code, drop it in something like Sketch or Figma, edit the curve, then export the new code.
So, maybe something like this instead?
Great tutorial! Can you also make a tut on how to make text in heart shape or spiral text like in this example:
https://www.mockofun.com/tutorials/curved-text-generator/
What Is The Text You Used In The Curved Bold Writing?
It’s called Luckiest Guy — you can snag it right on Google Fonts.
using two
textPathwill cause them to overlapWhat would be the code to offset one of them ?
How can I change color of each letter?
I’d say like you would for any other text. Chris spells out (get it?!) a few approaches in this article.
Heyyy, I’ve been trying to get this working but my typo won’t link to the path.
Would you be so kind and tell me what I’m doing wrong?
I’ve inserted everything here: https://atelier.wild-core.net/emerge/ (middle of the page)
The path appears, the typo also … but they don’t link.
Thank you so much for any help.
Kind regards from France.