HTML
54
1
<svg viewBox="0 0 600 300" class="svg-defs">2
3
<!-- Symbol with text -->4
<symbol id="s-text">5
<text text-anchor="middle"6
x="50%"7
y="50%"8
dy=".35em"9
class="text"10
>11
Text12
</text> 13
</symbol>14
15
<!-- Mask with text -->16
<mask id="m-text"17
maskunits="userSpaceOnUse"18
maskcontentunits="userSpaceOnUse">19
20
<rect21
width="100%"22
height="100%"23
class="mask__shape">24
</rect>25
<use xlink:href="#s-text"26
class="mask__text"27
></use>28
29
</mask>30
</svg>31
32
<div class="box-with-text">33
34
<!-- Container for video -->35
<div class="text-fill">36
<video 37
class="video" src="http://tympanus.net/codrops-playground/assets/images/posts/23145/bokeh2.mp4"38
autoplay loop39
></video>40
</div>41
42
<!-- Visible SVG -->43
<svg viewBox="0 0 600 300"44
class="svg-inverted-mask">45
<rect46
width="100%"47
height="100%"48
mask="url(#m-text)"49
class="shape--fill"/>50
<use xlink:href="#s-text"51
class="text--transparent"52
></use>53
</svg> 54
</div>CSS
78
1
/* Main styles */2
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);3
4
.mask__shape {5
fill: white;6
}7
8
.shape--fill {9
fill: #000;10
}11
12
.text--transparent {13
fill: transparent;14
}15
16
.box-with-text {17
position: absolute;18
top: 0;19
right: 0;20
bottom: 0;21
left: 0;22
}23
24
.text-fill {25
position: absolute;26
top: 50%;27
left: 50%;28
padding-top: 35vw;29
padding-left: 100%;30
margin: auto;31
overflow: hidden;32
transform: translate(-50%, -50%);33
transform: translate(-50%, -50%);34
transform: translate(-50%, -50%);35
}36
37
.video {38
position: absolute;39
left: 0;40
bottom: 0;41
width: 100%;42
}43
44
@media (min-aspect-ratio: 1 / 2) {45
.text-fill {46
padding-top: 35vw;47
}48
}49
50
@media (min-aspect-ratio: 2 / 1) {51
.text-fill {52
padding-top: 70vh;53
padding-left: 190vh;54
}55
}56
57
/* Other styles */58
html, body {59
height: 100%;60
}61
62
body {63
background: #000000;64
font: 14.5em/1 Open Sans, Impact;65
text-transform: uppercase;66
margin: 0;67
}68
69
.svg-defs {70
width: 0;71
height: 0;72
}73
74
.svg-inverted-mask {75
position: absolute;76
width: 100%;77
height: 100%;78
}