<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">
  <defs>
    <linearGradient id="gradient1" gradientTransform="rotate(90)">
      <stop offset="0%" stop-color="green" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
    <linearGradient id="gradient2" xlink:href="#gradient1" gradientTransform="rotate(270)" spreadMethod="repeat" />
  </defs>
  <rect x="0" y="0" width="0.5" height="0.5" fill="url(#gradient1)" />
  <rect x="0.5" y="0.5" width="0.5" height="0.5" fill="url(#gradient2)" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">
  <defs>
    <linearGradient id="gradient3" gradientTransform="rotate(90)">
      <stop offset="0%" stop-color="green" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
    <linearGradient id="gradient4" xlink:href="#gradient3" gradientTransform="rotate(270 0.5 0.5)" />
  </defs>
  <rect x="0" y="0" width="0.5" height="0.5" fill="url(#gradient3)" />
  <rect x="0.5" y="0.5" width="0.5" height="0.5" fill="url(#gradient4)" />
</svg>

body {
  display: flex;
}