Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
SVG Text Mask w/ Video Fill
<video autoplay playsinline muted loop preload poster="">
<source src="" />
<source src="" />
<svg xmlns="" viewBox="0 0 285 80" preserveAspectRatio="xMidYMid slice">
<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">OCEAN</text>
<rect x="0" y="0" width="100%" height="100%" />
const video = document.querySelector("video");
if (window.matchMedia('(prefers-reduced-motion)').matches) {
@font-face {
font-family: Biko;
body {
background: white;
margin: 2rem;
header {
width: 100%;
margin: 0 auto;
position: relative;
max-width: 1200px;
header video { width: 100%; }
svg {
width: 100%;
top: 0;
left: 0; // needed for FF, Safari, Edge
height: 100%;
svg text {
font-family: Biko, sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 38px;
svg rect {
fill: white;
svg > rect {
-webkit-mask: url(#mask);
mask: url(#mask);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.