How can I keep this picture from going around?

I'm trying to make a logo animation, cropping a static complex gradient with a silhouette of an animated 3D shape, but the gradient picture seems to move randomly while the animation is running. there is no problem before and after the animation. So, does anyone know why it's moving?

What I found seemed to be related was that the two-dimensional dimensions and positions of the silhouettes were constantly changing as the animation is running.

This is the code simple

<div style="
    transform: rotateX(calc(... + var(--rx)))
    rotateZ(calc((var(...) * ...))) rotateY(var(...))
    translateZ(...);
    filter:url('filter')
"></div><!-- complex 3d animated filter target -->
    <svg
      version="1.1"
      width="100%"
      height="100%"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 50 50"
    >
      <defs>
        <filter id="filter" x="-25%" y="-25%" width="150%" height="150%">
          <fe...
            ...
          />
          ...
          <!-- Filters without problems -->
          <feImage xlink:href="./bgp0.5.png" x="-50" y="0" result="bgp" />
          <!-- A complex gradient background generated by adobe illustrator -->
          <!-- This picture will move randomly -->
          <feComposite operator="in" in2="contrast" in="bgp" />
        </filter>
      </defs>
    </svg>