JSFiddle - React, Tailwind, and code Playground

by olragon

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 70 90">
  <defs>
    <marker id="t" markerWidth="4" markerHeight="4"
            orient="auto" refY="2">
      <path d="M0,0 L4,2 0,4" />
    </marker>
  </defs>
  <polyline points="0,0 0,50 20,70 40,10 42,8 44,10, 46,14 50,50" />
</svg>

CSS

path     { stroke:#c00; stroke-width:0.5; fill:none }
polyline {
  stroke:none; fill:none; stroke-width:0.5;
  marker-start:url(#t);
  marker-mid:url(#t);
  marker-end:url(#t);
}

JavaScript

midMarkers(document.querySelector('polyline'),6);

// Given a polygon/polyline, create intermediary points along the
// "straightaways" spaced no closer than `spacing` distance apart.
// Intermediary points along each section are always evenly spaced.
// Modifies the polygon/polyline in place.
function midMarkers(poly,spacing){
  var svg = poly.ownerSVGElement;
  for (var pts=poly.points,i=1;i<pts.numberOfItems;++i){
    var p0=pts.getItem(i-1), p1=pts.getItem(i);
    var dx=p1.x-p0.x, dy=p1.y-p0.y;
    var d = Math.sqrt(dx*dx+dy*dy);
    var numPoints = Math.floor( d/spacing );
    dx /= numPoints;
    dy /= numPoints;
    for (var j=numPoints-1;j>0;--j){
      var pt = svg.createSVGPoint();
      pt.x = p0.x+dx*j;
      pt.y = p0.y+dy*j;
      pts.insertItemBefore(pt,i);
    }
    if (numPoints>0) i += numPoints-1;
  }
}