Skip to content

Instantly share code, notes, and snippets.

@devongovett
Forked from LeaVerou/dabblet.css
Created May 4, 2012 20:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save devongovett/2597603 to your computer and use it in GitHub Desktop.
Save devongovett/2597603 to your computer and use it in GitHub Desktop.
Text masking — The SVG way
/**
* Text masking — The SVG way
*/
svg {
font: 900 500%/1.2 'Arial Black', sans-serif;
}
text {
fill: url(#wood);
}
<svg width="6em" height="1.5em">
<defs>
<pattern id="wood" patternUnits="userSpaceOnUse" width="400" height="400" >
<image xlink:href="http://subtlepatterns.com/patterns/purty_wood.png" width="400" height="400" />
</pattern>
</defs>
<text y="1.2em">SVG rocks!</text>
</svg>
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment