JavaScript automatic spine in SVG

desc.md

This is a automatic spine creator in SVG data. The point of this file is to create automatic "sub channels" desplayed in a neat arrow down Here is a comparacing between 2 spines

1. spine(100, 100, 4, 45)
2. spine(200, 100, 4, 30)

a slight increase or decrease may resolve into drastic changes. The spines are dynamically calculated on the height of the spine itself

Credit:

1. Discord (for the initial SVG data)

spine.js

var r = (n) => {
    return Number((n).toFixed(3))
}

var replaceHTMLCharacters = function(text) {
    var reg = new RegExp(/(\r\n?|\n|\t|    )/g);
    var ntext = text.replace(reg, "");
    return ntext;
}

var spineOut = (x, y, lose = false) => {
    if(!x || !y) return false
    var p1 = r(y + 4)
    var p2 = r(y + 2)

    var o1 = r(x + 9)
    var o2 = r(x + 9.552)
    var o3 = r(x + 10)

    var str = `${lose ? `M ${x} ${y}` : ''}
        L ${x} ${y+6}
        C ${x} ${r(y+4.896)} ${r(x+0.895)} ${p1} ${x+2} ${p1}
        L ${o1} ${p1}
        C ${r(o2)} ${p1} ${o3} ${r(y+3.552)} ${o3} ${y+3}
        C ${o3} ${r(y+2.448)} ${r(o2)} ${p2} ${o1} ${p2}
        L ${x+2} ${p2}
        C ${r(x+0.895)} ${p2} ${x} ${r(y+1.105)} ${x} ${y}
    ${lose ? 'Z' : ''}`

    return str
}

var spine = (x, y, n, l) => {
    var o1 = (x - 2)

    var length = l // 45
    var yL = r(y + length) // 174.049
    
    var p1 = r(y - 1)
    var p2 = r(yL + 4)
    var p3 = r(yL + 2)

    var str = `M ${x} ${y}
        C ${x} ${y - 0.552} ${r(x - 0.448)} ${p1} ${x - 1} ${p1}
        C ${x - 1.553} ${p1} ${o1} ${y - 0.552} ${o1} ${y}
        L ${o1} ${yL}
        C ${o1} ${yL + 2.209} ${r(x - 0.21)} ${p2} ${x + 2} ${p2}
        L ${x + 9} ${p2}
        C ${r(x + 9.552)} ${p2} ${x + 10} ${r(yL + 3.552)} ${x + 10} ${p3 + 1}
        C ${x + 10} ${yL + 2.448} ${r(x + 9.552)} ${p3} ${x + 9} ${p3}
        L ${x + 2} ${p3}
        C ${x + 0.895} ${p3} ${x} ${r(yL + 1.105)} ${x} ${yL}
        ${[...Array(n).keys()].map((v) => spineOut(x, y + (length / (n+1)) * (v+1)))}
    Z`
    return str
}

// C X1 Y1 X2 Y2 X Y
// L X  Y

var x = 197.648
var y = 129.049

//              X  Y  Lines Height
var str = spine(x, y, 4,    45)

console.log(replaceHTMLCharacters(str));

// M 197.648 129.049        C 197.648 128.497 197.2 128.049 196.648 128.049        C 196.095 128.049 195.648 128.497 195.648 129.049        L 195.648 159.049        C 195.648 161.258 197.438 163.049 199.648 163.049        L 206.648 163.049        C 207.2 163.049 207.648 162.601 207.648 162.049        C 207.648 161.497 207.2 161.049 206.648 161.049        L 199.648 161.049        C 198.543 161.049 197.648 160.154 197.648 159.049                L 197.648 141.049        C 197.648 139.945 198.543 139.049 199.648 139.049        L 206.648 139.049        C 207.2 139.049 207.648 138.601 207.648 138.049        C 207.648 137.497 207.2 137.049 206.648 137.049        L 199.648 137.049        C 198.543 137.049 197.648 136.154 197.648 135.049    ,        L 197.648 147.049        C 197.648 145.945 198.543 145.049 199.648 145.049        L 206.648 145.049        C 207.2 145.049 207.648 144.601 207.648 144.049        C 207.648 143.497 207.2 143.049 206.648 143.049        L 199.648 143.049        C 198.543 143.049 197.648 142.154 197.648 141.049    ,        L 197.648 153.049        C 197.648 151.945 198.543 151.049 199.648 151.049        L 206.648 151.049        C 207.2 151.049 207.648 150.601 207.648 150.049        C 207.648 149.497 207.2 149.049 206.648 149.049        L 199.648 149.049        C 198.543 149.049 197.648 148.154 197.648 147.049    ,        L 197.648 159.049        C 197.648 157.945 198.543 157.049 199.648 157.049        L 206.648 157.049        C 207.2 157.049 207.648 156.601 207.648 156.049        C 207.648 155.497 207.2 155.049 206.648 155.049        L 199.648 155.049        C 198.543 155.049 197.648 154.154 197.648 153.049        Z