bad pixel bad pixel - 5 months ago 8
CSS Question

How to get "mix-blend-mode" to work in this code

I am trying to modify a fork from codepen to blend three animated circles (cyan, magenta, yellow) using

mix-blend-mode: multiply;
to achieve this result where the overlay of all three colours is black.

As you can see on the codepen link, the blend mode does not work. Upon further research, I came across that
mix-blend-mode
needs to be within
<svg>
in order for it to work. As I am not a coder -I just understand enough to get myself into trouble- can you please take a look at the code and point out to me why the blend mode does not work as expected?

I have commented out the animation as I was trying to get the blending to work before fine tuning the animation.

Answer

No, mix-blend-mode does not need to be on the svg element, you can use it on all HTML elements. Source

To achieve the desired result in your specific case, add mix-blend-mode: multiply; to .quadrant in the CSS section.

Comments