Blend SVG paths together to feel like 1 line - svg

Question

I have the following SVG:
<svg viewBox="0 0 100 100" width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M56,56 C112,56 28,28 56,56" fill="none" stroke="#0000FF" stroke-width="2px"></path>
<path d="M56,56 C112,56 8,1.5 16,3" fill="none" stroke="#FF7F00" stroke-width="2px"></path>
<path d="M16,3 C32,3 8,24 16,48" fill="none" stroke="#FF7F00" stroke-width="2px"></path>
<path d="M16,48 C32,48 6,2.5 12,5" fill="none" stroke="#FF0000" stroke-width="2px"></path>
</svg>
If you look closely, the lines abruptly end. You can see how they square off, like so:
Is there a way to make paths blend together?
EDIT: Ideally, I would want to find a way to automate this. The way I form the d value in the path is with the following:
const points = [
[56,56],
[16,3],
[16,48],
[12,5],
]
const generateLines = (points) => {
const lines = [];
for(let i = 0; i < points.length; i++) {
if(i == 0)
lines.push({x1: points[i][0], y1: points[i][1], x2: points[i][0], y2: points[i][1]});
else
lines.push({
x1: lines[i-1].x2,
y1: lines[i-1].y2,
x2: points[i][0],
y2: points[i][1]
});
}
return lines;
}
console.log(generateLines(points));
//<path d=M{x1},{y1} C{x1*2},{y1} {x2/2},{y2/2} {x2},{y2}

Answer 1

You can use pathLength (total length of path), stroke-dasharray (dash defined by length of dash and following space) and stroke-dashoffset (negative number along the path) on the same path to specify there a color should start and end.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path d="m 42 57 C 112 56 29 49 62 48 C 109 47 2 3 16 3 C 32 3 3 48 16 48 C 32 48 4 8 12 5"
fill="none" stroke="#0000FF" stroke-width="2px" pathLength="100" stroke-dasharray="25 100" stroke-dashoffset="0"></path>
<path d="m 42 57 C 112 56 29 49 62 48 C 109 47 2 3 16 3 C 32 3 3 48 16 48 C 32 48 4 8 12 5"
fill="none" stroke="#FF7F00" stroke-width="2px" pathLength="100" stroke-dasharray="25 100" stroke-dashoffset="-25"></path>
<path d="m 42 57 C 112 56 29 49 62 48 C 109 47 2 3 16 3 C 32 3 3 48 16 48 C 32 48 4 8 12 5"
fill="none" stroke="#FF7F00" stroke-width="2px" pathLength="100" stroke-dasharray="25 100" stroke-dashoffset="-50"></path>
<path d="m 42 57 C 112 56 29 49 62 48 C 109 47 2 3 16 3 C 32 3 3 48 16 48 C 32 48 4 8 12 5"
fill="none" stroke="#FF0000" stroke-width="2px" pathLength="100" stroke-dasharray="25 100" stroke-dashoffset="-75"></path>
</svg>

Answer 2

For those who want to edit the path attributes once
<script>
customElements.define('svg-colored-line', class extends HTMLElement {
connectedCallback() {
this.innerHTML = `<svg viewBox="0 0 100 100">` + [
["red", 0],
["green", 1],
["gold", 2],
["blue", 3]
].map(([stroke, offset]) => `<path d="M42 57C112 56 29 49 62 48C109 47 2 3 16 3C32 3 3 48 16 48C32 48 4 8 12 5"
fill="none"stroke-width="5"pathLength="4"stroke-dasharray="1 4"
stroke="${stroke}"stroke-dashoffset="-${offset}"/>`).join("") + `</svg>`;
}
});
</script>
<svg-colored-line></svg-colored-line>