5
\$\begingroup\$

I am currently attempting to create a two SVG overlay / masking like the image below:

See 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

\$\endgroup\$
2
\$\begingroup\$

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

images clipped with svg

* {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;
}
<svg viewbox="0 0 100 50">
  <defs>
    <pattern id="img" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="50">
      <image xlink:href="http://lorempixel.com/output/abstract-h-c-490-500-4.jpg" x="0" y="0" width="49.5" height="50" />
      <image xlink:href="http://lorempixel.com/output/abstract-h-c-490-500-8.jpg" x="50.5" y="0" width="49.5" height="50" />
    </pattern>
  </defs>
  <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" />
  <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" />
</svg>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.