JSFiddle - React, Tailwind, and code Playground

by nedudi

HTML

<svg>
    
<defs>


  <clipPath id="textClip">
    <text id="text1" x="20" y="300"
        style="font-family: Arial; font-weight: bold;font-size: 180pt; stroke: black; fill: none;">
    HEY
    </text>
  </clipPath>

<g id="shapes">
<image id="resultImg"  preserveAspectRatio="xMidYMid meet" width="520px" height="520px" xlink:href="http://beerhold.it/500/500"/>
</g>
    
</defs>


<!-- draw with text as clip-path -->
<g >
    <use xlink:href="#shapes" style="clip-path: url(#textClip);"/>
</g>

    
    
</svg>