Blend SVG paths together to feel like 1 line-CodePudding

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:

M{x1},{y1} C{x1*2},{y1} {x2/2},{y2/2} {x2},{y2}

CodePudding user response：

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>

CodePudding user response：

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>