HTML
<div class="child">
The Swan.</div>
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
<defs>
<radialGradient id="Gradient1" cx="50%" cy="50%" fx="50%" fy="50%" r=".5">
<animate attributeName="cx" dur="15s" values="0%;100%;0%" repeatCount="indefinite" />
<animate attributeName="cy" dur="15s" values="50%;30%;50%;70%;50%" repeatCount="indefinite" />
<animate attributeName="fx" dur="15s" values="40%;60%;40%" repeatCount="indefinite" />
<stop offset="00%" stop-color="rgba(255, 255, 255, 1)" />
<stop offset="50%" stop-color="rgba(255, 255, 255, 0)" />
</radialGradient>
<mask id="spot" maskContentUnits="objectBoundingBox">
<rect width="1" height="1" fill="url(#Gradient1)">
</rect>
</mask>
</defs>
<g x="0" y="0" width="100%" height="100%" fill="#fff" mask="url(#spot)" id='test'>
<image xlink:href="http://www.defondos.com/bulkupload/artedigitales/Arte/Digital/Cisne%20Arcoiris_800.jpg" x="0" y="0" height="100%" width="100%"/>
</g>
</svg>
SCSS
@import url("https://fonts.googleapis.com/css?family=Libre+Franklin:400,700&subset=latin");
html {
width: 100%;
height: 100%;
box-sizing: border-box;
background: #000;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
width: 100%;
height: 100%;
font: 50px/50px "Libre Franklin";
font-weight: 900;
color: rgba(255, 255, 255, 1);
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
overflow: hidden;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
letter-spacing: -2.5px;
}
svg {
position: absolute;
width:100%;
height: 100%;
}
