JSFiddle - React, Tailwind, and code Playground

by Vladyslav Babenko

HTML

<div>
  The text should be visible within the circle
</div>

<div class="svgClass">
  <svg width="100%" height="100%" >
    <mask id="mask">
      <rect fill="white" width="100%" height="100%" fill-opacity="1" />
      <circle cx="100" cy="100" r="90" />
    </mask>
    <rect mask="url(#mask)" fill="green" width="100%" height="100%" fill-opacity="1"/>
  </svg>
</div>

CSS

.svgClass {
  position: absolute;
  top: 0;
}