Как сделать такую маску, clip-path?

Question

[NewUser4242]

Есть блок, там 4 таких "круга" и на ховер они еще и растягиваются, + в них есть текст. Думаю сделать для каждого "круга" маску или clip-path но как? Вручную не охота, может есть генератор, где залить SVG/PNG?
Cам "круг"

spoiler

<svg width="396" height="400" viewBox="0 0 396 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M182.325 396H396V182.325C396 81.6271 314.373 0 213.675 0H189.837C84.95 0 0 84.95 0 189.837V213.675C0 314.373 81.6271 396 182.325 396Z" fill="purple"/>
</svg>

P/S если подскажете вариант реализации по-лучше буду благодарен