svg linear gradient directions

by jorgeluis

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient -->

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="default">
      <stop offset="5%"  stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>

    <linearGradient id="rotated" gradientTransform="rotate(90)">
      <stop offset="5%"  stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>

    <linearGradient id="vertical-down" x2="0%" y2="100%">
      <stop offset="5%"  stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>

    <linearGradient id="vertical-up" x2="0%" y1="100%" y2="0%">
      <stop offset="5%"  stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
</defs>
 
  <!-- using my linear gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#default')" />

  <circle cx="15" cy="5" r="4" fill="url('#rotated')" />

  <circle cx="25" cy="5" r="4" fill="url('#vertical-down')" />

  <circle cx="35" cy="5" r="4" fill="url('#vertical-up')" />
</svg>