SVG 如何生成随机路径？

const scale = (v, f) => {
    const [x, y] = v;
    return [f * x, f * y];
};

const normalize = v => scale(v, 1 / Math.hypot(...v));

const rotate = (v, a) => {
    const [x, y] = v;
    const c = Math.cos(a);
    const s = Math.sin(a);
    return [c * x - s * y, s * x + c * y];
};

const round = (v, f) => {
    const [x, y] = v;
    return [Math.round(f * x) / f, Math.round(f * y) / f];
};

const curveD = (segments, withArrow) => {
    const n = segments.length;
    let d = '';

    const [x1, y1] = segments[0][0];
    d += `M ${x1} ${y1}`;

    for (let i = 1; i < n - 1; ++i) {
        let [x2, y2] = segments[i - 1][1];
        let [[x3, y3], [x4, y4]] = segments[i];
        d += ` C ${x2} ${y2}, ${x3} ${y3}, ${(x3 + x4) / 2} ${(y3 + y4) / 2}`;
    }

    let [x2, y2] = segments[n - 2][1];
    let [[x3, y3], [x4, y4]] = segments[n - 1];
    d += ` C ${x2} ${y2}, ${x3} ${y3}, ${x4} ${y4}`;

    if (withArrow) {
        const v = scale(normalize([x3 - x4, y3 - y4]), 10);
        const [rx, ry] = round(rotate(v, Math.PI / 8), 100);
        const [lx, ly] = round(rotate(v, -Math.PI / 8), 100);

        d += ` l ${rx} ${ry} m ${-rx} ${-ry} l ${lx} ${ly}`;
    }

    return d;
};

const controlsD = segments => {
    const n = segments.length;
    let d = '';
    const r = 2;

    const drawPoint = (x, y) => {
        d += ` M ${x + r} ${y} a ${r} ${r} 0 0 0 ${-2 * r} 0`;
        d += ` M ${x - r} ${y} a ${r} ${r} 0 0 0 ${2 * r} 0`;
    };

    for (let i = 0; i < n; ++i) {
        const [[x1, y1], [x2, y2]] = segments[i];
        d += ` M ${x1} ${y1} L ${x2} ${y2}`;
        drawPoint(x1, y1);
        if (0 < i && i < n - 1) {
            drawPoint((x1 + x2) / 2, (y1 + y2) / 2);
        }
        drawPoint(x2, y2);
    }
    return d;
};

const drawRandomCurve = (svg, curve, controls, textarea) => {
    const width = svg.getAttribute('width');
    const height = svg.getAttribute('height');

    const randomX = () => Math.floor(width * Math.random());
    const randomY = () => Math.floor(height * Math.random());

    const randomControlSegments = n => {
        const segments = [];

        segments.push([
            [0, randomY()],
            [width - 1 - Math.floor(0.8 * randomX()), randomY()]
        ]);

        let y = (height - 1) * Math.floor(2 * Math.random());
        for (let i = 1; i < n - 1; ++i) {
            const p1 = [randomX(), y];
            y = height - 1 - y;
            const p2 = [randomX(), y];
            segments.push([p1, p2]);
        }

        segments.push([
            [Math.floor(0.8 * randomX()), randomY()],
            [width - 1, randomY()]
        ]);

        return segments;
    };

    const segments = randomControlSegments(5);
    const d = curveD(segments, true);

    curve.setAttribute('d', d);
    textarea.value = d;

    controls.setAttribute('d', controlsD(segments));
};


const doDraw = () => drawRandomCurve(
    document.getElementById('board'),
    document.getElementById('curve'),
    document.getElementById('controls'),
    document.getElementById('text')
);
document.getElementById('draw!').onclick = doDraw;
doDraw();

const showControls = () => {
    const show = document.getElementById('show_controls').checked;
    document.getElementById('controls').setAttribute(
        'visibility',
        (show) ? 'visible' : 'hidden'
    );
};
document.getElementById('show_controls').onclick = showControls;
showControls();

<button id="draw!">Обновить кривую</button>
<br>
<textarea id="text" cols="60", rows="3"></textarea>
<br>
<svg id="board" width="120" height="60" style="border: 1px solid gray;">
<path id="curve" stroke="black" stroke-width="2" fill="transparent"></path>
<path id="controls" stroke="red" stroke-width="1" fill="transparent" visibility="hidden"></path>
<br>
<input type="checkbox" id="show_controls" name="show_controls" />
<label for="show_controls">показать контрольные отрезки</label>
</svg>

const btn = document.getElementById('generator_btn');
const textarea = document.getElementById('textarea_generator');
const generatorField = document.getElementById('generator_field');
const generatorColor = document.getElementById('generator_color');

const W = 120;
const H = 64;
const MIN_ANGLE = 60;
const MIN_DISTANCE = (Math.min(W, H)) / 20;
const MAX_DISTANCE = (Math.min(W, H)) / 4;
let lastTwoPoints = [];

generatorColor.addEventListener('input', function() {
  let currentSvg = textarea.value;
  let strokeValue = /stroke:[^;]+;/.exec(currentSvg)[0];
  let updatedSvg = currentSvg.replace(strokeValue, 'stroke:' + generatorColor.value + ';');
  textarea.value = updatedSvg;
  generatorField.innerHTML = updatedSvg;
});

btn.addEventListener('click', function() {
  includeSvg();
});

function includeSvg() {
  let currentColor = generatorColor.value;
  let randomPath = generateRandomPath();
  let svgCode = generateSVG(currentColor, randomPath);
  textarea.value = svgCode;
  generatorField.innerHTML = svgCode;
}

function generateRandomPath() {
  const startX = getRandomNumber(W * 0.6) + W * 0.2;
  const startY = getRandomNumber(H * 0.6) + H * 0.2;
  let pathString = `<path d="M${startX} ${startY} `;

  for (let i = 0; i < 10; i++) {
    const controlX1 = getRandomNumber(W * 0.6) + W * 0.2;
    const controlY1 = getRandomNumber(H * 0.6) + H * 0.2;
    const controlX2 = getRandomNumber(W * 0.6) + W * 0.2;
    const controlY2 = getRandomNumber(H * 0.6) + H * 0.2;
    const endX = getRandomNumber(W * 0.6) + W * 0.2;
    const endY = getRandomNumber(H * 0.6) + H * 0.2;

    pathString += `${controlX1} ${controlY1} ${controlX2} ${controlY2} ${endX} ${endY}`;
  }

  return pathString + '"/>';
}

function getDistance(pointA, pointB) {
  return Math.sqrt((pointA[0] - pointB[0]) ** 2 + (pointA[1] - pointB[1]) ** 2);
}


function getAngle(pointA, pointB, pointC) {
  let a = getDistance(pointA, pointB);
  let b = getDistance(pointB, pointC);
  let c = getDistance(pointC, pointA);
  return Math.acos((a * a + b * b - c * c) / (2 * a * b)) * (180 / Math.PI);
}


function getRandomPoint() {
  let x = getRandomNumber(W * 0.6) + W * 0.2;
  let y = getRandomNumber(H * 0.6) + H * 0.2;

  let point = [x, y];

  if (lastTwoPoints.length < 2) {
    lastTwoPoints.push(point);
  } else {
    if (getAngle(...lastTwoPoints, point) < MIN_ANGLE ||
      getDistance(lastTwoPoints[1], point) < MIN_DISTANCE ||
      getDistance(lastTwoPoints[1], point) > MAX_DISTANCE) {
      point = getRandomPoint();
    } else {
      lastTwoPoints.shift();
      lastTwoPoints.push(point);
    }
  }

  return `${point[0]} ${point[1]}`;
}

function generateSVG(currentColor, path) {
  let startFigure = '<svg xmlns="http://www.w3.org/2000/svg" width="240" height="128" viewBox="0 0 120 64"><style>path{fill:none;stroke:' + currentColor + ';stroke-width:2;stroke-linecap:round;stroke-linejoin:round}</style>';
  let endFigure = '</svg>';
  return startFigure + path + endFigure;
}

function getRandomNumber(max) {
  return Math.floor(Math.random() * max);
}

body {
  margin: 0;
}

#generator_btn {
  margin: 0;
  display: inline-block;
  padding: 10px 15px;
  font-weight: 700;
  vertical-align: top;
}

#generator_color {
  height: 40px;
}

#textarea_generator {
  display: block;
  width: 100%;
  max-width: 90vw;
  margin: 10px 0;
}

<div class="gen_block">
  <button id="generator_btn">Generator SVG</button>
  <input type="color" id="generator_color" name="generator_color" value="#FE6C3B" />
</div>
<textarea id="textarea_generator" name="generator_svg" rows="10"></textarea>
<div id="generator_field"></div>