# SVG blend in p5

**URL:** <https://discourse.processing.org/t/svg-blend-in-p5/44143>\
**Category:** Libraries\
**Created:** [March 22, 2024, 9:02pm UTC](https://discourse.processing.org/t/svg-blend-in-p5/44143 "2024-03-22T21:02:47Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![vjjv](https://avatars.discourse-cdn.com/v4/letter/v/df705f/32.png) [@vjjv](https://discourse.processing.org/u/vjjv)\
**Post date:** [March 22, 2024, 9:02pm UTC](https://discourse.processing.org/t/svg-blend-in-p5/44143/1 "2024-03-22T21:02:47Z")

</div>

```auto
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

---

<div class="post-metadata">

**Author:** ![alptugan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alptugan/32/19406_2.png) [@alptugan](https://discourse.processing.org/u/alptugan)\
**Post date:** [March 23, 2024, 8:00pm UTC](https://discourse.processing.org/t/svg-blend-in-p5/44143/2 "2024-03-23T20:00:13Z")

</div>

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

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

```

to

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

```