First, I want to say that the library is cool and thank you for your work!
I'm using it for a line chart that often has 100% values (i.e. --size: 1). This is awkward because the line isn't rendered at all in that case. The clip-path polygon evaluates to 100% * (1 - 1), which of course 0. I do see that this ends up showing the full line at --size: 0, so it's good that is visible. I'd suggest showing half the line at both extremes, though.
Changing the clip-path value to this does the trick:
clip-path: polygon(
0 calc(100%*(1 - var(--start, var(--size))) + (.5 * var(--line-size))),
100% calc(100%*(1 - var(--size)) + (.5 * var(--line-size))),
100% calc(100%*(1 - var(--size)) - (.5 * var(--line-size))),
0 calc(100%*(1 - var(--start, var(--size))) - (.5 * var(--line-size)))
)
Here's a demonstration: https://codepen.io/rognstad/pen/ZEKVeNm?editors=110
I'd be happy to submit a PR if this sounds useful to you. Thanks!
First, I want to say that the library is cool and thank you for your work!
I'm using it for a line chart that often has 100% values (i.e. --size: 1). This is awkward because the line isn't rendered at all in that case. The clip-path polygon evaluates to 100% * (1 - 1), which of course 0. I do see that this ends up showing the full line at --size: 0, so it's good that is visible. I'd suggest showing half the line at both extremes, though.
Changing the clip-path value to this does the trick:
Here's a demonstration: https://codepen.io/rognstad/pen/ZEKVeNm?editors=110
I'd be happy to submit a PR if this sounds useful to you. Thanks!