JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">ON IE9: <li>Drag the glasses around: the pattern isn't fixed but moves with the glass.</li>
<li>Select this text and extend the selection to the image below...</li>
<li>The background in the glasses synchronizes :)</li>


    <div id="playmask" class="nopolar" ></div>

</div>



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

CSS

#container{
    position:relative
}
.nopolar {
    height:540px;
    width:720px;
    position:absolute;
    background: url(http://www.fotoshack.us/fotos/11983536599_97943820_over.jpg);
}

JavaScript

/*
 * Author: Paolo Stefan 
 * http://paolostefan.it
 */

function setUp(){
    
    // Create Raphael canvas
    var rsr = Raphael("playmask", 720,540);
   // console.log( "Raphael.type = %s", Raphael.type );

    // Lenses vector
    var path_f = rsr.path("M0,75.093c0.025-40.578,17.713-55.016,36.169-62.846S101.484-0.012,121.933,0 c39.506,0.021,44.3,11.438,44.29,30.633c-0.002,3.535-0.778,29.334-16.75,60.396c-10.586,20.585-29.133,61.907-78.329,61.88 C30.554,152.886-0.022,115.669,0,75.093 M200.519,30.656c0.011-19.193,4.813-30.604,44.323-30.584 c20.449,0.015,67.303,4.498,85.749,12.349c18.447,7.85,36.119,22.306,36.096,62.885c-0.024,40.578-30.645,77.759-71.233,77.735 c-49.197-0.028-67.696-41.368-78.258-61.97C201.262,59.994,200.519,34.192,200.519,30.656");

    path_f.attr({"stroke-width":0, fill:'url(http://www.fotoshack.us/fotos/58480536599_97943820.jpg)','stroke-opacity': '0'} ).data('id', 'path_f');

    // Glass frame vector
    var path_g = rsr.path("M2.419,75.585C2.443,35.98,19.708,21.888,37.72,14.245c18.014-7.642,63.75-11.965,83.709-11.953 c38.56,0.021,43.239,11.164,43.229,29.9c-0.002,3.45-0.76,28.632-16.349,58.949c-10.332,20.092-28.434,60.424-76.452,60.396 C32.24,151.515,2.396,115.191,2.419,75.585 M203.013,32.214c0.011-18.734,4.699-29.871,43.262-29.851 c19.96,0.013,65.691,4.39,83.695,12.052c18.005,7.662,35.254,21.772,35.231,61.379c-0.023,39.606-29.909,75.896-69.526,75.872 c-48.02-0.027-66.076-40.377-76.384-60.484C203.739,60.849,203.013,35.665,203.013,32.214 M-14.615,60.176 c0,0.814,0.563,1.756,1.628,2.069c1.066,0.313,10.073,1.692,10.069,9.59c0,0.01,0.001,0.016,0.002,0.024 c-0.035,1.224-0.054,2.462-0.054,3.724c-0.014,20.579,7.715,41.131,21.204,56.381c14.218,16.077,33.264,24.935,53.623,24.947 c49.051,0.027,70.369-39.43,81.464-60.334c14.788-27.871,16.599-43.236,22.484-43.232c1.483,0.001,3.536,0.002,5.44,0.005 c0,0,2.412,0,5.128,0.002c1.902,0.001,3.955,0.001,5.438,0.002c5.886,0.005,7.678,15.371,22.435,43.258...