SVG blend in p5

p5.js Libraries
1 
function setup() {
  const DIM = Math.min(window.innerWidth, window.innerHeight);

  const svg = createSVGCanvas(DIM, DIM);

  const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter");
  filter.setAttribute("id", "multiply");

  const feBlend = document.createElementNS("http://www.w3.org/2000/svg", "feBlend");
  feBlend.setAttribute("mode", "multiply");
  filter.appendChild(feBlend);
  svg.appendChild(filter);

  const square1 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  square1.setAttribute("x", 100);
  square1.setAttribute("y", 100);
  square1.setAttribute("width", 100);
  square1.setAttribute("height", 100);
  square1.setAttribute("fill", "magenta");
  square1.setAttribute("style", filter ); 
  svg.appendChild(square1);

  const square2 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  square2.setAttribute("x", 150);
  square2.setAttribute("y", 150);
  square2.setAttribute("width", 100);
  square2.setAttribute("height", 100);
  square2.setAttribute("fill", "yellow");
  square1.setAttribute("style", filter ); 

  svg.appendChild(square2);
}

function createSVGCanvas(width, height) {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("width", width);
  svg.setAttribute("height", height);
  document.body.appendChild(svg);
  return svg;
}

Does anyone know how can i get this work? Im trying to apply a blend using SVG in p5

2

You have a typo square1.setAttribute("style", filter ); for the square2 constant.
In order to apply svg filters you can replace the following lines;

  square1.setAttribute("style", filter ); 
.
.
.
  square2.setAttribute("style", filter );

to

  square1.setAttribute("style", "mix-blend-mode: multiply"); 
.
.
.
  square2.setAttribute("style", "mix-blend-mode: multiply");
1 Like