<svg width="500" height="1000" viewBox="0 0 500 1000">
  <defs>
    <radialGradient id="radial_gradient_1">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
    <radialGradient id="radial_gradient_2">
      <stop offset="50%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
    <radialGradient id="offset_focalpoint" cx="50%" cy="50%" fx="0%" fy="50%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
    <radialGradient id="offset_centerpoint" cx="99%" cy="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
    <radialGradient id="radius_30" r="30%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
    <radialGradient id="radius_120" r="120%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
    <radialGradient id="focal_circle_radius" r="100%" fr="25%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
    <radialGradient id="focal_circle_radius_less_than_focal_radius" r="20%" fr="25%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <rect x="0" y="0" width="250" height="250" fill="url(#radial_gradient_1)" stroke="white" stroke-width="10" />
  <rect x="250" y="0" width="250" height="250" fill="url(#radial_gradient_2)" stroke="white" stroke-width="10" />
  <rect x="0" y="250" width="250" height="250" fill="url(#offset_focalpoint)" stroke="white" stroke-width="10" />
  <rect x="250" y="250" width="250" height="250" fill="url(#offset_centerpoint)" stroke="white" stroke-width="10" />
  <rect x="0" y="500" width="250" height="250" fill="url(#radius_30)" stroke="white" stroke-width="10" />
  <rect x="250" y="500" width="250" height="250" fill="url(#radius_120)" stroke="white" stroke-width="10" />
  <rect x="0" y="750" width="250" height="250" fill="url(#focal_circle_radius)" stroke="white" stroke-width="10" />
  <rect x="250" y="750" width="250" height="250" fill="url(#focal_circle_radius_less_than_focal_radius)" stroke="white" stroke-width="10" />
</svg>