v147 · SVG · demo

Path Text Builder

Drag the control points to sculpt a cubic Bézier curve — your text flows along it in real time using the new inline path attribute.

Drag the ● blue and ● red handles to reshape the curve. Drag the hollow circles to move the endpoints.
<!-- Chrome 147: inline path attribute on <textPath> -->
<text font-size="18">
  <textPath
    path="M 30,180 C 150,20 350,220 450,80 S 620,30 670,120"
    startOffset="3%">
    Text flows along any SVG path — Chrome 147
  </textPath>
</text>

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗