<!DOCTYPE html>
<html>
  <head>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <script src="https://raw.githack.com/krispo/svg-path-utils/master/build/svg-path-utils.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    
    <h3>Calculate Inverse Path from Path</h3>
    
    <div>
      <div>Path data: </div>
      <div><textarea oninput="onInput(this.value)" id="input"></textarea></div>
      <svg class="path" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path id="path" marker-start="url(#arrowstart)" marker-end="url(#arrowend)"></path>
      </svg>  
    </div>
    
    <div>
      <div>Inverse Path data: </div>
      <div id="output"></div>
      <svg class="path" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path id="inverse_path" marker-start="url(#arrowstart)" marker-end="url(#arrowend)"></path>
      </svg>
    </div>
    
    <svg class="defs">
      <defs>
        <marker id="arrowstart" markerWidth="10" markerHeight="10" orient="auto" refX="2" refY="2" fill="red">
          <circle r="2" cx="2" cy="2"/>
        </marker>
        <marker id="arrowend" markerWidth="5" markerHeight="5" orient="auto" refX="1" refY="2.5" fill="red">
          <polygon points="0,0 5,2.5 0,5"/>
        </marker>
      </defs>
    </svg>
    
    <div>
      <a href="https://github.com/krispo/svg-path-utils" target="_blank">More details here</a> 
    </div>
    
  </body>
</html>
console.clear();
var spu;
document.addEventListener('DOMContentLoaded', function main() {
  spu = new svg_path_utils.SVGPathUtils();
  
  var d = 'M50,300 L50,250 C50,150 75,150 100,250 C150,450 200,450 200,250 Q200,100 400,100';
  
  document.getElementById('input').value = d;
  onInput(d);
});

function onInput(d){
  var path = document.getElementById('path');
  path.setAttribute('d', d);
  
  var inverse_path = document.getElementById('inverse_path');
  var inverse_d = spu.inversePath(d);
  inverse_path.setAttribute('d', inverse_d);
  
  document.getElementById('output').innerHTML = inverse_d;
}
.path {
  height:150px; 
  width:60%;
  /* border: 1px solid red; */
}
.path path {
  stroke: gray;
  stroke-width: 10;
  fill: none;
}
.defs {
  height:0;
}

/*others*/
#input {width: 100%; font-size: 10px;}
#output {width: 100%; font-size: 12px;}