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;
}











StackExchange Code Review Q#86861, answer score: 2