CODEWITHSUNDEEP
javascriptcsstext
Boris
Boris

Reputation: 641

Having curved text with html, css or JS?

enter image description here

How would it be possible to create curved text like this in HTML5, CSS3 or JavaScript? I am aware of transform: rotate(45deg); but that just rotates it. I have used Lettering.JS but that seems to remove any jQuery I already had on the text. The text is countdown; that works, but when used with lettering.js to make it curved, countdown does not work.

Upvotes: 1

Views: 4953

Answers (1)

Robert Longson
Robert Longson

Reputation: 124179

You can do this with SVG.

text {
  font-size: 18px;
  font-family: sans-serif;
}
<svg viewBox="0 0 130 130">

  <path id="MyPath" fill="none" stroke="lightblue"
        d="m10,45c53,-33 96,3 96,3" />

  <text><textPath href="#MyPath">CURVE ME!</textPath></text>

</svg>

Upvotes: 4

Related Questions