# Mask function with external SVG shape

**URL:** <https://discourse.processing.org/t/mask-function-with-external-svg-shape/45746>\
**Category:** Coding Questions\
**Created:** [February 12, 2025, 12:36pm UTC](https://discourse.processing.org/t/mask-function-with-external-svg-shape/45746 "2025-02-12T12:36:49Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Katsankat](https://avatars.discourse-cdn.com/v4/letter/k/9de053/32.png) [@Katsankat](https://discourse.processing.org/u/Katsankat)\
**Post date:** [February 12, 2025, 12:36pm UTC](https://discourse.processing.org/t/mask-function-with-external-svg-shape/45746/1 "2025-02-12T12:36:49Z")

</div>

Hi,

I’m using using P5.js with a node.js server.  
I’m trying to fill a SVG shape (external .svg file), with some drawing functions.  
To test it I’ve took some dots filling functions I’ve found, but it’s not the important part for now (it could be something else in the end).  
The thing is I’m trying to find a way to fill my SVG shape with this function.

So, I succeed in filling a shape a draw within the code with createGraphics function, and mask function.

```auto
let balayageTrig = false;
let cols; let rows;
let spacing = 5;
let size = [];
let balfill;
let shapeCircle;

function setup() {
    createCanvas(1920, 1080);
   
    dim = width/10;

    noStroke();
    ellipseMode(RADIUS);
    cols = 600/spacing;
    rows = 200/spacing;

//The shape I want to fill
    shapeCircle = createGraphics(800,800);
    shapeCircle.ellipse(200,200,200,200);

//The filling
    for(let i=0; i<rows; i++){
      size[i] = [];
      for(let j=0; j<cols; j++){
        size[i][j] = (rows-i)/cols*spacing;
      }
    }
    balfill = createGraphics(600, 600);
    for(let i =0; i<rows; i++){
      for(let j=0; j<cols; j++){
        balfill.fill(i/(rows-1)*800);
        balfill.ellipse(spacing+i*spacing, spacing+j*spacing, size[i][j]+2, size[i][j]+2);
      }
     }

//the mask function call to apply filling
     balfill=balfill.get();
     balfill.mask(shapeCircle);
    }
  
  

  function draw() {
    background(0);
    

     if (balayageTrig) {
      image(balfill, mouseX, mouseY);
     }
    }
     

     function mousePressed(){
       balayageTrig = true;
       }
       
       function mouseReleased(){
         balayageTrig = false;
       }

```

But when I try to do so with an external SVG I load this way :

```auto
let balayageTrig = false;
let silhouet;
let cols; let rows;
let spacing = 5;
let size = [];
let balfill;

function setup() {
    createCanvas(1920, 1080);
   
    dim = width/10;

    noStroke();
    ellipseMode(RADIUS);
    cols = 600/spacing;
    rows = 200/spacing;

//My external SVG file I want to fill
    silhouet = loadImage('/assets/sil.svg');

//Still my filling
    for(let i=0; i<rows; i++){
      size[i] = [];
      for(let j=0; j<cols; j++){
        size[i][j] = (rows-i)/cols*spacing;
      }
    }
    balfill = createGraphics(600, 600);
    for(let i =0; i<rows; i++){
      for(let j=0; j<cols; j++){
        balfill.fill(i/(rows-1)*800);
        balfill.ellipse(spacing+i*spacing, spacing+j*spacing, size[i][j]+2, size[i][j]+2);
      }
     }

//the mask that doesn't work on my SVG file
     balfill=balfill.get();
     balfill.mask(silhouet);
    }
  
  

  function draw() {
    background(0);
    

     if (balayageTrig) {
      image(balfill, mouseX, mouseY);
     }
    }
     

     function mousePressed(){
       balayageTrig = true;
       }
       
       function mouseReleased(){
         balayageTrig = false;
       }

```

It doesn’t work, but I’ve no error or any output from console.  
So I guess there’s something wrong in my approach, maybe, about the way to load my svg file (maybe find a way to load it through a createGraphics function or something like this, but I’m not skilled enough to find it myself…)

Thanks

---

<div class="post-metadata">

**Author:** ![Katsankat](https://avatars.discourse-cdn.com/v4/letter/k/9de053/32.png) [@Katsankat](https://discourse.processing.org/u/Katsankat)\
**Post date:** [February 13, 2025, 2:47pm UTC](https://discourse.processing.org/t/mask-function-with-external-svg-shape/45746/2 "2025-02-13T14:47:30Z")

</div>

Ok, solved it by deplacing my imageLoad to a preload function, instead of the setup function and it works.  
So, I don’t understand why this is necessary, but this work, so it’s ok.