Как сделать такие круги, пробовал через псевдоэлементы с абсолютным позиционированием. Ваши предложения, заранее спасибо?

Question

[mzoary]

Answer 1

[Rerurk]

Svg

Answer 2

[Elon]

Я бы это делал через position: absolute; Сначало сделал круги, их родительскому елементу overflov: hidden; position: reletive; и спозиционировал в том месте где надо.

Comments

[mzoary]

Проблема в том что, этот цвет,градиентная функция. А на нее border-radius не работает. Пробовал так, потом пробовал через доп divы с псевдоэлементами, лишнее обрезал через clip-path. Но так как круги все таки позиционируются не от центра, то получается, что нужно задавать отрицательное позиционирование. Тут морока идет с наложением 4 блоков друг на друга (2 круга с сплошной градиентной заливкой, 2 с белой). То есть не получается выставить их так как на картинке.