SVG Mask

by Nikolay Petrov

HTML

<section class="mask-wrapper">
  <svg>
   <defs>
     <mask id="mask" x="0" y="0" width="100%" height="100%" >
       <rect id="alpha" x="0" y="0" width="100%" height="100%"/>
       <text id="title" x="50%" y="0" dy="1.58em">SVG MASK</text>
       <text id="subtitle" x="50%" y="0" dy="9.8em">SVG + CSS = Awesome</text>
     </mask>
    </defs>
    <rect id="base" x="0" y="0" width="100%" height="100%"/>
  </svg>
</section>

CSS

* {
    margin: 0;
    padding; 0;
}
body {
  font-family: 'Open Sans', sans-serif;
  background: url(https://msys.pro/c/portfolio/bestmaps/_teaser.jpg) no-repeat top center;
}

.mask-wrapper {
  width: 100%;
  height: 250px;
  z-index: 10;
}

svg {
  width: 100%;
  height: inherit;
}
svg text {
  text-anchor: middle;
}
svg #alpha {
  fill: #f6f6f6;
}
svg #title {
  letter-spacing: -2px;
  font-size: 6em;
  font-weight: 800;
}
svg #subtitle {
  letter-spacing: 8px;
  font-size: 1.2em;
  font-weight: 300;
  text-transform: uppercase;
}
svg #base {
  fill: black;
  mask: url(#mask);
}