g/gradient-radial-repeat.svg

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
  <radialGradient id="red" fx="0.5" fy="0.5" cx="0.6" cy="0.6" r="0.2" spreadMethod="repeat">
     <stop offset="0%"   style="stop-color: black" />
     <stop offset="50%"  style="stop-color: red" />
     <stop offset="100%" style="stop-color: black" />
  </radialGradient>
  <radialGradient id="maroon" fx="0.5" fy="0.5" cx="0.6" cy="0.6" r="0.2" spreadMethod="repeat">
     <stop offset="0%"   style="stop-color: red" />
     <stop offset="50%"  style="stop-color: maroon" />
     <stop offset="100%" style="stop-color: red" />
  </radialGradient>
  <radialGradient id="purple" fx="0.5" fy="0.5" cx="0.6" cy="0.6" r="0.2" spreadMethod="repeat">
     <stop offset="0%"   style="stop-color: fuchsia" />
     <stop offset="50%"  style="stop-color: purple" />
     <stop offset="100%" style="stop-color: fuchsia" />
  </radialGradient>
  <radialGradient id="fuchsia" fx="0.5" fy="0.5" cx="0.6" cy="0.6" r="0.2" spreadMethod="repeat">
     <stop offset="0%"   style="stop-color: white" />
     <stop offset="50%"  style="stop-color: fuchsia" />
     <stop offset="100%" style="stop-color: white" />
  </radialGradient>
  <radialGradient id="blue" fx="0.5" fy="0.5" cx="0.6" cy="0.6" r="0.2" spreadMethod="repeat">
     <stop offset="0%"   style="stop-color: navy" />
     <stop offset="50%"  style="stop-color: blue" />
     <stop offset="100%" style="stop-color: navy" />
  </radialGradient>
  <radialGradient id="navy" fx="0.5" fy="0.5" cx="0.6" cy="0.6" r="0.2" spreadMethod="repeat">
     <stop offset="0%"   style="stop-color: black" />
     <stop offset="50%"  style="stop-color: navy" />
     <stop offset="100%" style="stop-color: black" />
  </radialGradient>
  <radialGradient id="teal" fx="0.5" fy="0.5" cx="0.6" cy="0.6" r="0.2" spreadMethod="repeat">
     <stop offset="0%"   style="stop-color: aqua" />
     <stop offset="50%"  style="stop-color: teal" />
     <stop offset="100%" style="stop-color: aqua" />
  </radialGradient>
  <radialGradient id="aqua" fx="0.5" fy="0.5" cx="0.6" cy="0.6" r="0.2" spreadMethod="repeat">
     <stop offset="0%"   style="stop-color: blue" />
     <stop offset="50%"  style="stop-color: aqua" />
     <stop offset="100%" style="stop-color: blue" />
  </radialGradient>
  <radialGradient id="green" fx="0.5" fy="0.5" cx="0.6" cy="0.6" r="0.2" spreadMethod="repeat">
     <stop offset="0%"   style="stop-color: lime" />
     <stop offset="50%"  style="stop-color: green" />
     <stop offset="100%" style="stop-color: lime" />
  </radialGradient>
  <radialGradient id="lime" fx="0.5" fy="0.5" cx="0.6" cy="0.6" r="0.2" spreadMethod="repeat">
     <stop offset="0%"   style="stop-color: yellow" />
     <stop offset="50%"  style="stop-color: lime" />
     <stop offset="100%" style="stop-color: yellow" />
  </radialGradient>
  <radialGradient id="olive" fx="0.5" fy="0.5" cx="0.6" cy="0.6" r="0.2" spreadMethod="repeat">
     <stop offset="0%"   style="stop-color: yellow" />
     <stop offset="50%"  style="stop-color: olive" />
     <stop offset="100%" style="stop-color: yellow" />
  </radialGradient>
  <radialGradient id="yellow" fx="0.5" fy="0.5" cx="0.6" cy="0.6" r="0.2" spreadMethod="repeat">
     <stop offset="0%"   style="stop-color: white" />
     <stop offset="50%"  style="stop-color: yellow" />
     <stop offset="100%" style="stop-color: white" />
  </radialGradient>
  <radialGradient id="black" fx="0.5" fy="0.5" cx="0.6" cy="0.6" r="0.2" spreadMethod="repeat">
     <stop offset="0%"   style="stop-color: grey" />
     <stop offset="50%"  style="stop-color: black" />
     <stop offset="100%" style="stop-color: grey" />
  </radialGradient>
  <radialGradient id="grey" fx="0.5" fy="0.5" cx="0.6" cy="0.6" r="0.2" spreadMethod="repeat">
     <stop offset="0%"   style="stop-color: silver" />
     <stop offset="50%"  style="stop-color: grey" />
     <stop offset="100%" style="stop-color: silver" />
  </radialGradient>
  <radialGradient id="silver" fx="0.5" fy="0.5" cx="0.6" cy="0.6" r="0.2" spreadMethod="repeat">
     <stop offset="0%"   style="stop-color: white" />
     <stop offset="50%"  style="stop-color: silver" />
     <stop offset="100%" style="stop-color: white" />
  </radialGradient>
  <radialGradient id="white" fx="0.5" fy="0.5" cx="0.6" cy="0.6" r="0.2" spreadMethod="repeat">
     <stop offset="0%"   style="stop-color: black" />
     <stop offset="50%"  style="stop-color: white" />
     <stop offset="100%" style="stop-color: black" />
  </radialGradient>
</defs><rect x='4%' y='4%' width='22%' height='22%' style='fill: url(#red)' /><rect x='27%' y='4%' width='22%' height='22%' style='fill: url(#maroon)' /><rect x='50%' y='4%' width='22%' height='22%' style='fill: url(#purple)' /><rect x='73%' y='4%' width='22%' height='22%' style='fill: url(#fuchsia)' /><rect x='4%' y='27%' width='22%' height='22%' style='fill: url(#blue)' /><rect x='27%' y='27%' width='22%' height='22%' style='fill: url(#navy)' /><rect x='50%' y='27%' width='22%' height='22%' style='fill: url(#teal)' /><rect x='73%' y='27%' width='22%' height='22%' style='fill: url(#aqua)' /><rect x='4%' y='50%' width='22%' height='22%' style='fill: url(#green)' /><rect x='27%' y='50%' width='22%' height='22%' style='fill: url(#lime)' /><rect x='50%' y='50%' width='22%' height='22%' style='fill: url(#olive)' /><rect x='73%' y='50%' width='22%' height='22%' style='fill: url(#yellow)' /><rect x='4%' y='73%' width='22%' height='22%' style='fill: url(#black)' /><rect x='27%' y='73%' width='22%' height='22%' style='fill: url(#grey)' /><rect x='50%' y='73%' width='22%' height='22%' style='fill: url(#silver)' /><rect x='73%' y='73%' width='22%' height='22%' style='fill: url(#white)' /></svg>