We can flow text along a curved line with three tools built right into SVG:
<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
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.
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.
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.
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.
We could apply this same method to any type of curved path.