Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

curved text (not image) [duplicate]

I'm trying to make a curved text effect using CSS3, HTML Canvas, or even SVG (see image below for example)? Is this possible? If so, how can I achieve this effect?

Update: To clarify: The text that will be styled this way will be dynamic.

Arched or Curved Text Example

like image 702
gabriel Avatar asked Jan 23 '26 00:01

gabriel


1 Answers

SVG supports text-on-a-path directly, though it does not 'bend' the individual glyphs along the path. Here's an example of how you create it:

...
<defs>
  <path id="textPath" d="M10 50 C10 0 90 0 90 50"/>
</defs>
<text fill="red">
  <textPath xlink:href="#textPath">Text on a Path</textPath>
</text>
...
like image 52
Phrogz Avatar answered Jan 25 '26 13:01

Phrogz



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!