Clip Path

HTML

<div></div>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" width="100%" height="100%" xml:space="preserve">
  <defs>
    <clipPath id="clipping">
      <path d="M 71.64,15.68 C 90.03,12.91 263.11,-0.14 400.41,-0.14 537.71,-0.14 691.65,10.3 728.49,15.68 765.33,21.07 783.58,39.6 787.84,75.03 792.1,110.46 799.71,193.2 799.71,299.78 799.71,406.37 791.66,489.9 787.84,524.62 784.01,559.35 765.15,578.73 728.49,583.97 691.83,589.21 537.71,599.8 400.41,599.8 263.11,599.8 108.54,589.17 71.64,583.97 34.75,578.77 16.13,559.48 12.29,524.62 8.46,489.76 0.42,406.37 0.42,299.78 0.42,193.2 10.84,85.56 12.29,75.03 17.11,40.06 34.27,21.32 71.64,15.68 Z M 71.64,15.68" />
    </clipPath>
  </defs>
</svg>

SCSS

body { background-color: gray; }
div {
    width: 200px;
    height: 1200px;
    background-color: rgba(34,28,184,.7);
    -webkit-clip-path: url(#clipping);
    //-webkit-mask: url(#clipping);
    //-webkit-clip-path: url(resources.svg#c1);
}
svg {width: 200px; height: 200px;}

JavaScript

// http://www.html5rocks.com/en/tutorials/masking/adobe/