bug: Aliasing issues for Radial progress

[yan5]

What version of daisyUI are you using?

2.51.5

Describe your issue

I'm seeing 'radial progress' is visibly aliased on both Chrome and Firefox (on both Ubuntu and Windows 11) at 100% zoom, but no issues noticed with other components though.

What browsers are you seeing the problem on?

Chrome, Firefox

Reproduction URL (optional)

No response

[muttoni]

I'm having the same problem, especially when rendering the radials in small size (10-15px). I'm using a reverse radial as a notification duration indicator, so it starts at 100 and goes to 0 in the same time the notification stays open. At small sizes it really screws up. Any suggestions?

https://github.com/saadeghi/daisyui/assets/27052451/e1d3b104-12ef-46e1-b4c8-239e4a681dbe

[McBroColi]

I am also having this issue and I'm trying to understand why. It seems like I see some screenshots from other folks of which their implementation does not have this aliasing issue.

If I understand correctly though, this is likely to do with the way that the progress bar is constructed. It uses conic and radial gradients to create the circle. It seems especially apparent on high-resolution displays, but when using gradients like this there are very often jagged edges.

I think a better solution would probably be outside of the scope of DaisyUI considering that one would probably need to implement an SVG for the best result. But also, I've seen some approaches work with gradients. It would be nice to see this resolved.