Menu
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.
892
Here we just write the characters of a text one by one and start applying the CSS transform properties to make the whole text look curved (or shaped like an arc). However, one advantage of this method is that you can select the text and even perform copy-paste.
Curving text using Canvas: The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. This is a relatively easier method to curve text using a bit of JavaScript for manipulating the canvas element and styling it.
Imagine we draw a curved line in SVG and give it an ID called curve. Then, we drop content into the SVG using the <text> tag and give it a width that matches the SVG viewBox dimensions.
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!
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> ... If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
