Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.


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">

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

  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

  type: "circle",
  fill: "#eee",
  width: 3,
  stroke: "#444",
  strokeWidth: 0.5

Expected behavior

The path should end where the SVG does.



Desktop (please complete the following information):

  • OS: macOS
  • Browser: Chrome
  • Version 87

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:3
  • Comments:12 (6 by maintainers)

github_iconTop GitHub Comments

nathggnscommented, Jan 7, 2022

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.

cereallarcenycommented, Mar 18, 2022

@CreativeSau @nathggns This should hopefully be fixed by the following release:

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Path following color gradient in TikZ - LaTeX Stack Exchange
Here is a more complete answer -- still not perfect, and still slow, but at least is merges nicely with node borders:
Read more >
Elements of Vector Calculus Flashcards | Quizlet
A function from multiple inputs (ex: spatial position) to multiple outputs (vector corresponding to that position). They can describe force fields and fluid ......
Read more >
Can I apply a gradient along an SVG path? - Stack Overflow
It draws the arc, from the top edge anti-clockwise to the right edge (270°), but the gradient is wrong. Instead of following the...
Read more >
Gradients made easy - CodeProject
A utility to design gradients interactively.
Read more >
Paths — SVG 2
The position of the pen can be changed, and the outline of a shape (open or ... If the path data string contains...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found