Substract SVG HSLA colours on intersection

Question

I'm trying to make a kind of "heatmap". When two svg elements with color and opacity intersect, they get darker or unexpected colour on the intersection, i would like to substract those colours in HSLA scale so for example if i had a green ellipse and a yellow ellipse, the intersection would probably be orange or close to red, think of it as a kind of heatmap that when two colours intersect, they get hotter.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
    <ellipse cx="200" cy="200" rx="100" ry="100" id="ellipse1" fill="yellow" fill-opacity="0.5" />
    <ellipse cx="250" cy="200" rx="100" ry="100" id="ellipse2" fill="green" fill-opacity="0.5" />
</svg>

perhaps experiment with https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode perhaps one of the modes is suitable. — Robert Longson, Jul 29 '21 at 08:30

enxaneta · Accepted Answer · 2021-07-29T08:40:14.570

In the case you need a custom color for the fill I would use clipPath. You can reuse the first shape clipped by the second shape.

Please observe that both shapes are in the <defs> with no fill or oppacity. You then use those shapes with an <use> element with the desired fill.

You also use one of those shapes to create the <clipPath>.

Finally you are giving the clipped path the desired fill, oppacity etc...

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <defs>
    <ellipse cx="200" cy="200" rx="100" ry="100" id="ellipse1" />
    <ellipse cx="250" cy="200" rx="100" ry="100" id="ellipse2" fill="green" fill-opacity="0.5" />
    <clipPath id="clip">
      <use xlink:href="#ellipse2" />
    </clipPath>
  </defs>
  <use xlink:href="#ellipse1" fill="yellow" fill-opacity="0.5" />
  <use xlink:href="#ellipse2" fill="green" fill-opacity="0.5" />
  <use xlink:href="#ellipse1" clip-path="url(#clip)" fill="red" />
</svg>

Substract SVG HSLA colours on intersection

1 Answers1