JSFiddle - React, Tailwind, and code Playground

by duopixel

HTML

<svg width="400" height="400">
    <path d="M30 30S40 23 23 42C113.333,113.333 136.667,113.333 150,80t40,50T230,240q20 20 54 20s40 23 23 42t20,30a20,30 0,0,1 -50,-50"/>
</svg>
<span id="result"></span>

CSS

path {
    fill:none;
    stroke:blue;
    stroke-width:5;   
}

JavaScript

SVGPathElement.prototype.normalizePath = function(bezierDegree,defaultFlatness) {

    var seg,letter,currentPoint,
    list = this.pathSegList,
    newpath = document.createElementNS("http://www.w3.org/2000/svg",'path'),
    method,newseg,
    x,y,
    i=0,N = list.numberOfItems,
    j,M,bezier,
    
    getCurrentPoint = function(i) {
        var j=i,
        x=false,y=false,
        prev;
        
        while (x===false || y===false) {
            j--;
            if (j<0) {
                if (x === false) { x = 0; }
                if (y === false) { y = 0; }
            }
            else {
                prev = list.getItem(j);
                if (prev.x!==undefined && x === false) { x = prev.x; }
                if (prev.y!==undefined && y === false) { y = prev.y; }
            }
        }

        return {x:x,y:y};
    };

    for (i=0;i<N;i++) {
        
        seg = list.getItem(i);
        letter = seg.pathSegTypeAsLetter;
        currentPoint = getCurrentPoint(i);
        
        //First transform relative to aboslute segments
        if (letter.toUpperCase() !== letter && letter!=='z') {
        
            method = 'createSVGPathSeg';
            
            switch (letter) {
                case 'z' : method+='ClosePath'; break;
                case 'm' : method+='Moveto'; break;
                case 'l' : method+='Lineto'; break;
                case 'c' : method+='CurvetoCubic'; break;
                case 'q' : method+='CurvetoQuadratic'; break;
                case 'a' : method+='Arc'; break;
                case 'h' : method+='LinetoHorizontal'; break;
                case 'v' : method+='LinetoVertical'; break;
                case 's' : method+='CurvetoCubicSmooth'; break;
                case 't' : method+='CurvetoQuadraticSmooth'; break;
            }
            
            method+='Abs';
            args = [];

            if (letter === 'h') { args.push(currentPoint.x+seg.x); }
            else if (letter === 'v') {...