Как маскировать плитки SVG Pattern, которые пересекаются с текстом (React/next.js) ⇐ CSS

[Anonymous]

Я строю раздел героев (hero.tsx) в next.js с повторяющимся фонами SVG-рисунка (Pattern-tile.svg) в форме «ξ». Mayout (hero.layout.module.css) включает в себя большой текст «My Artistme» (hero.text.module.css) с белыми фоновыми группами за каждым словом (.bgmy, .bgartist, .bgname). Я хотел бы автоматически скрыть/маскировать любые плитки с шаблонами, которые пересекаются с этими белыми фонами: если плитка касается белой полосы, плитка ξ должна исчезнуть (см. Скриншот).

• Содержание файла:

.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 (



{/* Style for "MY" */}

My {/* Text "MY" */}
{/* White background for "MY" */}

{/* Style for "ARTIST" */}

Artist {/* Text "ARTIST" */}
{/* White background for "ARTIST" */}
{/* Robot Image */}


{/* Desktop (> 1024px) */}

{/* Mobile



{/* Style for "NAME" */}

NAME {/* Text "NAME" */}
{/* White background for "NAME" */}




);
}
< /code>
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);
}
}
< /code>
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;
}
}
< /code>
pattern-tile.svg:














< /code>
Screenshot Screenshot < /p>
Честно говоря, я понятия не имею, как справиться с этим поведением ... не могли бы вы мне помочь? < /p>
Большое спасибо за вашу помощь!>

Подробнее здесь: https://stackoverflow.com/questions/797 ... ct-next-js