Podmiana/zamiana koloru tekstu

Question

Cześć, 

próbuje uzyskać taki efekt 

na chwilę obecną nie wiem w jaki sposób zmienić tekst na czarny jeśli mój cursor zrobiony za pomocą kształtu svg najedzie na biały tekst 

o to mój css

       .hero {
            position: relative;
            width: 100%;
            height: 100vh;
        }

        .bg {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
            background-image: url(bg.png);
        }

        .text{
            max-width: 700px;
            width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 3;
        }

        .text-front,
        .text-back {
            position: absolute;
            top: 0;
            left: 0;
        }

        .text-front {
            color: #fff;
            z-index: 11;
        }

        .text-back {
            color: #000;
        }


        .text h1 {
            font-size: 80px;
            line-height: 80px;
            font-weight: 700;
            text-transform: uppercase;
        }


        #cursorText {
            position: absolute;
            pointer-events: none;
            z-index: 2;
            transition: transform 0.2s;
            transform: translate(-50%, -50%);
            display: none;
        }

        #cursorText svg {
            fill: #f0cd4f;
            height: 200px;
            width: 400px;
            z-index: 2;
        }

        .text:hover ~ #cursorText {
            display: block;
        }

i kod html 

    <div class="hero">
        <div class="bg"></div>
        <div class="text">
            <h1 class="text-front">Lorem ipsum dolor sit amet.</h1>
            <h1 class="text-back">Lorem ipsum dolor sit amet.</h1>
        </div>
        <div id="cursorText">
            <svg width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 1440 800">
                <defs>
                    <linearGradient id="MyGradient" gradientTransform="rotate(45)">
                        <stop offset="20%" stop-color="#3654AF"></stop>
                        <stop offset="95%" stop-color="#26C3DA"></stop>
                    </linearGradient>
                </defs>
                <path class="scene"
                    d="M 1066,436 C 1051,543.8 974.4262634272457,659.2842383170118 873.6,700.1 758.2350179029943,747.0179032777893 614.0916217173396,699.2856275256364 506.18617368206486,637.2223926971395 435.25310927732767,597.315779816192 364.57258986028563,536.9412545908534 345.89477632767716,457.9776435692683 324.18096814294597,357.1893101591984 346.9089788387005,223.32879934833895 427.4585935790103,158.3819086256666 563.9342655168177,48.47374382603591 805.9986470577833,35.37292480742429 952.4,131.7 1043.6284050220468,191.13443548015792 1081,328.8 1066,436 Z "
                    pathdata:id="M 1041,450.4 C 1023,547.7 992.8,667.7 905.7,714.5 793.1,775 639,728.7 524.5,671.8 453.3,636.4 382.2,575.4 360.2,499 329.7,393 344.6,249.2 426,174.9 568.6,44.66 851.1,-8.71 1002,111.8 1091,182.7 1061,338.6 1041,450.4 Z;M 1066,436 C 1051,543.8 976.5,664.5 873.6,700.1 761,739.1 636.4,655.8 529.5,603.1 441.6,559.8 325.8,520.1 293.8,427.5 263.1,338.4 294.5,213.4 368.2,154.8 520.7,33.48 790.1,23.76 952.4,131.7 1043,191.7 1081,328.8 1066,436 Z;M 1066,436 C 1053,531.1 930.7,580.1 842.2,617.2 734,662.7 598.4,707.8 492.4,657.4 427.6,626.6 387.5,546.9 376.7,476 360.3,368.3 376.9,227.9 462.5,160.5 567.6,77.69 749.9,37.5 863.8,148.8 947.6,230.7 1082,320.1 1066,436 Z">
                </path>
            </svg>
        </div>
    </div>

Czy da się taki efekt w ogóle uzyskać?  

Answer 1

Chyba jest to możliwe, ale czy w takiej formie to już nie wiem. Zobacz przykłady użycia

mix-blend-mode