求助：为CSS mask-composite实现的滚动动画前景添加纹理

大家好，我正在实现一个滚动触发的动画效果（效果演示：）。我希望为薄荷绿的前景添加如下纹理：。

当前我通过复合CSS mask，调整mask尺寸来实现该动画，相关文件细节见下文。

已尝试的方案 #

• 在前景SVG中添加feFilter，并在第一个矩形上方叠加第二个矩形（参考foreground.svg），但出现性能下降且未达到预期效果。

我欢迎任何思路与新的动画实现方式，感谢帮助！

补充信息 #

• 使用react@18构建界面
• 借助React-spring实现滚动效果

实现拱形形状的代码 #

/* 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>

内容的提问来源于stack exchange，提问作者loïc Torres