why conic gradients cause aliasing when the value is an integer %?
compare both images.
if i add 0.5, it looks smooth, if i don't then it looks jagged and ugly.
why would it do this?
is it performance traded for looks? but this is super jarring and ugly.
can i even force it to use anti-aliasing without having to add 0.5?
21 Replies
that is just how it's implemented
it clearly can handle not looking like a staircase, so
When I had to do something similar (pie chart) I built a SVG generator because I couldn't get conic gradients to do antialiasing
i add 0.5 to the value, and it works
If you do everything at perfect 1/8th? increments it looks fine iirc
but, as you can imagine, i would rather not
its ugly though
its blurred, not true aliasing
i know
but it's close enough for what i needed it
for what i need, the svg generator won't work, as i need html and css
html can do svg directly tho
You could also do it with clip path and some math in CSS if you hate yourself
yes, but i need it to update with just css and html
svg animations exist
i know
but i didn't knew how to make them work at the time i wrote that
I never see this problem when I use degrees instead of percents.
does it work well with rads instead of degrees?
it has the same issue with degrees
@ἔρως here is my cursed clip path solution https://codepen.io/Thisisntme/pen/LYvojPd
that works. it's a pain to implement, but works
Are you using the exact same starting value as the ending value of the previous color? It has to be slightly off. When I use degrees, I add 0.2 degrees to the next value. For example:
This should also work with percents, but I don't know the proper amount to add.
no, i add 0.5
i like to put the colorstops in custom vars and calc the "bleed" both ways. that way it's easy to change and the actual switch of the color happens on the meant value
It's a bit more code, but easier to control
that is interesting