12

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:

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

Improve this question
1
  • I just logged in and saw the answer below, skimming it it looks like exactly what I was thinking of but...I created a graphic in Adobe Illustrator but realized regular transparency would give me additive color so I simulated with fully opaque colors; I don't think that will help...would a 3 layer (3 overlapping rings) graphic with regular transparency posted to a fiddle work?
    – adam-asdf
    Commented Dec 21, 2012 at 0:38

3 Answers 3

Reset to default
13

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). feBlend variations

Improve this answer
5
  • I had never even heard of those filters as part of the standard! Upon first glance I thought 'fe' might be some sort of vendor prefix, boy was I wrong. Thanks.
    – adam-asdf
    Commented Dec 21, 2012 at 0:46
  • 1
    The problem with these examples is that they rely on "enable-background" - which doesn't work on either webkit or mozilla right now (don't know about opera). If you're going to do this using filters, I think you have to pull in images (or create color circles using lighting effects)
    – Michael Mullany
    Commented Dec 21, 2012 at 18:41
  • The examples perhaps use enable-background, but it's possible to avoid using that. Yes, Opera has had support for enable-background for a long time. IIRC IE10 also supports enable-background.
    – Erik Dahlström
    Commented Dec 28, 2012 at 10:38
  • FYI - I've filed a bug against Chromium for enable-background support. If you have an example without enable-background, I'd love to see it. I haven't been able to figure this out myself
    – Michael Mullany
    Commented Dec 28, 2012 at 19:24
  • It's possible to use <feImage> that references some particular elements in the svg as a partial workaround (however, note that Firefox doesn't support that). This way you can composite/blend two or more arbitrary elements.
    – Erik Dahlström
    Commented Dec 29, 2012 at 15:32
5

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>

Improve this answer
2
  • Not working on Mozilla and Webkit is definitely a deal breaker. Could you point me in the direction of more info (or explain a bit more) relating to "in filter" effects (the first example)? Looking at it, I feel like I basically get it but I don't see anything that would create the yellow or the cyan (I assume 'final' is white) nor do I see a black stroke (is that because there is no width assigned to the stroke?). Thanks.
    – adam-asdf
    Commented Dec 21, 2012 at 22:11
  • I saw the 'enable-background' references and the notes, I'll go back and read them more carefully though, thanks.
    – adam-asdf
    Commented Dec 23, 2012 at 8:23
3

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>
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.