Text Path example d3 v4

<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Arvo"
      rel="stylesheet"
      type="text/css"
    />
    <style>
      html {
        font-family: "Arvo", serif;
      }

text {
        font-size: 2em;
      }

path {
        fill: none;
        stroke: tomato;
        stroke-dasharray: 5, 5;
      }

#letters {
        padding: 10px;
        width: 960px;
        position: absolute;
        bottom: 0;
      }
    </style>
  </head>
  <body>
    <input
      type="text"
      id="letters"
      value="This  is  text  is  generated  using  textPath"
    />
    <a
      href="https://stackoverflow.com/users/7430694/chandrakant-thakkar"
      style="position: absolute;top: 87%;left: 77%;"
      target="_blank"
    >
      <img
        src="https://stackoverflow.com/users/flair/7430694.png"
        width="208"
        height="58"
        alt="profile for Chandrakant Thakkar at Stack Overflow, Q&amp;A for professional and enthusiast programmers"
        title="profile for Chandrakant Thakkar at Stack Overflow, Q&amp;A for professional and enthusiast programmers"
      />
    </a>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
      var width = 960,
        height = 500;

var line = d3.line().curve(d3.curveBasis);

var input = d3.select("input").on("input", changeLetters);

var letters = input.node().value;

var startingPath = getStartingPath();

var svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .call(
          d3
            .drag()
            .container(function(d) {
              return this;
            })
            // .subject(function(d) { var p = [d3.event.x, d3.event.y]; return [p, p]; })
            .on("start", dragStarted)
        );

var textPath = svg
        .append("defs")
        .append("path")
        .attr("id", "textPath")
        .attr("d", startingPath);

var path = svg.append("path").attr("d", startingPath);

var text = svg
        .append("text")
        .append("textPath")
        .attr("xlink:href", "#textPath")
        .text(letters);

function changeLetters() {
        letters = input.node().value;
        text.text(letters);
      }

function dragStarted() {
        var x0 = d3.event.x,
          y0 = d3.event.y;

var d = [
          [x0, y0],
          [x0, y0]
        ];

path.datum(d);
        textPath.datum(d);

d3.event.on("drag", function() {
          var x1 = d3.event.x,
            y1 = d3.event.y,
            dx = x1 - x0,
            dy = y1 - y0;

d.push([(x0 = x1), (y0 = y1)]);
          textPath.attr("d", line);
          path.attr("d", line);
        });
      }

function getStartingPath() {
        return "M480,250 m-150, 0 a150,150 0 1,0 300,0 a150,150 0 1,0 -300,0Z";
      }
    </script>
  </body>
</html>

https://d3js.org/d3.v4.min.js