SVG video mask on text
Created
June 25, 2019 22:30
-
-
Save seany/b60c6b421427c723a560e3125e423ce7 to your computer and use it in GitHub Desktop.
YRFB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="wrapper"> | |
<body onclick="window.location.href='https://discord.gg/Ap6U3Pb';" style="cursor:pointer; width:100%; height:100%;"></body> | |
<video autoplay playsinline muted loop preload poster="http://i.imgur.com/xHO6DbC.png"> | |
<source src="http://mazwai.com/system/posts/videos/000/000/218/original/severe-storm-over-mandurah.mp4?1454783161" /> | |
</video> | |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 89" 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="87" y="50">YRFB</text> | |
</mask> | |
</defs> | |
<rect x="0" y="0" width="100%" height="100%" /> | |
</svg> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Nope |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment