JSFiddle - React, Tailwind, and code Playground

by george_black

HTML

<h1>SVG Mask Applied:</h1>	
<div class="svgMask">
    <svg width="400" height="300" baseProfile="full" version="1.2">
        <defs>
            <mask id="svgmask2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" transform="scale(1)">
                <image width="100%" height="300" xlink:href="http://thewebstorebyg.files.wordpress.com/2013/12/mask.png?w=400" />
            </mask>
        </defs>
        <image id="the-mask" mask="url(#svgmask2)" width="100%" height="300" y="0" x="0" xlink:href="http://thewebstorebyg.files.wordpress.com/2013/12/sample.jpg?w=400" />
    </svg>
</div>
<p>IE examples on MSDN: <a href="http://msdn.microsoft.com/en-us/library/ie/bg124134(v=vs.85).aspx">link</a>

</p>

<h2>Here is the mask.png</h2>

<img src="http://thewebstorebyg.files.wordpress.com/2013/12/mask.png?w=400" alt="mask image" />

<h2>Here is the sample.png</h2>

<img src="http://thewebstorebyg.files.wordpress.com/2013/12/sample.jpg?w=400" alt="mask image" />

CSS

body {
			    background: #ccc;
			}