JSFiddle - React, Tailwind, and code Playground

by unloco

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="294" height="345" viewBox="0 0 294 345">
  <defs>
    <filter id="texture4902" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
      <feImage xlink:href="https://i.imgur.com/bmcAxKs.jpg" preserveAspectRatio="none"  result="texture-img"
               width="100" height="100"></feImage>
      <feTile in="texture-img" x="0" y="0" width="100%" height="100%" result="tile"></feTile>
      <feComposite in2="SourceGraphic" operator="in" in="tile" result="composite"></feComposite>
      <feBlend in="SourceGraphic" in2="composite" mode="multiply"></feBlend>
    </filter>
  </defs>

  <g>
    <g filter="url(#texture4902)">
      <g>
        <image x="0" y="0" xlink:href="https://i.imgur.com/QMunN6l.png" opacity="1"></image>
      </g>
    </g>
  </g>
</svg>

CSS

svg {
  outline: 1px solid red;
  width: 500px;
  height: 350px;
}