SVG path to points JavaScript example

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="lib/style.css">
</head>
<body>
  <h1>Convert SVG path to points example</h1>
  <div id="container">
    <div>
      <p>Original Polygon with Path</p>
      <svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="0.5" clip-rule="evenodd" viewBox="0 0 326 326" width="326px">
        <path id="polygon-1" fill="none" stroke="#00FFFF" d="M162.892.5l140.389 81.056v162.11l-140.389 81.057-78.695-45.853L22.5 243.667V81.556L162.892.5z" />
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="0.5" clip-rule="evenodd" viewBox="0 40 326 240" width="326px">
        <path id="polygon-2" fill="none" stroke="#000" d="M92.885 40.919l140.396 81.056v101.99l-70.389 40.638-81.88-47.288L22.5 183.547V81.556l70.385-40.637z" />
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="0.5" clip-rule="evenodd" viewBox="0 150 326 226" width="326px">
        <path id="polygon-3" fill="none" stroke="#BBB" d="M162.892 164.06l66.579 37.556 73.84 42.024-140.419 81.083-70.372-40.645-70.012-40.438 74.558-42.21 65.826-37.37z" />
      </svg>
    </div>
    <div>
      <p>Redrawing Polygon using getPoints from original polygons</p>
      <svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="0.5" clip-rule="evenodd" viewBox="0 0 326 340" width="326px">
        <polygon id="demo" fill="none" stroke="#FF0000"></polygon>
      </svg>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
  <script src="lib/svg-path-to-points.js"></script>
  <script src="lib/script.js"></script>
</body>
</html>

h1 {
  font-size: 20px;
  text-align: center;
}
#container div {
    width: 50%;
    float: left;
    text-align: center;
}

var  points1 = getPoints(document.getElementById("polygon-1").getAttribute("d"));
var  points2 = getPoints(document.getElementById("polygon-2").getAttribute("d"));
var  points3 = getPoints(document.getElementById("polygon-3").getAttribute("d"));
document.getElementById("demo").setAttribute("points", points1);

var tl = anime.timeline();
tl.loop = true;
tl.direction = "alternate";
tl.add({
    targets: "#demo",
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: "linear",
    duration: 2000
}).add({
    targets: "#demo",
    points: [
        {value: points1},
        {value: points2},
        {value: points3}
    ],
    duration: 4000
})

function getPoints(str)
{
    str = str.replace(/[0-9]+-/g, function(v)
        {
            return v.slice(0, -1) + " -";
        })
        .replace(/\.[0-9]+/g, function(v)
        {
            return v.match(/\s/g) ? v : v + " ";
        });
    
    var keys = str.match(/[MmLlHhVv]/g);
    var paths = str.split(/[MmLlHhVvZz]/g)
    .filter(function(v){ return v.length > 0})
    .map(function(v){return v.trim()});
    
    var x = 0, y = 0, res = "";
    for(var i = 0, lenKeys = keys.length ; i < lenKeys ; i++)
    {
        switch(keys[i])
        {
            case "M": case "L": case "l":
                var arr = paths[i].split(/\s/g).filter(function(v) { return v.length > 0 });
                for(var t = 0, lenPaths = arr.length ; t < lenPaths ; t++)
                {
                    if(t%2 === 0)
                    {
                        x = (keys[i] == "l" ? x : 0) + parseFloat(arr[t]);
                        res += x;
                    } else 
                    {
                        y = (keys[i] == "l" ? y : 0) + parseFloat(arr[t]);
                        res += y;
                    }
                    if(t < lenPaths - 1) res += " ";
                }
                break;
            case "V":
                y = parseFloat(paths[i]);
                res += x + " " + y;
                break;
            case "v":
                y += parseFloat(paths[i]);
                res += x + " " + y;
                break;
            case "H":
                x = parseFloat(paths[i]);
                res += x + " " + y;
                break;
            case "h":
                x += parseFloat(paths[i]);
                res += x + " " + y;
                break;
        }
        if(i < lenKeys - 1) res += " ";
    }
    
    return res;
}

# SVG path to points JavaScript example
JavaScript example to convert SVG path to points

#Demo
Implement the result to drawing SVG polygon and morph it using AnimeJS library

# Library
AnimeJS

#References
http://tutorials.jenkov.com/svg/path-element.html#path-commands