Search code examples
javascriptjqueryhtmlcssspiral

How to make spiral text in html using css or javascript

How do I make a Spiral Text using CSS or Javascript ? check this image enter image description here

Solution

  • Is it css, its it javascript? No its SVG

    <svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="MyPath"
          d="M 20,30 20,20 60,20 60,30 50,30"/>
  </defs>

  <use xlink:href="#MyPath" fill="none" stroke-width="0.1" stroke="black"  />

  <text font-family="Verdana" font-size="5">
    <textPath xlink:href="#MyPath">
      Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, 
    </textPath>
  </text>

</svg>