search

w3c / fxtf-drafts

Mirror of https://hg.fxtf.org/drafts
https://drafts.fxtf.org/
Other
68 stars 49 forks source link

[compositing-2] Example 2 in section 3.4 for mix-blend-mode is misleading #549

Open Overruler opened 4 months ago

Overruler commented 4 months ago

Section 3.4 mix-blend-mode Example 2 uses screen blending mode with colors that give the impression of additive blending. However, the 3 colors "red", "lime" and "blue" are only a singular special case for which additive and screen blending produce the same result; this is not the case in general.

To avoid giving this false impression, rather than "red", "lime" and "blue", the three colors could be changed to "fuchsia", "green" and "green":

<svg style="background-color: black;">
  <style>circle { mix-blend-mode: screen; }</style>
  <circle cx="40" cy="40" r="40" fill="fuchsia"></circle>
  <circle cx="80" cy="40" r="40" fill="green"></circle>
  <circle cx="60" cy="80" r="40" fill="green"></circle>
</svg>

Under additive blending these colors would also sum to produce white, but under screen blending mode they don't: Screenshot (58)