D3js SVG Overlap: Custom Colors with Many SVGs of

Question

I need to accomplish the color "blending" shown in the image -- for areas where there are 2 shapes overlapping it needs to display as a particular color (orange here), and a separate color for 3 overlap (red here).

I need something very dynamic and easy to extend to more overlapping shapes. There may be up to 20 shapes that overlap in various areas. Shapes are random, with no predictable form.

I am drawing the shapes as SVG polygons using D3js.

I have tried the css mix-blend-mode but it is not useful for my needs. I have been researching this for two days with no luck...

Answer 1

if mix-blend-mode is not useful for your needs ( maybe you don't like the colors or you didn't applied isolation: isolate; to the group ) you may try using clipPath.

Since you don't publish your code I can't work on your example. The code that comes next may give you some ideas.

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="360px" width="360px" viewBox="-18 -12.5 36 36">
<title>Venn Diagram</title>
<style>
.left { fill: #1dd0b8; }
.right { fill: #47ef96; }
.circle{ fill: #b147ef; }
.outlines {
fill: none;
stroke: black;
}
</style>
<defs>
<circle id="c" r="11.5" />
<use id="left" xlink:href="#c" x="-6"/>
<use id="right" xlink:href="#c" x="6"/>
<use id="circle" xlink:href="#c" y="10"/> 

<clipPath id="clip-left">
  <use xlink:href="#c" x="-6" />
</clipPath>
  
<clipPath id="clip-right">
  <use xlink:href="#c" x="+6" />
</clipPath> 
  
<clipPath id="clip-both" clip-path="url(#clip-left)">
<defs>a clipPath element can have a clip-path
applied to it.</defs>
<use xlink:href="#c" x="6" />
</clipPath> 
</defs>
  
<use xlink:href="#left" class="left" />
<use xlink:href="#right" class="right" />
<use xlink:href="#circle" class="circle" />

<g clip-path="url(#clip-left)">
<use xlink:href="#c" x="+6" fill="#e89f0c" />
</g>
<g clip-path="url(#clip-right)">
<use xlink:href="#c" x="0" y="10" fill="#e89f0c" />
</g> 
<g clip-path="url(#clip-left)">
<use xlink:href="#c" y="10" fill="yellow" />
</g> 
  
<g clip-path="url(#clip-both)">
<use xlink:href="#c" y="10" fill="red" />
</g>
  
    
<g class="outlines">
<use xlink:href="#left" />
<use xlink:href="#right" />
<use xlink:href="#circle" />
</g>
</svg>

The example above is heavily inspired by "clipping a clipPath" from Using SVG with CSS3 and HTML5: Vector Graphics for Web Design