Skip to content

Instantly share code, notes, and snippets.

@shshaw
Created March 15, 2018 17:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shshaw/056d88e134ca52c4e17dffb91d88edc1 to your computer and use it in GitHub Desktop.
Save shshaw/056d88e134ca52c4e17dffb91d88edc1 to your computer and use it in GitHub Desktop.
Knockout Text with SVG
<h1 class="title absolute-center">
<span class="knockout">
<!-- Change text here -->
<span class="knockout__text">KNOCKOUT TEXT</span>
<svg class="knockout__svg" width="100%" height="100%" text-rendering="geometricPrecision">
<defs>
<mask id="text-clip">
<text x="0" y="0.9em" width="100%" height="100%" fill="#FFF">KNOCKOUT TEXT</text>
</mask>
<!-- Ideal for word-wrapping, but it doesn't work as a mask :-( -->
<mask id="text-mask">
<foreignObject x="0" y="0" width="100%" height="100%">
<body xmlns="http://www.w3.org/1999/xhtml">
<div style="color: #FFF">KNOCKOUT TEXT</div>
</body>
</foreignObject>
</mask>
</defs>
<image width="100%" height="100%" preserveAspectRatio="xMidYMin slice" xlink:href="https://picsum.photos/1000/1000?image=994" mask="url(#text-clip)"></image>
</svg>
</span>
</h1>
<!--<svg width="100%" height="100%" text-rendering="geometricPrecision">
<defs>
<mask id="image-mask">
<image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://i.imgur.com/YVSnio4.jpg"></image>
</mask>
<pattern id="image-pattern" width="100%" height="100%" patternContentUnits="userSpaceOnUse">
<image width="100%" height="100%" preserveAspectRatio="xMidYMin slice" xlink:href="https://i.imgur.com/YVSnio4.jpg" mask="url(#text-clip)"></image>
</pattern>
</defs>
<foreignObject width="100%" height="100%" fill="url(#image-pattern)" mask="url(#image-mask)">
<body xmlns="http://www.w3.org/1999/xhtml">
<div style="color:#AAA">KNOCKOUT TEXT THAT WRAPS AROUND</div>
</body>
</foreignObject>
</svg>-->

Knockout Text with SVG

"knockout" text (able to see background through text) using SVG. Doesn't support text wrapping at the moment, but could be added via Javascript.

A Pen by Shaw on CodePen.

License.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@import "lesshat";
@import url(https://fonts.googleapis.com/css?family=Oswald);
html, body {
height: 100%;
}
//body { background-image: url(http://brokensquare.com/Code/assets/landscape.jpg); }
body,
.title {
font-family: "Oswald", sans-serif;
font-size: 80px;
line-height: 1;
color: #FFF;
text-align: center;
}
.title {
width: 100%;
height: 0.2em;
overflow: visible;
}
.knockout {
display: inline-block;
overflow: hidden;
text-align: left;
position: relative;
white-space: nowrap; // Until I can work out the issues with line wrapping in SVG
}
.knockout__text {
color: transparent;
}
.knockout__svg {
position: absolute;
top: 0;
left: 0;
user-select: none;
}
////////////////////////////////////////
// Presentational Styles
body {
background-color: #FFF;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
.absolute-center {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment