JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="200px" height="218px" viewBox="0 0 4680 5090" preserveAspectRatio="xMidYMid meet" id="s-mask-circles">
    <g id="layer1" fill="#f8fbfe" stroke="none">
      <path d="M2125 5075 c-146 -23 -229 -62 -573 -267 -130 -77 -403 -235 -607 -350 -203 -116 -414 -239 -467 -275 -259 -172 -422 -412 -463 -684 -22 -153 -22 -1756 0 -1909 40 -267 185 -484 455 -682 19 -14 157 -94 305 -178 285 -161 693 -397 884 -513 293 -176 420 -217 681 -217 261 0 388 41 681 217 191 116 599 352 884 513 149 84 286 164 305 178 209 153 334 307 410 503 58 150 60 196 60 1134 0 926 -3 982 -56 1123 -77 205 -223 383 -422 515 -53 36 -263 159 -467 275 -203 115 -477 273 -607 350 -351 209 -427 244 -583 268 -110 17 -312 16 -420 -1z"/>
    </g>
 
    <symbol id="s-flower-m">
      <image xlink:href="https://pp.userapi.com/c621706/v621706992/ed0f/yNt2L6dxgbg.jpg"/>
    </symbol>
        
    <mask id="mask-circles">
      <use xlink:href="#s-mask-circles" />
    </mask>

</svg>

<svg width="200" height="218" class="svg">
  <g mask="url(#mask-circles)">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-flower-m"></use> 
  </g>
</svg>

       

</div>

CSS

svg {
  display:block;
}