CSS mask clipping and overlay SVG to achieve a two effect I am currently attempting to create a two SVG overlay / masking like the image below:



I have created a SVG for the overlay. As it stands, I am trying to create two elements one for the green side and one for the blue side. 

For what I am trying to achieve, is this the best approach? If not, what is?

Is it worth creating two SVGs to achieve the overlay in the example below?

    .hero-overlay {
       position: absolute;
        top: 0;
       height: 100%;
       width: 100%;
     -webkit-mask: url("https://dl.dropboxusercontent.com/u/58412455/circle-mask.svg") no-repeat center center;
      mask: url("https://dl.dropboxusercontent.com/u/58412455/circle-mask.svg") no-repeat center center;
      clip: rect(0px, 580px, 500px, 0px); }

    .mask-left {
      background-color: red; }

.mask-right {
   -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
      transform: rotate(180deg);
      background-color: blue; }


jsFiddle
I would suggest using an inline svg to create these shapes. This will provide more browser support than using the CSS mask property (canIuse). 

Both sides are created with paths and filled with the images using the pattern element :

DEMO





* {margin: 0;padding: 0;}
body {
  background: url('http://lorempixel.com/output/nature-q-g-800-600-5.jpg');
  background-size: cover;
}
svg {
  display: block;
  width: 95vw; height: 47.5vw;
  margin: 2.5vw;
}
&lt;svg viewbox="0 0 100 50"&gt;
  &lt;defs&gt;
    &lt;pattern id="img" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="50"&gt;
      &lt;image xlink:href="http://lorempixel.com/output/abstract-h-c-490-500-4.jpg" x="0" y="0" width="49.5" height="50" /&gt;
      &lt;image xlink:href="http://lorempixel.com/output/abstract-h-c-490-500-8.jpg" x="50.5" y="0" width="49.5" height="50" /&gt;
    &lt;/pattern&gt;
  &lt;/defs&gt;
  &lt;path d="M0 0 H49.5 V15 A10.02 10.02 0 0 0 49.5 35 V50 H0z" fill="url(#img)" fill-opacity="0.8" /&gt;
  &lt;path d="M50.5 0 H100 V50 H51 V35 A10.03 10.03 0 0 0 50.5 15z" fill="url(#img)" fill-opacity="0.8" /&gt;
&lt;/svg&gt;