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