JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/darkskyapp/delaunay/master/lib/matrix.js"></script>
<script src="https://rawgithub.com/darkskyapp/delaunay/master/lib/barycentric.js"></script>
<script src="https://rawgithub.com/darkskyapp/delaunay/master/lib/delaunay.js"></script>
<svg width="500" height="500">
    <path id="testGreen" fill="green" d="M 200.178955078125 185.72727966308594 l0 -1 l -4 -3 l -18 -5 l -17.999969482421875 -1 l -12 1 l -11 4 l -9 4 l -7 5 l -3 4 l -3 6 l -5 14 l -6 15 l -3 11 l 0 11 l 8 11.999984741210938 l 12 14 l 14 9 l 21 6 l 22.999969482421875 -3 l 10 -11 l 0 -13 l -10 -10.999984741210938 l -6 -11 l -1.999969482421875 -4 l 1.999969482421875 -6 l 6 -4 l 6 -6 l 8 -4 l 5 -5 l 2 -6 l 0 -7 l 0 -6 l 0 -4 l 0 -6"></path>
    <path id="testBlue" fill="blue" d="M 240.178955078125 150.72727966308594 l0 -1 l -4 -3 l -18 -5 l -17.999969482421875 -1 l -12 1 l -11 4 l -9 4 l -7 5 l -3 4 l -3 6 l -5 14 l -6 15 l -3 11 l 0 11 l 8 11.999984741210938 l 12 14 l 14 9 l 21 6 l 22.999969482421875 -3 l 10 -11 l 0 -13 l -10 -10.999984741210938 l -6 -11 l -1.999969482421875 -4 l 1.999969482421875 -6 l 6 -4 l 6 -6 l 8 -4 l 5 -5 l 2 -6 l 0 -7 l 0 -6 l 0 -4 l 0 -6"></path>
</svg>
<canvas id="canvas" width="500" height="500">

JavaScript

var p = document.getElementById("testGreen");
convertToAbsolute(p);
p = p.getAttribute("d").split(/ ?[ML] +/);
p.splice(0, 1);
p.push(p[0]); // close our polygone

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    vertices = new Array(),
    x, y;

// Generate vertices as [ [0,1], [1,0], ... ]
for (i = 0, len = p.length; i < len; i++) {
    var a = p[i].split(/ /);
    vertices[i] = [ a[0], a[1] ];
}
// Draw canvas preview
ctx.beginPath();
ctx.lineTo(vertices[0][0], vertices[0][1]);
for (i = 1, len = vertices.length; i < len; i++) {
    ctx.lineTo(vertices[i][0], vertices[i][1]);
}
ctx.closePath();
ctx.stroke();

// Get triangles
var triangles = Delaunay.triangulate(vertices);
console.log(triangles);






// Convert relative vertices to absolute 
// from: http://stackoverflow.com/a/9677915/1130377
function convertToAbsolute(path) {
    var x0, y0, x1, y1, x2, y2, segs = path.pathSegList;
    for (var x = 0, y = 0, i = 0, len = segs.numberOfItems; i < len; ++i) {
        var seg = segs.getItem(i),
            c = seg.pathSegTypeAsLetter;
        if (/[MLHVCSQTA]/.test(c)) {
            if ('x' in seg) x = seg.x;
            if ('y' in seg) y = seg.y;
        } else {
            if ('x1' in seg) x1 = x + seg.x1;
            if ('x2' in seg) x2 = x + seg.x2;
            if ('y1' in seg) y1 = y + seg.y1;
            if ('y2' in seg) y2 = y + seg.y2;
            if ('x' in seg) x += seg.x;
            if ('y' in seg) y += seg.y;
            switch (c) {
                case 'm':
                    segs.replaceItem(path.createSVGPathSegMovetoAbs(x, y), i);
                    break;
                case 'l':
                    segs.replaceItem(path.createSVGPathSegLinetoAbs(x, y), i);
                    break;
                case 'h':
                    segs.replaceItem(path.createSVGPathSegLinetoHorizontalAbs(x), i);
                    break;
                case 'v':
                   ...