How to mask SVG pattern tiles that intersect with text (React/Next.js)

I'm building a hero section (Hero.tsx) in Next.js with a repeating SVG pattern background (pattern-tile.svg) in the form of a 'Ξ'. The layout (hero.layout.module.css) includes large text "MY ARTIST NAME" (hero.text.module.css) with white background bands behind each word (.bgMy, .bgArtist, .bgName). I would like to automatically hide/mask any pattern tiles that intersect with these white background bands: if a tile touches a white band, the tile Ξ should disappear (see screenshot).

• File content:

Hero.tsx:

import Layout from "./hero.layout.module.css";
import Text from "./hero.text.module.css";
import Picture from "./hero.picture.module.css";

export default function HeroSection() {
    return (
        <section className={Layout.background}>
            <div className={Text.textContainer}>
                <h1 className={Text.textStyling}>
                    {/* Style for "MY" */}
                    <span className={Text.containerMy}>
                        <span className={Text.styleMy}>My</span> {/* Text "MY" */}
                        <span className={Text.bgMy}></span> {/* White background for "MY" */}
                    </span>
                    {/* Style for "ARTIST" */}
                    <span className={Text.containerArtist}>
                        <span className={Text.styleArtist}>Artist</span> {/* Text "ARTIST" */}
                        <span className={Text.bgArtist}></span> {/* White background for "ARTIST" */}
                        {/* Robot Image */}
                        <span className={Picture.imageContainer}>
                            <picture>
                                {/* Desktop (> 1024px) */}
                                <source
                                    media="(min-width: 1025px)"
                                    srcSet="/images/artist-image.png"
                                />
                                {/* Mobile <= 1024px */}
                                <img
                                    src="/images/artist-image.png"
                                    alt="My Music Artist"
                                    className={Picture.heroImage}
                                />
                            </picture>
                        </span>
                    </span>
                    {/* Style for "NAME" */}
                    <span className={Text.containerName}>
                        <span className={Text.styleName}>NAME</span> {/* Text "NAME" */}
                        <span className={Text.bgName}></span> {/* White background for "NAME" */}
                    </span>
                </h1>
            </div>
        </section>
    );
}

hero.text.module.css:

/* Layout for the text "MY ARTIST NAME" */
.textContainer {
    display: flex;
    width: 100vw;
    height: fit-content;
    transform: translateY(35px);
}

.textStyling {
    font-size: min(16.4vw, 280px);
    font-weight: 400;
    line-height: 0.8;
    text-transform: uppercase;
}

/* Style for "MY ARTIST NAME" */
.containerMy, .containerArtist, .containerName {
    display: flex;
    position: relative;
    width: fit-content;
    height: fit-content;
}

.containerArtist {
    position: static;
}

.styleMy, .styleArtist, .styleName {
    position: relative;
    letter-spacing: -0.08em;
    z-index: 3;
}

.styleArtist {
    letter-spacing: 0.26em;
}

.bgMy, .bgArtist, .bgName {
    position: absolute;
    background: #EFEFEF;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.bgArtist {
    height: min(11.5vw, 280px);
}

/* Responsive text */
@media (min-width: 581px) and (max-width: 1024px) {
    .textContainer {
        padding-top: 18px;
        transform: none;
    }
}

@media (max-width: 580px) {
    .textContainer {
        padding-top: 18px;
        transform: none;
    }

    .textStyling {
        font-size: max(100px, 31vw);
    }
}

hero.layout.module.css:

.background {
    /* Desktop : Layout at the bottom left */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    min-height: 100vh;
    width: 100%;
    padding-top: 100px;
    background: #EFEFEF;

    /* Background pattern tile 'Ξ' */
    background-image: url("/images/pattern-tile.svg"), url("/images/pattern-tile.svg");
    background-repeat: repeat, repeat;
    background-size: 350px 350px, 350px 350px;
    background-position: 0 0, 175px 175px;
}

/* Mobile */
@media (max-width: 1024px) {
    .background {
        /* Mobile : Layout at the top */
        align-items: flex-start;
        justify-content: flex-start;

        padding-top: clamp(80px, 15vw, 115px);
        padding-bottom: 120px;
    }
}

pattern-tile.svg:

<!-- /public/images/pattern-tile.svg -->
<svg xmlns="http://www.w3.org/2000/svg"
     width="220" height="220" viewBox="-121 -123 242 246">

    <!-- Déclare le symbole du E -->
    <symbol id="pattern" viewBox="0 0 242 246">
        <path d="M145.676 29.9214L24.7557 131.385L0.185167 102.103L121.105 0.639319L145.676 29.9214ZM193.58 87.0108L72.6595 188.475L48.2657 159.403L169.186 57.9395L193.58 87.0108ZM241.483 144.1L120.563 245.564L96.1694 216.493L217.09 115.029L241.483 144.1Z"
              fill="black"/>
    </symbol>

    <!-- Size -->
    <g transform="scale(0.35)">
        <!-- Centre le E en fonction de son viewBox -->
        <use href="#pattern" x="-121" y="-123" />
    </g>
</svg>

Hero Section screenshot

Honestly, I have no idea how to handle this behavior... Could you please help me?

Thank you so much for your help!

I asked Chat GPT / Claude AI to help me, but I have no idea how to handle this problem, and the code they provided me is incomprehensible.