Search code examples
javascripthtmlcsssvgsvg-filters

SVG: Showing average color for overlapping shapes

This is different from Using SVG for additive color mixing (additive blending), which is talking specifically about additive blending. For that it's as easy as setting mix-blend-mode: screen. As far as I'm aware, there is no mix-blend-mode to average colors. The answer to this probably does involve using Filters, as mentioned in an answer there; but how is the question?

I'm making an app where you view some SVG data. The SVG has layers that are different colors which contain various shapes/paths. The colors of the layers and the shapes/paths are input and vary.

An example SVG might look like:

<svg>
  <g fill="#ff0000" id="layer1">
    <path d="M0,50 a50 50 0 1 1 100,0 a50 50 0 1 1 -100,0"/>
  </g>
  <g fill="#00ff00" id="layer2">
    <path d="M25,50 a50 50 0 1 1 100,0 a50 50 0 1 1 -100,0"/>
  </g>
  <g fill="#0000ff" id="layer3">
    <path d="M12.5,75 a50 50 0 1 1 100,0 a50 50 0 1 1 -100,0"/>
  </g>
  <!-- more layers... -->
</svg>

Which would look like the first set of circles in the picture below (Normal).

What I want is to be able to toggle a 'transparent mode', so you can see the shapes that are hidden underneath other shapes. So if two shapes overlap in an area, the color of that area should be the average of the two layer colors. And if there is just one shape not overlapping anything, the color should be just the color of the layer. By average I mean if there is a color "#ff0000" on top of color "#00ff00", the resulting color should be "#7f7f00".

I can get a weak transparency effect (middle picture) by drawing everything twice: draw everything once at full opacity, then draw it again on top at half opacity. But the effect is very weak and not really showing the true 'mix' of the colors.

This picture hopefully explains the effect I want (the set on the right):

Example

I don't mind using something hacky to achieve this as long as the end result looks right.

Solution

  • If you are up to hacky things you can pair two mix-blend-mode exclusion & multiply

    path {
  mix-blend-mode: exclusion;
}

.multiply path {
  opacity: 0.5;
  mix-blend-mode: multiply;
}
    <svg>
  <g fill="#ff0000" id="layer1">
    <path d="M0,50 a50 50 0 1 1 100,0 a50 50 0 1 1 -100,0"/>
  </g>
  <g fill="#00ff00" id="layer2">
    <path d="M25,50 a50 50 0 1 1 100,0 a50 50 0 1 1 -100,0"/>
  </g>
  <g fill="#0000ff" id="layer3">
    <path d="M12.5,75 a50 50 0 1 1 100,0 a50 50 0 1 1 -100,0"/>
  </g>
<g class="multiply">
  <g fill="#ff0000">
    <path d="M0,50 a50 50 0 1 1 100,0 a50 50 0 1 1 -100,0"/>
  </g>
  <g fill="#00ff00">
    <path d="M25,50 a50 50 0 1 1 100,0 a50 50 0 1 1 -100,0"/>
  </g>
  <g fill="#0000ff">
    <path d="M12.5,75 a50 50 0 1 1 100,0 a50 50 0 1 1 -100,0"/>
  </g>
</g>
</svg>