blend mode for shapes in css

Question

Let say I have some circles:

<circle class="first">&nbsp;</circle>
<circle class="second">&nbsp;</circle>

with the following css:

circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background: #000;
}

How can I achieve the following effect when they overlap?

preferably in css, or with the canvas element.

Answer 1

One possible way is to use the mix-blend-mode property, which seems to be mostly not support by now.

Here is an example that works with Chrome and Firefox (thanks to @vals)

body
{
  background-color: white;
}

.circle
{
  border-radius: 100px;
  background-color: white;
  width: 100px;
  height: 100px;
  float: left;
  mix-blend-mode: exclusion;
}

.circle:not(:first-child)
{
  margin-left: -20px;
}

<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

Like @vals pointed out you need to set a background-color for the body (or parent element) in order for this to work in Firefox.

Here are two nice references on this topic:

1. https://css-tricks.com/basics-css-blend-modes/

Taken from this source: http://codepen.io/chriscoyier/pen/tCykv

2. https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Answer 2

SVG

This effect can be done quite easy with a single path in <svg>

The fill-rule would be what your looking for if shapes overlapping then the effect you get is this each other shape color.

<svg width="500px" height="200px" viewBox="0 0 100 500">
  <path fill-rule="evenodd" d="
        M 50, 100
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0
        Z
        M 150, 100
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0
        Z
        M 250, 100
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0
        Z
        M 350, 100
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0
        Z
        M 450, 100
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0
        Z" />
</svg>