Codrops Playground

"Inverted" SVG image mask (text stencil) by yoksel

HTML

49
1
<!-- Invisible SVG -->
2
<svg viewBox="0 0 600 300" class="svg-defs">
3
  <!-- Symbol with text -->
4
  <symbol id="s-text">
5
    <text text-anchor="middle"
6
          x="50%" y="50%" dy=".35em"
7
          class="text"
8
          >
9
      Text
10
    </text>  
11
  </symbol>
12
​
13
  <!-- Mask with text -->
14
  <mask id="m-text"
15
        maskunits="userSpaceOnUse"
16
        maskcontentunits="userSpaceOnUse">
17
​
18
    <rect
19
          width="100%"
20
          height="100%"
21
          class="mask__shape">
22
    </rect>
23
    <use xlink:href="#s-text"
24
         class="mask__text"
25
         ></use>
26
​
27
  </mask>
28
</svg>
29
​
30
<div class="box-with-text">
31
  <!-- Content for text -->
32
  <div class="text-fill"></div>
33
​
34
  <!-- SVG to cover text fill -->
35
  <svg viewBox="0 0 600 300"
36
       class="svg-inverted-mask">
37
    <!-- Big shape with hole in form of text -->
38
    <rect
39
          width="100%"
40
          height="100%"
41
          mask="url(#m-text)"
42
          class="shape--fill"/>
43
    <!-- Transparent copy of text to keep
44
         patterned text selectable -->
45
    <use xlink:href="#s-text"
46
         class="text--transparent"
47
         ></use>
48
  </svg>
49
</div>

CSS

70
 
1
/* Main styles */
2
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);
3
​
4
.svg-inverted-mask {
5
  position: absolute;
6
  width: 100%;
7
  height: 100%;
8
}
9
​
10
.mask__shape {
11
  fill: white;
12
}
13
​
14
.box-with-text {
15
  position: absolute;
16
  top: 0;
17
  right: 0;
18
  bottom: 0;
19
  left: 0;
20
}
21
​
22
/* Visible fill of text */
23
.text-fill {
24
  position: absolute;
25
  top: 50%;
26
  left: 50%;
27
  padding-top: 35vw;
28
  padding-left: 100%;
29
  margin: auto;
30
  overflow: hidden;
31
  -webkit-transform: translate(-50%, -50%);
32
  -ms-transform: translate(-50%, -50%);
33
  transform: translate(-50%, -50%);
34
  background: url(https://img-fotki.yandex.ru/get/5600/yoksel.5c/0_46792_5ffcddbd_orig) 50% 50%/cover;
35
}
36
​
37
/* Fill of inverted mask */
38
.shape--fill {
39
  fill: #fff6cc;
40
}
41
​
42
/* Transparent copy of text to keep
43
patterned text selectable */
44
.text--transparent {
45
  fill: transparent;
46
}
47
​
48
@media (min-aspect-ratio: 2 / 1) {
49
  .text-fill {
50
    padding-top: 70vh;
51
    padding-left: 190vh;
52
  }
53
}
54
​
55
/* Other stuff */
56
html, body {
57
  height: 100%;
58
}
59
​
60
body {
61
  background: #fff6cc;
62
  font: 14.5em/1 Open Sans, Impact;
63
  text-transform: uppercase;
64
  margin: 0;
65
}
66
​
67
.svg-defs {
68
  width: 0;
69
  height: 0;
70
}

"Inverted" SVG image mask (text stencil)

by yoksel on

Demo 20 of "How to Create (Animated) Text Fills"

Codrops Logo Codrops Playground

Version 0.0.9 (alpha)

Codrops Playground is currently in development with many features to come, including mobile support. We are in alpha stage right now, so if you find a bug, please send a mail to playground@codrops.com or use the contact form on Codrops.

If you'd like to stay updated, follow us on Twitter @codrops. Thank you and stay tuned :)