why does clipPath/mask become invisbile when clipped?

Question

I've been trying to insert this background animated inside the below text (picture it just like a clipped mask in photoshop) but every time I put it inside a clipPath or mask tag it just disappears. Can someone explain to me what am I missing?

<div id="background-animation">
  <svg preserveAspectRatio="xMidYMid slice" id="rotating_wallpaper" viewBox="10 10 80 80">
        <defs>
            <style>
            @keyframes rotate {
                0% {
                    transform: rotate(0deg);
                }

                100% {
                    transform: rotate(360deg);
                }
            }

            .out-top {
                animation: rotate 20s linear infinite;
                transform-origin: 13px 25px;
            }

            .in-top {
                animation: rotate 10s linear infinite;
                transform-origin: 13px 25px;
            }

            .out-bottom {
                animation: rotate 25s linear infinite;
                transform-origin: 84px 93px;
            }

            .in-bottom {
                animation: rotate 15s linear infinite;
                transform-origin: 84px 93px;
            }
            </style>
        </defs>
        <clipPath id="text-mask">
            <path fill="#1451B2" class="out-top" d="M37-5C25.1-14.7,5.7-19.1-9.2-10-28.5,1.8-32.7,31.1-19.8,49c15.5,21.5,52.6,22,67.2,2.3C59.4,35,53.7,8.5,37-5Z" />
            <path fill="#e1e1e1" class="in-top" d="M20.6,4.1C11.6,1.5-1.9,2.5-8,11.2-16.3,23.1-8.2,45.6,7.4,50S42.1,38.9,41,24.5C40.2,14.1,29.4,6.6,20.6,4.1Z" />
            <path fill="#000000" class="out-bottom" d="M105.9,48.6c-12.4-8.2-29.3-4.8-39.4.8-23.4,12.8-37.7,51.9-19.1,74.1s63.9,15.3,76-5.6c7.6-13.3,1.8-31.1-2.3-43.8C117.6,63.3,114.7,54.3,105.9,48.6Z" />
            <path fill="#00f5d4" class="in-bottom" d="M102,67.1c-9.6-6.1-22-3.1-29.5,2-15.4,10.7-19.6,37.5-7.6,47.8s35.9,3.9,44.5-12.5C115.5,92.6,113.9,74.6,102,67.1Z" />
        </clipPath>
    </svg>
</div>
<div id="header">
  <div id="title">
    <svg id="title_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1000" height="280" viewBox="0 0 500 140" xml:space="preserve" style="margin-left: 3%;">
            <g transform="matrix(1 0 0 1 250 250)" style="" id="DR3mGrKNoegyaDVo_VYQE">
                <text xml:space="preserve" font-family="Open Sans" font-size="131" font-style="normal" font-weight="700" letter-spacing="19.65" line-height="1" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill-rule: nonzero; opacity: 1; white-space: pre; font-family: 'bahnschrift';" clipPath="url(#text-mask)">
                    <tspan x="-249.2331910352" y="-134.0658510352">S</tspan>
                    <tspan x="-157.4308472852" y="-134.0658510352">i</tspan>
                    <tspan x="-80.9161011915" y="-134.0658510352">m</tspan>
                    <tspan id="o" x="-1.778796504" y="-134.0658510352" style="fill: #e1e1e1;&quot;">o</tspan>
                    <tspan x="98.978625371" y="-134.0658510352" style="fill: #e1e1e1;&quot;">n</tspan>
                </text>
                <style>
                @font-face {
                    font-family: "Open Sans";
                    font-weight: 700;
                }
                </style>
            </g>
            <g transform="matrix(1 0 0 1 486.1523093567 26.3623099053)" style="" id="k-kSLMrvt9hjc1cWR6Iok">
                <text xml:space="preserve" font-family="Open Sans" font-size="31" font-style="normal" font-weight="normal" line-height="1" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(20,81,178); fill-rule: nonzero; opacity: 1; white-space: pre;">
                    <tspan x="-13.0808816786" y="12.6865106077" style="fill: #e1e1e1;&quot;;">©</tspan>
                </text>
                <style>
                @font-face {
                    font-family: "Open Sans";
                    font-weight: normal;
                }
                </style>
            </g>
        </svg>
  </div>
</div>

I tried either clipPath and Mask, invert the clipPath from the animation to text to text to animation, deactivating all css.