SVG Image Masks

by Jonathan Sampson

HTML

<svg width="100" height="100">
    <defs>
        <pattern id="a" patternUnits="userSpaceOnUse" width="100" height="100">
            <image xlink:href="http://i.imgur.com/7Nlcay7.jpg" x="0" y="0" width="100" height="100" />
        </pattern>
    </defs>
    <polygon fill="url(#a)" points="25 0, 50 0, 75 0, 100 25, 100 50, 100 75, 75 100, 50 100, 25 100, 0 75, 0 50, 0 25" />
</svg>
<p>SVG Image Masks</p>

CSS

body {
    color: #FFF;
    padding: 1em 2em;
    text-align: center;
    background-color: #333;
    font-family: 'Segoe UI', Tahoma;
}