Creating curved text
I want to create a half-circular curved text. I found a few articles: https://css-tricks.com/snippets/svg/curved-text-along-path/
The issue is, these don't seem very responsive and I have to pick very specific font-sizes to get this working. Is there an easier way or would it almost be better to just make it an image and give it alt text?
Geoff Graham
CSS-Tricks
Curved Text Along a Path | CSS-Tricks
We can flow text along a curved line with three tools built right into SVG: , and .
6 Replies
svg is the best way
svg can be responsive, by the way
Yea I just couldn't really get something good to be responsive - the viewbox I tried making something like
0 0 100% 100% but the actual path was overflowing from the svgMake the smol version, then do the 100% in CSS not the viewbox
Viewbox is your infinite canvas
I would have thought that you are going to be hard-pushed to find something more suited to this than an SVG.
When placing text along a curve you are always going to have to play with the font-size and start position
Thanks guys, I'll try to make a codepen and see what I can come up with 👀
with an SVG you can alter the text start position with
startOffset="70px" (px or %)