Gradient-path draws a line to the starting position as if the path is finished with "z", even if it is not

Using gradient-path on an svg with an “unfinished path” (i.e, it does not “end” with a z) results in gradient-path drawing a line to the end position even though the original SVG does not contain one. Interestingly, circles stop where they should but paths do not.

CodeSandbox

To Reproduce

Use gradient-path on an svg that does not end at the beginning, such as the following.

<svg id="gradient-path" width="300" height="200" viewBox="0 0 100 100">
      <path
        fill="none"
        d="M24.3,30
                C11.4,30,5,43.3,5,50
                s6.4,20,19.3,20
                c19.3,0,32.1-40,51.4-40
                C88.6,30,95,43.3,95,50
                s-6.4,20-19.3,20"
      ></path>
    </svg>

const gp = new GradientPath({
  path: document.querySelector("#gradient-path path"),
  segments: 30,
  samples: 3,
  precision: 2 // Optional
});

gp.render({
  type: "path",
  fill: [
    { color: "#C6FFDD", pos: 0 },
    { color: "#FBD786", pos: 0.25 },
    { color: "#F7797D", pos: 0.5 },
    { color: "#6DD5ED", pos: 0.75 },
    { color: "#C6FFDD", pos: 1 }
  ],
  width: 10
});

gp.render({
  type: "circle",
  fill: "#eee",
  width: 3,
  stroke: "#444",
  strokeWidth: 0.5
});

Expected behavior

The path should end where the SVG does.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version 87

[nathggns]

I’d argue the library should work out if the SVG has a close path command or not, and not close the path if it doesn’t. It does claim to support any SVG path after all.

[cereallarceny]

@CreativeSau @nathggns This should hopefully be fixed by the following release: https://github.com/cereallarceny/gradient-path/releases/tag/v2.3.0

Closing for now, let me know if this release doesn’t work for you.