SVG Path Letter

Demo

Life is like the ocean. It goes up and down.

How to

  1. Define path in <defs> tag and set id.
  2. set <textPath> inside of <text> tag and set href="#path-name"

vue

<template>
  <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <path
        id="path"
        class="path"
        d="M 43.111 227.251 C 41.665 231.794 145.941 78.265 249.2 253.276 C 352.459 428.287 473.667 302.245 473.667 302.245"
      />
    </defs>
    <text x="20" y="50" class="text">
      <textPath href="#path">
        Life is like the
        <tspan class="fill-blue-500">ocean.</tspan>
        It goes up and down.
      </textPath>
    </text>
  </svg>
<template>