SVG video mask on text
A Pen by Simon Evans on CodePen.
<div class="wrapper"> | |
<video autoplay playsinline muted loop preload poster="http://i.imgur.com/xHO6DbC.png"> | |
<source src="http://mazwai.com/system/posts/videos/000/000/148/preview_mp4/kenji_kawasawa-106_balloons.mp4?1419192915" /> | |
</video> | |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 80" preserveAspectRatio="xMidYMid slice"> | |
<defs> | |
<mask id="mask" x="0" y="0" width="100%" height="100%" > | |
<rect x="0" y="0" width="100%" height="100%" /> | |
<text x="72" y="50">Simon</text> | |
</mask> | |
</defs> | |
<rect x="0" y="0" width="100%" height="100%" /> | |
</svg> | |
</div> |
// Nope |
.wrapper { | |
position: relative; | |
width: 100%; | |
margin: 0 auto; | |
max-width: 1000px; | |
video { | |
width: 100%; | |
} | |
svg { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
text { | |
font-family: 'Montserrat', sans-serif; | |
font-weight: 900; | |
text-transform: uppercase; | |
font-size: 40px; | |
} | |
> rect { | |
-webkit-mask: url(#mask); | |
mask: url(#mask); | |
} | |
rect { | |
fill: #fff; | |
} | |
} | |
} | |
// codepen config | |
body { | |
margin: 60px 50px 0; | |
} | |
.wrapper { | |
&:before, | |
&:after { | |
content: ''; | |
position: absolute; | |
top: 0; | |
width: 10px; | |
height: 100%; | |
background-color: #fff; | |
} | |
&:before { | |
left: -9px; | |
} | |
&:after { | |
right: -5px; | |
} | |
} |
SVG video mask on text
A Pen by Simon Evans on CodePen.