<div class = 'svg'>
  <h2>SVG: Gradient Mask</h2>
<svg width="400" height="400">
	<defs>
        <radialGradient id="fill" fx="0.5" fy="0.2">
            <stop offset="0.15" stop-color="hsla(255,255%,255%,1)"/>
            <stop offset="0.9" stop-color="hsla(234, 95%, 35%, 1)"/>
            <stop offset="1" stop-color="hsla(234, 95%, 5%, 1)"/>
        </radialGradient>
       
        <pattern id="line" x="0" y="0" width="1" height="16" viewBox="0 0 1 16" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="1" height="1" fill="hsla(255,255%,255%,1)">
                <animate attributeName="y" begin="0s" dur="0.8s" from="0" to="15" repeatCount="indefinite"/>
            </rect>
        </pattern>
        
        <mask id="mask1">
            <rect x="0" y="0" height="400" width="400" fill="url(#line)"/>
        </mask>
       
        <mask id="mask2">
            <rect x="0" y="0" height="400" width="400" fill="hsla(255,255%,255%,1)">
                <animate attributeName="y" begin="0s" dur="16s" from="400" to="0" repeatCount="indefinite"/>
            </rect>
        </mask>
        
       	<g id="image">
            <rect width="100%" height="100%" fill="hsla(0,0%,0%,1)"/>
        	<circle cx="200" cy="200" r="150" fill="url(#fill)"/>
            <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/electricwolf.jpg" width="100%" height="100%"/>
        </g>
    </defs>
 
   	<rect width="100%" height="100%" fill="hsla(0,0%,0%,1)"/>
    <g mask="url(#mask1)">
        <g>
            <use xlink:href="#image" transform="scale(1,16)"/>
            <animateTransform attributeName="transform" type="translate"
                begin="0s" dur="16s" repeatCount="indefinite"
                from="0,-6000" to="0,0"
            />
        </g>
    </g>

    <g mask="url(#mask2)">
    	<use xlink:href="#image"/>
    </g>
</svg>
</div>

@import url(https://fonts.googleapis.com/css?family=Ubuntu:700);

body{
  background:hsla(0,0%,0%,1);
  font-family: 'Ubuntu', sans-serif; 
}
h2{
  color:hsla(255,255%,255%,1);
  font-size:1.5em;
}
.svg{
  width:100%;
  height:50%;
  text-align:center;
  margin-top:5em;
}
svg{
  max-width:100%;
}