Curved Text Along a Path

We can flow text along a curved line with three tools built right into SVG: , and .
The Snippet

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