JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<svg width="500" height="366">
  
  <!-- We're going to use the image twice, so let's make it a repeatable <symbol> -->
  <symbol id="image">
    <image x="0" y="0" width="500" height="366" xlink:href="http://i.stack.imgur.com/Ir7j2.jpg?s=128&g=1"></image>
  </symbol>
  
  <!-- A filter we can use to grayscale whatever -->
  <filter id="grayscale">
    <feColorMatrix type="saturate" values="0" />
  </filter>
  
  <!-- A black-to-white gradient mask that we can apply to whatever -->
  <mask maskUnits="userSpaceOnUse" id="fade">
    <linearGradient id="gradient" x1="0" y1="0" x2="100%" y2="0">
      <stop offset="0" style="stop-color: #FFFFFF" />
      <stop offset="0.4" style="stop-color: #FFFFFF" />
      <stop offset="0.6" style="stop-color: #000000" />
      <stop offset="1" style="stop-color: #000000" />
    </linearGradient>
    <rect fill="url(#gradient)" width="100%" height="100%" />
  </mask>
  
  <!-- Place the image once, in full color -->
  <use xlink:href="#image"></use>
  
  <!-- Place the image again, on top, both grayscaling it and masking it -->
  <use xlink:href="#image" filter="url(#grayscale)" mask="url(#fade)"></use>
  
</svg>