Animate mask-image property

I have the following mask-image as a theme toggle. When it is light, it creates a clip-path, and when it is dark, it changes the mask-image to a black hole, adjusting the mask-position and size to emulates a black hole behavior with the background:

<div className="alternate-gradient-bg">
    <svg xmlns="http://www.w3.org/2000/svg">
        <defs>
            <filter id="goo">
              <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
              <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8" result="goo" />
              <feBlend in="SourceGraphic" in2="goo" />
            </filter>
        </defs>
    </svg>
    <div className="alternate-gradients-container">
      <div className="alternate-g1"></div>
      <div className="alternate-g2"></div>
      <div className="alternate-g3"></div>
      <div className="alternate-g4"></div>
      <div className="alternate-g5"></div>
      <div className="alternate-interactive-container">
        <div className="alternate-interactive" ref={interBubbleRefAlternate}></div>
      </div>
    </div>
</div>
  <style>
  .alternate-gradient-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    background: linear-gradient(-40deg, var(--alternate-color-bg1), var(--alternate-color-bg2));
    top: 0;
    left: 0;
    z-index: -2;
    clip-path: circle(4.4% at 95.25% 90.5%);
  }
  .light .alternate-gradient-bg{
    clip-path: circle(150% at 95.25% 90.5%);
    mask-image: none;
    mask-composite: exclude;
    mask-repeat: no-repeat;
    mask-size: 4500px;
    mask-position: bottom -2180px right -2180px;
    transition: 1s ease-out;
  }
  .dark .alternate-gradient-bg{
    clip-path: circle(4.4% at 95.25% 90.5%);
    mask-image: url("/BlackHole.svg");
    mask-composite: exclude;
    mask-repeat: no-repeat;
    mask-size: 100px;
    mask-position: bottom 20px right 20px;
    transition: 1s ease-out;
  }
  </style>
  //BlackHole.svg
  <svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
    <path d="m962.98 370.77c-56.961-219.76-321.69-331.88-541.46-274.92 184.24 20.664 298.97 86.176 355.24 194.2-50.43-55.348-116.43-97.625-193.78-119.01-218.79-60.547-448.26 112.65-508.82 331.46 120.71-163.71 246.33-227.99 381.5-206.97-20.238 2.7227-40.309 6.9297-59.996 12.629l0.042969 0.070312c-72.199 22.168-139.12 64.332-191.65 125.93-147.34 172.7-87.352 453.87 85.367 601.23-77.938-142.97-96.805-261.85-62.164-361.88-6.5898 50.629-3.8125 103.31 9.7656 155.71 56.977 219.76 321.71 331.88 541.48 274.92-184.21-20.652-298.95-86.133-355.21-194.13 50.441 55.289 116.43 97.555 193.73 118.96 218.81 60.535 448.27-112.66 508.84-331.47-120.73 163.76-246.35 228.01-381.53 206.97 20.254-2.7227 40.324-6.9453 60.023-12.645l-0.027343-0.027344c72.184-22.18 139.11-64.348 191.65-125.95 147.33-172.71 87.336-453.87-85.379-601.23 77.98 143.01 96.832 261.94 62.137 361.97 6.6172-50.668 3.8398-103.38-9.75-155.82z" fill-rule="evenodd"/>
  </svg>

The animation is working well so far, but I’m wondering if it’s possible to apply a rotation effect to the mask-image (specifically, the SVG BlackHole) without affecting the rotation of the alternate-gradient-bg.