Как использовать режим смешивания для изменения цвета текста на анимированном фоне ⇐ CSS

[Гость]

Я хочу использовать режим смешивания-наложения, чтобы изменить цвет текста на движущемся фоновом SVG.

Моя проблема в том, что я не могу правильно подобрать цвета. Мне нужен красный текст на желтом фоне и желтый текст на красном фоне, но вместо этого я получаю зеленый текст. Изображение проблемы

Я попробовал много всего и нашел ручку, с помощью которой можно увидеть проблему.

Вот моя ручка: https://codepen.io/nicopoggenburg/pen/xxmjmNQ

| | Изобретите
колесо @keyframes moveWave { 0% { преобразование: TranslateX (0); } 100% { преобразование: TranslateX (-50%); } } :корень { --светло-желтого; --темно-красный; } .коробка { положение: относительное; переполнение: скрыто; фон: вар (--свет); цвет: вар (--свет); отступ: 20 пикселей 0; } .svgs { дисплей: гибкий; ширина: 200%; анимация: moveWave 5s линейная бесконечность; высота: 100%; дисплей: гибкий; выровнять-элементы: по центру; } .svg-контейнер { ширина: 100%; } .svg { ширина: 100%; высота: авто; } .svg-1 { } .svg-2 { } .текст { позиция: абсолютная; верх: 50%; осталось: 50%; ширина: 80%; трансформировать: транслировать(-50%, -50%); выравнивание текста: по центру; размер шрифта: 90 пикселей; преобразование текста: верхний регистр; маржа: 0; режим смешивания: разница; вес шрифта: 800; } У кого-нибудь есть хорошее решение этой проблемы?

Я благодарен за каждую подсказку!