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 p

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>