svg curved text

HTML

<svg viewBox="0 0 800 800">
  <path id="curve" d="M662.5,431
	c0,114.047-92.453,206.5-206.5,206.5S249.5,545.047,249.5,431" />
  <text x="20">
    <textPath xlink:href="#curve">
      smiley curve smiley curve smiley
    </textPath>
  </text>
</svg>

CSS

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

body {
    background-color: #000;
    font-family: 'Luckiest Guy', cursive;
    font-size: 40px;
}

text {
    fill: #fff;
}