Простая задача: нарисовать круг свойством
background. Берём radial-gradient(var(--radius), var(--my-color) 100%, #0000), можно сразу несколько — профит. Ведь правда?Беда в том, что для кругов, сделанных при помощи
border-radius, срабатывает сглаживание, они выглядят аккуратно, а вот градиенты внутри background рисуются по другим алгоритмам. Края рваные, пиксельные, грубые.Ана Тюдор со свойственной ей глубиной детализации пробует найти «идеальное» решение, которое и жёсткость уберёт, и слишком размазанными края не сделает, и для любого размера круга подойдёт, и к зуму подстроится.
https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges/
