JSFiddle - React, Tailwind, and code Playground

by pashkes

HTML

<svg width="923" height="927" >
    <mask maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" id="m1">
      <linearGradient id="g" gradientUnits="objectBoundingBox" y2="0.5" x2="1" y1="0.5" x1="0">
        <stop stop-color="white" offset="0"/>
        <stop stop-color="white" stop-opacity="0" offset="1"/>
      </linearGradient>
      <rect id="svg_1" height="1" width="1" y="0" x="0" stroke-width="0" fill="url(#g)"/>
    </mask>
<image xlink:href="http://upload.wikimedia.org/wikipedia/en/thumb/0/08/DioHolyDiver.jpg/220px-DioHolyDiver.jpg" width="100%" height="100%" class="target"/>
</svg>

CSS

.target { mask: url(#m1); }