JSFiddle - React, Tailwind, and code Playground

by Amens

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)">
                <path width="100%" height="300px" d="M26.703 0l-11.058 2.669-10.72-2.254v0.027l-2.603 1.646-2.322 1.813 1.583 3.489 1.206 9.7-1.782 2.044 0.333 3.244-1.34 4.89 4.925 4.315 10.16-2.254 4.273 2.669 7.91-0.026 15.276-1.799 4.177 1.071 4.088-3.846 0.333-3.244-1.782-2.044 1.206-9.7 1.583-3.489-2.322-1.814-2.664-6.466-18.521 1.556-0.143-2.173z"></path>
            </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;
			}