<div class="container">
<h1>Animating Inline SVG Mask on SVG Element: Masking Displays in Webkit, Firefox, IE</h1>
</div>
<!-- SVG markup for the mask -->
<svg class="svg-mask">
<defs>
<mask id="mask1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<linearGradient id="grad" gradientUnits="objectBoundingBox" x2="0" y2="1">
<stop stop-color="white" offset="0"/>
<stop stop-color="black" stop-opacity="0" offset="1"/>
</linearGradient>
<circle cx="0.50" cy="0.50" r="0.50" id="circle" fill="url(#grad)"/>
</mask>
</defs>
</svg>
<h2 class="title">SVG Mask on SVG element</h2>
<!-- SVG markup for the masked image -->
<svg class="masked-element" width="300" height="200" viewBox="0 0 300 200">
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/backdrop.jpg" width="300" height="200" />
</svg>
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: sans-serif;
font-weight: 400;
margin: 0;
padding: 0;
background-color: black;
color: white;
}
.container {
max-width: 90%;
margin: 0 auto;
text-align: center;
}
.svg-mask {
position: absolute;
width: 0;
height: 0;
}
.masked-element {
position: relative;
display: block;
margin: 0 auto 20px;
animation: move 5s infinite;
}
.masked-element image {
mask: url(#mask1);
}
.title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-transform: uppercase;
text-align: center;
}
/* animation */
@keyframes move {
50% {
transform: translateY(40px) translateY(-60px);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.