Using SVG for additive color mixing (additive blending)

Question

Coming from a graphic design background I know how to cheat to create an effect of additive color. The same basic solution is proposed in another post on here.

The post above refers to transparent .png files but the concept is the same. The basic effect I'd like to create is like the one pictured here.

I'd love to do it in SVG so that it can scale and so that when I am talking about a given topic (let's just say the topic is 'green') I can enlarge that portion of the graphic and the overlapping areas would still display correctly.

These posts seem to get pretty close:

• Algorithm for Additive Color Mixing for RGB Values
• Question about "Additive blending" and "Hue replacement"

But none of the above deal with SVG so let me give it a whirl.

Answer 1

Right now you can do this with SVG filters. Since your interest lies in mixing colors, you might be interested in researching the following filter primitives: feBlend, feComposite, feColorMatrix and feComponentTransfer.

If you want to learn the easy way (Inkscape) see this blogpost. I can also recommend reading the Inkscape book and in particular how to do custom filters. Here's one page showing feBlend with similar results as in your basic effect example.

Update: here's the relevant svg file from the inkscape book, it should look like the image below in browsers that support svg filters (and the BackgroundImage filter input, note that Gecko doesn't support BackgroundImage and enable-background).

Answer 2

From https://drafts.fxtf.org/compositing-1/#mix-blend-mode, Example 2:

circle { mix-blend-mode: screen; }

<svg>
    <circle cx="40" cy="40" r="40" fill="red"/>
    <circle cx="80" cy="40" r="40" fill="lime"/>
    <circle cx="60" cy="80" r="40" fill="blue"/>
</svg>

Answer 3

This version replaces an earlier version that wasn't truly cross-browser. I realized that I didn't need separate shapes for the various circles, I could clone, reposition and recolor the original shape within the filter.

<svg x="0px" y="0px" width="600px" height="600px" viewbox="0 0 600 600">
    
    <defs>
    <filter id="B4" x="-150%" width="400%" y="-150%" height="400%">
      <feOffset in="SourceGraphic" result="pre-red" dx="-70" dy="-120"/>
      <feColorMatrix in="pre-red" type="matrix" result="red" values="0 0 0 0 1
                                                       0 0 0 0 0 
                                                       0 0 0 0 0 
                                                       0 0 0 1 0"/>

      <feOffset in="SourceGraphic" result="pre-blue" dx="70" dy="-120"/>
      <feColorMatrix in="pre-blue" type="matrix" result="blue" values="0 0 0 0 0
                                                       0 0 0 0 0 
                                                       0 0 0 0 1 
                                                       0 0 0 1 0"/> 
      <feBlend mode="screen" in="red" in2="blue" result="main"/>
      <feBlend mode="screen" in="main" in2="SourceGraphic"/>
    </filter>
    </defs>
    
       <circle filter="url(#B4)" cx="200" cy="250" r="100"  fill="#00FF00"  />
    
    </svg>