svg curved text

by Ayyappan Sakthivadivel

HTML

<svg viewBox="0 0 800 350">
  <path id="curve" d="M234,253Q275,273,325,253" />
  <text x="20">
    <textPath xlink:href="#curve">
      Kannan D.R
    </textPath>
  </text>
</svg>

CSS

* {
    transform-origin: 0px 0px 0px;
}

body {
    background-color: #000;
    font-family: 'arial', cursive;
    font-size: 12px;
}

text {
    fill: #fff;
}