JSFiddle - React, Tailwind, and code Playground

by Nikola Mihin

HTML

<svg width="100%" height="100%" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%">
            <image xlink:href="http://dev.cobeisfresh.com/cobees/www/img/bg3.jpg" x="0" y="0" width="100%" height="100%" />
        </pattern>
    </defs>
    <mask id="mask">
    <polygon stroke-linejoin="round" stroke="white" stroke-width="88" points="93.3,50 136.6,75 136.6,125 93.3,150 50,125 50,75" />
    </mask>
   <rect fill="url(#img1)" width="100%" height="100%" mask="url(#mask)" />
</svg>