JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<body>
  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <path id="mypath"
    style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
    d="m 70,67 15,0 c 0,0 -7.659111,-14.20627 -10.920116,-27.28889 -3.261005,-13.08262 9.431756,-13.85172 6.297362,-15.57166 -3.134394,-1.71994 -7.526366,-1.75636 -2.404447,-3.77842 3.016991,-1.19107 9.623655,-5.44678 0.801482,-9.67404 C 76.821958,10 70,10 70,10"
    />
  </svg>
  <div id="points"></div>
</body>

JavaScript

/**
 * Converts a path into an array of points.
 *
 * Uses animateMotion and setInterval to "steal" the points from the path.
 * It's very hacky and I have no idea how well it works.
 *
 * @param SVGPathElement  path to convert
 * @param int             approximate number of points to read
 * @param callback        gets called once the data is ready
 */
function PathToPoints(path, resolution, onDone) {
  var ctx = {};
  ctx.resolution = resolution;
  ctx.onDone = onDone;
  ctx.points = [];
  ctx.interval = null;

  // Walk up nodes until we find the root svg node
  var svg = path;
  while (!(svg instanceof SVGSVGElement)) {
    svg = svg.parentElement;
  }
  // Create a rect, which will be used to trace the path

  var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  ctx.rect = rect;
  svg.appendChild(rect);

  //motion.onbegin = PathToPoints.beginRecording.bind(this, ctx);
 // motion.onend = PathToPoints.stopRecording.bind(this, ctx);

  // Add rect

  var m = ctx.rect.getScreenCTM();
  ctx.points.push({x: m.e, y: m.f});
  
  console.log(m.e)
}


PathToPoints(mypath, 100, function(p){points.textContent = JSON.stringify(p)});