Google Balls

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 400" width="500" height="400">
  <defs>
    <!-- Blue ball gradient -->
    <radialGradient id="blueGrad" cx="35%" cy="35%" r="60%">
      <stop offset="0%" style="stop-color:#6DB3F2"/>
      <stop offset="50%" style="stop-color:#4285F4"/>
      <stop offset="100%" style="stop-color:#1a5abc"/>
    </radialGradient>

    <!-- Red ball gradient -->
    <radialGradient id="redGrad" cx="35%" cy="35%" r="60%">
      <stop offset="0%" style="stop-color:#FF7A7A"/>
      <stop offset="50%" style="stop-color:#EA4335"/>
      <stop offset="100%" style="stop-color:#a52a1f"/>
    </radialGradient>

    <!-- Yellow ball gradient -->
    <radialGradient id="yellowGrad" cx="35%" cy="35%" r="60%">
      <stop offset="0%" style="stop-color:#FFE066"/>
      <stop offset="50%" style="stop-color:#FBBC05"/>
      <stop offset="100%" style="stop-color:#b58a00"/>
    </radialGradient>

    <!-- Green ball gradient -->
    <radialGradient id="greenGrad" cx="35%" cy="35%" r="60%">
      <stop offset="0%" style="stop-color:#5DD67A"/>
      <stop offset="50%" style="stop-color:#34A853"/>
      <stop offset="100%" style="stop-color:#1e6631"/>
    </radialGradient>

    <!-- Shadow filter -->
    <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
      <feDropShadow dx="3" dy="8" stdDeviation="6" flood-opacity="0.3"/>
    </filter>
  </defs>

  <!-- Background -->
  <rect width="500" height="400" fill="#f8f9fa"/>

  <!-- Green ball (back, smaller) -->
  <circle cx="100" cy="150" r="35" fill="url(#greenGrad)" filter="url(#shadow)">
    <animate attributeName="cx" values="100;180;50;160;100" dur="4.1s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1"/>
    <animate attributeName="cy" values="150;80;200;60;150" dur="4.7s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1"/>
    <animate attributeName="r" values="35;55;20;50;35" dur="3.1s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1"/>
  </circle>

  <!-- Red ball (back middle) -->
  <circle cx="280" cy="130" r="50" fill="url(#redGrad)" filter="url(#shadow)">
    <animate attributeName="cx" values="280;180;380;220;280" dur="4.9s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1"/>
    <animate attributeName="cy" values="130;220;70;200;130" dur="3.5s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1"/>
    <animate attributeName="r" values="50;75;30;70;50" dur="3.3s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1"/>
  </circle>

  <!-- Yellow ball (front left, medium-large) -->
  <circle cx="170" cy="240" r="70" fill="url(#yellowGrad)" filter="url(#shadow)">
    <animate attributeName="cx" values="170;280;80;320;170" dur="4.5s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1"/>
    <animate attributeName="cy" values="240;140;300;100;240" dur="4.3s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1"/>
    <animate attributeName="r" values="70;100;45;90;70" dur="3.7s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1"/>
  </circle>

  <!-- Blue ball (front right, largest) -->
  <circle cx="360" cy="260" r="90" fill="url(#blueGrad)" filter="url(#shadow)">
    <animate attributeName="cx" values="360;220;450;180;360" dur="5.1s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1"/>
    <animate attributeName="cy" values="260;150;320;120;260" dur="3.9s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1"/>
    <animate attributeName="r" values="90;130;55;120;90" dur="3.1s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1"/>
  </circle>
</svg>