Animated Abstract Gradient SVG Background

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width: 100%; height: auto;max-width:  600px">

  <defs>
    <!-- Primary gradient: Electric blue to navy -->
    <linearGradient id="primaryGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#00BFFF;stop-opacity:1" />
      <stop offset="50%" style="stop-color:#1E90FF;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#191970;stop-opacity:1" />
    </linearGradient>

    <!-- Secondary gradient: Fire red to deep orange -->
    <linearGradient id="secondaryGradient" x1="0%" y1="100%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#FF0000;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#FF4500;stop-opacity:1" />
    </linearGradient>

    <!-- Accent gradient for highlight -->
    <radialGradient id="accentGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:0.9" />
      <stop offset="100%" style="stop-color:#FFD700;stop-opacity:0.4" />
    </radialGradient>
  </defs>

  <!-- Main transformation form - angular to curved convergence -->
  <path d="M 50 50 L 120 30 Q 160 50 170 90 Q 175 130 150 150 Q 120 170 80 160 Q 40 150 30 110 Q 25 70 50 50 Z"
    fill="url(#primaryGradient)" opacity="0.9">
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 100 100" to="360 100 100"
      dur="20s" repeatCount="indefinite" />
  </path>

  <!-- Sharp geometric element suggesting breakthrough -->
  <path d="M 80 40 L 140 80 L 120 140 L 60 100 Z" fill="url(#secondaryGradient)">
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 100 100" to="-360 100 100"
      dur="25s" repeatCount="indefinite" />
  </path>

  <!-- Central convergence point with negative space -->
  <circle cx="100" cy="100" r="25" fill="none" stroke="url(#primaryGradient)" stroke-width="3" opacity="0.8" />
  <circle cx="100" cy="100" r="12" fill="url(#accentGradient)" opacity="0.6" />

  <!-- Navigation/direction arrows flowing outward -->
  <path d="M 100 75 Q 125 85 135 100 Q 125 115 100 125" fill="none" stroke="url(#secondaryGradient)" stroke-width="4"
    stroke-linecap="round" opacity="0.7" />

  <path d="M 125 100 Q 115 75 100 65 Q 85 75 75 100" fill="none" stroke="url(#primaryGradient)" stroke-width="4"
    stroke-linecap="round" opacity="0.7">
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 100 100" to="360 100 100"
      dur="15s" repeatCount="indefinite" />
  </path>

  <!-- Fluid organic elements for storytelling -->
  <path d="M 60 80 Q 70 60 90 65 Q 110 70 120 90 Q 115 110 95 115 Q 75 110 65 90 Q 60 85 60 80"
    fill="url(#accentGradient)" opacity="0.4" />

  <!-- Sharp precision lines creating tension -->
  <line x1="45" y1="45" x2="75" y2="75" stroke="url(#primaryGradient)" stroke-width="2" opacity="0.6" />
  <line x1="125" y1="125" x2="155" y2="155" stroke="url(#secondaryGradient)" stroke-width="2" opacity="0.6" />
  <line x1="155" y1="45" x2="125" y2="75" stroke="url(#accentGradient)" stroke-width="2" opacity="0.6" />

</svg>