Coin

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <mask id="tatoo">
  <image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYuKnO1vdKTp3zXNNPyeoLcwkiNxrET03DFsrTmjp2be9PLpYSMRnDKCD19gfWgQ5LuzT-3K6UF3ieOtQvaBUKZPO4_Us7PH1wJcLRAwi6v_03U5K-g4iH7S5MqkwydF_wC3wWjapwLA/s500-no/" id="svg_3" height="500" width="500" y="0" x="0" opacity="0.5"/>  
  </mask>
 </defs>
 <symbol id="ba">
  <rect height="100" width="500"></rect>
 </symbol>
 <g>
  <image xlink:href="http://www.thisiscolossal.com/wp-content/uploads/2016/10/coin-1.jpg" id="svg_1" height="500" width="500" y="0" x="0"/>
 <g style="mask:url(#tatoo)">
 <use xlink:href="#ba" x="0" y="400">
  <animate attributename="fill" begin="0s" dur="5s" repeatcount="indefinite"
   values="cyan; magenta; yellow; black; cyan"/>
 </use>
 <use xlink:href="#ba" x="0" y="300">
  <animate attributename="fill" begin="0.2s" dur="5s" repeatcount="indefinite"
   values="cyan; magenta; yellow; black; cyan"/>
 </use>
 <use xlink:href="#ba" x="0" y="200">
  <animate attributename="fill" begin="0.4s" dur="5s" repeatcount="indefinite"
   values="cyan; magenta; yellow; black; cyan"/>
 </use>
 <use xlink:href="#ba" x="0" y="100">
  <animate attributename="fill" begin="0.6s" dur="5s" repeatcount="indefinite"
   values="cyan; magenta; yellow; black; cyan"/>
 </use>
 <use xlink:href="#ba" x="0" y="0">
  <animate attributename="fill" begin="0.8s" dur="5s" repeatcount="indefinite"
   values="cyan; magenta; yellow; black; cyan"/>
 </use>
 </g>
  <image xlink:href="http://www.thisiscolossal.com/wp-content/uploads/2016/10/coin-1.jpg" id="coin1" height="500" width="500" y="0" x="0">
   <animate attributename="opacity" begin="coin1.mousedown" dur="12s" values="1;0;1"/>
  </image>
 </g>
</svg>