SVG ClipPath

clip.html

<style type="text/css">
  #clip {
    clip-path: url(#gradBars);	
  }
</style>

<div id="clip">
  <img class="svg-clipped" src="http://lorempixel.com/600/600/sports/">
</div>

<svg height="0" width="0">
  <defs>
    <clipPath id="gradBars">
      <rect y="498" width="1176" height="26"/>
      <rect y="464" width="1176" height="30"/>
      <rect y="429" width="1176" height="30"/>
      <rect y="391" width="1176" height="33"/>
      <rect y="356" width="1176" height="30"/>
      <rect y="324" width="1176" height="27"/>
      <rect y="291" width="1176" height="27"/>
      <rect y="260" width="1176" height="25"/>
      <rect y="233" width="1176" height="21"/>
      <rect y="205" width="1176" height="21"/>
      <rect y="178" width="1176" height="20"/>
      <rect y="153" width="1176" height="14"/>
      <rect y="127" width="1176" height="16"/>
      <rect y="105" width="1176" height="11"/>
      <rect y="81" width="1176" height="11"/>
      <rect y="61" width="1176" height="8"/>
      <rect y="41" width="1176" height="8"/>
      <rect y="21" width="1176" height="6"/>
    </clipPath>
  </defs>
</svg>