Smooth color transition creates a wrong offset
See original GitHub issueHello,
When using the color_thresholds
feature with a hard
transition, the colors are placed exactly like I expect them to be:
However, if I use the smooth
transition instead (default mode), the red part completely disappears and the blue part becomes a lot bigger:
However, the dots have the right color when I hover the graph:
N.B: I’m using the version 0.11.0
of the card.
Here are the rendered linear gradients:
<!-- Hard mode -->
<linearGradient gradientTransform="rotate(90)" id="grad-vhiq9t48e-0">
<stop stop-color="#0000ff" offset="44.77958236658934%"></stop>
<stop stop-color="#00ff00" offset="44.78932714617168%"></stop>
<stop stop-color="#00ff00" offset="81.32250580046383%"></stop>
<stop stop-color="#ff0000" offset="81.33225058004618%"></stop>
<stop stop-color="#ff0000" offset="117.86542923433832%"></stop>
<stop stop-color="#ff0000" offset="117.87517401392067%"></stop>
</linearGradient>
<!-- Smooth mode -->
<linearGradient gradientTransform="rotate(90)" id="grad-qdc5p29le-0">
<stop stop-color="#0000ff" offset="44.77958236658934%"></stop>
<stop stop-color="#00ff00" offset="81.32250580046383%"></stop>
<stop stop-color="#827c00" offset="117.86542923433832%"></stop>
</linearGradient>
I tried to manually edit the gradient offsets, and this gradient looks way better:
<linearGradient gradientTransform="rotate(90)">
<stop stop-color="#0000ff" offset="0"></stop>
<stop stop-color="#00ff00" offset="44.77958236658934%"></stop>
<stop stop-color="#827c00" offset="81.32250580046383%"></stop>
</linearGradient>
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:5
Top Results From Across the Web
Flutter - Smooth transition color for LinearGradient
A possible solution is to create a background image with the gradient in Photoshop. After you are happy with the image, cut it...
Read more >transition | CSS-Tricks
.element { transition: background-color 0.5s ease; } ... How to Create a Realistic Motion Blur with CSS Transitions.
Read more >Avoiding Color Blips When Knitting Stripes HD version
Support me by buying me a coffee on Ko-Fi! https://www.ko-fi.com/roxannerichardsonHow to knit stripes in textured fabric without getting ...
Read more >transition - CSS: Cascading Style Sheets - MDN Web Docs
The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, ...
Read more >Using gradients for abrupt color changes in data ...
To get a clean jump from grey to a color we have to append two color stops at the same offset percentage. We...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hmmm, I was thinking there’s an error in the computed “offsets” in smooth mode, but I might be wrong.
The color of the dots and the colors in “hard” mode are just my “proofs” that the displayed color is not the one we expect to see.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. If this is still an active issue, please let us know!