feBlend-all-modes.html | Explore in Territory

<!DOCTYPE html>
<style>
.group {
  width: 400px;
}
</style>
<body></body>
<script>
function createSvgElement(name, attributes) {
  var element = document.createElementNS('http://www.w3.org/2000/svg', name);
  for (var attrName in attributes)
    element.setAttribute(attrName, attributes[attrName]);
  return element;
}

const blendModes = [
  "normal",
  "multiply",
  "screen",
  "darken",
  "lighten",
  "overlay",
  "color-dodge",
  "color-burn",
  "hard-light",
  "soft-light",
  "difference",
  "exclusion",
  "hue",
  "saturation",
  "color",
  "luminosity"
];

[
  {a: 'rgb(255,0,0)', b: 'rgb(0,255,0)' },
  {a: 'rgb(51,64,204)', b: 'rgb(153,192,102)' },
  {a: 'rgba(51,64,204,0.5)', b: 'rgba(153,192,102,0.5)' },
].forEach(function(colors, groupNr) {
  var group = document.createElement('div');
  group.className = 'group';
  document.body.appendChild(group);

  blendModes.forEach(function(mode) {
    var filterId = 'f_' + mode + groupNr;
    var filter = createSvgElement('filter', { id: filterId, x: 0, y: 0, width: 1, height: 1 });
    filter.appendChild(createSvgElement('feFlood', { result: 'a', 'flood-color': colors.a }));
    filter.appendChild(createSvgElement('feFlood', { result: 'b', 'flood-color': colors.b }));
    filter.appendChild(createSvgElement('feBlend', { in: 'a', in2: 'b', mode: mode }));
    var svgRoot = createSvgElement('svg', { width: '50', height: '50' });
    var rect = createSvgElement('rect', { width: 50, height: 50, filter: 'url(#' + filterId + ')' });
    svgRoot.appendChild(filter);
    svgRoot.appendChild(rect);
    group.appendChild(svgRoot);
  });
});
</script>
chromium/third_party/blink/web_tests/svg/filters/feBlend-all-modes.html
