SVG filter on a css mask-composite

Question

Hello everyone,
I'm currently working on this effect (on scroll) :

I want to add this texture to the mint/green foreground:

So, the whole set-up is a composite CSS-mask and I'm playing with the mask size to achieve the effect. You can find more details of the concerned files at the end of the message.

What I tried:

• Adding an feFilter on the foreground svg, with a second rectangle on top of the first (see foreground.svg). There is a performance drop and I can't achieve what I want.

I'm open to any ideas and new ways to think the animation
Thanks for your help !

Additional infos

• Using react@18 to build the interface
• React-spring to achieve the scrolling effect

This is how I'm achieving the arche shape :

/* Arche.css */

.parent {
  position: fixed;
  top: 0;
  filter: drop-shadow(20px 5px 10px rgba(0,0,0,0.35));
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.arche {
  pointer-events: none;
  background: #E0FFF7;
  height: 100vh;
  width: 100vw;
  top: 0;
  position: absolute;
  mask-image: url("/Arche_foreground.svg"), url("/Arche.svg");
  mask-repeat: no-repeat;
  mask-composite: exclude;
  mask-position: 0 -1px, center calc(100%  + 10px);
  will-change: mask-size;
  mask-origin: content-box;
  transform: skewY(0.001deg);
}

// Arche.svg
<svg width="625" height="838" viewBox="0 0 625 838" fill="none" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="312.937" cy="307.326" rx="312" ry="307.228" fill="white" />
  <rect x="0.937256" y="309.295" width="624" height="527.802"
    fill="white" />
</svg>

// Foreground.svg
<svg width="1512" height="983" viewBox="0 0 1512 983" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id='noiseFilter'>
      <feTurbulence
        type='fractalNoise'
        baseFrequency='6.29'
        numOctaves='6'
        stitchTiles='stitch' />
    </filter>
  </defs>
  <rect filter="url(#noiseFilter)" y="0.660889" width="1512" height="982" fill="#000" />
  <rect y="0.660889" width="1512" height="982" fill="#000" />
</svg>