JSFiddle - React, Tailwind, and code Playground

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="m168,177c0,-1 0,-6 0,-10c0,-6 0.289673,-11.162643 2,-17c2.141373,-7.308517 4.695084,-14.546143 9,-23c3.903549,-7.665657 8.522217,-13.380737 11,-16c3.436081,-3.632271 7.232956,-7.589729 11,-10c5.393585,-3.450989 8.087433,-6.793938 13,-9c6.119492,-2.748055 13.03804,-5.88929 19,-8c8.054153,-2.851418 14.979233,-5.09584 24,-7c9.978149,-2.106255 17.953308,-2.499031 26,-3c7.984528,-0.497101 16.011169,-0.448326 25,0c10.037384,0.500618 19.09201,3.736931 28,7c10.11319,3.704536 18.273041,6.375473 28,11c9.298248,4.4207 18.397827,10.623611 25,18c4.270386,4.771149 3.842834,6.110954 6,9c4.672821,6.258171 7.448792,12.824249 10,20c2.438782,6.859482 3.881348,13.025208 5,18c0.904572,4.022659 3.24292,8.946991 4,13c1.480377,7.925186 1,15 1,22c0,7 0.942596,12.155441 -1,21c-1.35675,6.177307 -3,12 -5,19c-2,7 -4.584808,14.168243 -8,22c-2.681396,6.148987 -4.351105,16.063721 -12,20c-0.88916,0.457581 -5.718994,1.310211 -9,4c-5.57666,4.571747 -14,9 -24,13c-10,4 -21.017975,6.903595 -32,9c-10.017151,1.912201 -18.921783,4.492401 -30,6c-10.944489,1.48941 -31,2 -45,2c-1,0 -5.132996,0.430481 -9,-1c-4.194351,-1.551605 -10.254059,-3.357239 -16,-6c-5.297501,-2.436493 -9.812653,-6.206818 -12,-8c-2.78833,-2.285889 -6,-3 -9,-5c-3,-2 -7.21167,-4.714111 -10,-7c-3.281006,-2.689789 -5.714127,-6.21167 -8,-9c-2.689789,-3.281006 -5,-6 -8,-9c-2,-2 -4.144287,-3.934143 -5,-6c-1.210144,-2.92157 -1.692551,-4.186005 -3,-6c-0.826904,-1.147263 -2.458801,-2.693436 -3,-4c-0.765366,-1.847763 -1,-4 -1,-6c0,-2 -1,-5 -1,-8c0,-4 -0.493454,-5.878555 -1,-9c-0.480545,-2.961258 -0.917603,-3.386871 -2,-6c-0.38269,-0.923874 0.707108,-2.292892 0,-3c-0.707108,-0.707108 -1,-1 -1,-2c0,-1 -1,-2 -1,-3c0,-2 0,-3 0,-4c0,-1 0,-2 0,-3c0,-1 0,-2 0,-4c0,-3 0,-4 0,-6c0,-1 0,-2 0,-2c0,-1 0,-3 0,-4c0,-1 0,-1 0,-2c0,-1 0,-2 0,-2c0,-1...

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);

  var motion = document.createElementNS("http://www.w3.org/2000/svg", "animateMotion");
  motion.setAttribute("path", path.getAttribute("d"));
  motion.setAttribute("begin", "0");
  motion.setAttribute("dur", "3"); // TODO: set this to some larger value, e.g. 10 seconds?
  motion.setAttribute("repeatCount", "1");
  motion.onbegin = PathToPoints.beginRecording.bind(this, ctx);
  motion.onend = PathToPoints.stopRecording.bind(this, ctx);

  // Add rect
  rect.appendChild(motion);
}

PathToPoints.beginRecording = function(ctx) {
  var m = ctx.rect.getScreenCTM();
  ctx.points.push({x: m.e, y: m.f});
  ctx.interval = setInterval(PathToPoints.recordPosition.bind(this, ctx), 1000*3/ctx.resolution);
}

PathToPoints.stopRecording = function(ctx) {
  clearInterval(ctx.interval);

  // Remove the rect
  ctx.rect.remove();

  ctx.onDone(ctx.points);
}

PathToPoints.recordPosition = function(ctx) {
  var m = ctx.rect.getScreenCTM();
  ctx.points.push({x: m.e, y: m.f});
}
PathToPoints(mypath, 100, function(p){points.textContent = JSON.stringify(p[0].x)});