JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<!-- <svg viewBox="0 0 312.09 211.2">

<g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1">
<path d="M311.09,1V210.08H296.37a14.18,14.18,0,0,1-2,.12c-1.63,0-4.51-.23-5.55-1.79s-2.89-5.13-3.91-7.09c-.29-.54-.51-1-.65-1.23a23,23,0,0,0-42.54,5.11,5.81,5.81,0,0,1-3.14,3.85,18.11,18.11,0,0,1-6.45,1H1V1H311.09m1-1H0V211.08H232.13A19.8,19.8,0,0,0,239,210a6.86,6.86,0,0,0,3.7-4.51,22,22,0,0,1,40.69-4.89c.66,1.22,3.32,6.48,4.61,8.4s4.29,2.24,6.38,2.24a17.86,17.86,0,0,0,2.13-.12h15.59V0Z"/>
</g></g></svg> -->

<svg viewBox="0 0 312.09 211.2">
<g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1">
    <defs>
        <clipPath id="svgPath2">
<path d="M311.09,1V210.08H296.37a14.18,14.18,0,0,1-2,.12c-1.63,0-4.51-.23-5.55-1.79s-2.89-5.13-3.91-7.09c-.29-.54-.51-1-.65-1.23a23,23,0,0,0-42.54,5.11,5.81,5.81,0,0,1-3.14,3.85,18.11,18.11,0,0,1-6.45,1H1V1H311.09m1-1H0V211.08H232.13A19.8,19.8,0,0,0,239,210a6.86,6.86,0,0,0,3.7-4.51,22,22,0,0,1,40.69-4.89c.66,1.22,3.32,6.48,4.61,8.4s4.29,2.24,6.38,2.24a17.86,17.86,0,0,0,2.13-.12h15.59V0Z"/>
        </clipPath>
    </defs>
</g></g></svg>
<svg viewBox="0 0 312.09 211.2">
  <defs><style>.cls-1{fill:#fff;}</style></defs>
    <g id="Layer_2" data-name="Layer 2">
      <g id="Layer_1-2" data-name="Layer 1">
      <clipPath id="svgPath3">
      <path class="cls-1" d="M0,0V211.08H232s4.38.06,7-1.12a6.86,6.86,0,0,0,3.7-4.51,22,22,0,0,1,40.69-4.89c.66,1.22,3.32,6.48,4.61,8.4,2,3,8.51,2.12,8.51,2.12h15.59V0Z"/>
      </clipPath>
      </g>
  </g>
</svg>
<svg height="0" width="0">
    <defs>
        <clipPath id="svgPath">
            <path fill="#ff0000" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="M215,100.3c97.8-32.6,90.5-71.9,336-77.6
        c92.4-2.1,98.1,81.6,121.8,116.4c101.7,149.9,53.5,155.9,14.7,178c-96.4,54.9,5.4,269-257,115.1c-57-33.5-203,46.3-263.7,20.1
        c-33.5-14.5-132.5-45.5-95-111.1C125.9,246.6,98.6,139.1,215,100.3z"/>
        </clipPath>
    </defs>
</svg>

<img...

CSS

img {
    clip-path: url(#svgPath3);
}