<h3>Some simple SVG gradient test cases</h3>
<b>SVG radialGradient <a href="https://www.w3.org/TR/SVG11/pservers.html#ExampleRadGrad01">W3C spec example</a>:</b><br>
<svg width="8cm" height="4cm" viewBox="100 100 600 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <g>
    <defs>
      <radialGradient id="MyGradient" gradientUnits="userSpaceOnUse"
                      cx="400" cy="200" r="300" fx="400" fy="200">
        <stop offset="0%" stop-color="red" />
        <stop offset="50%" stop-color="blue" />
        <stop offset="100%" stop-color="red" />
      </radialGradient>
    </defs>
    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5" x="100" y="100" width="600" height="200"/>
  </g>
</svg>
<br>
<b>SVG MDN gradientTransform example (userSpaceOnUse radialGradient)</b><br>
<svg width="400" height="190" viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <radialGradient id="gradient1" gradientUnits="userSpaceOnUse" cx="100" cy="100" r="100" fx="100" fy="100">
    <stop offset="0%" stop-color="darkblue" />
    <stop offset="50%" stop-color="skyblue" />
    <stop offset="100%" stop-color="darkblue" />
  </radialGradient>
  <radialGradient id="gradient2" gradientUnits="userSpaceOnUse" cx="320" cy="100" r="100" fx="320" fy="100" gradientTransform="skewX(20) translate(-35, 0)">
    <stop offset="0%" stop-color="darkblue" />
    <stop offset="50%" stop-color="skyblue" />
    <stop offset="100%" stop-color="darkblue" />
  </radialGradient>
  <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" />
  <rect x="220" y="0" width="200" height="200" fill="url(#gradient2)"/>
</svg>
<br>
<br>
<b>MDN radialGradient example (gradientUnits=objectBoundingBox)</b>
<br>
<svg width="200" height="200"
  viewBox="0 0 10 10"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <radialGradient id="myGradient">
      <stop offset="10%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </radialGradient>
  </defs>

  <!-- using my radial gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
<br>
<b>MDN spreadMethod example:</b><br/>
<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient
      id="GradientPad"
      cx="0.5"
      cy="0.5"
      r="0.4"
      fx="0.75"
      fy="0.75"
      spreadMethod="pad">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
    <radialGradient
      id="GradientRepeat"
      cx="0.5"
      cy="0.5"
      r="0.4"
      fx="0.75"
      fy="0.75"
      spreadMethod="repeat">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
    <radialGradient
      id="GradientReflect"
      cx="0.5"
      cy="0.5"
      r="0.4"
      fx="0.75"
      fy="0.75"
      spreadMethod="reflect">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <rect
    x="10"
    y="10"
    rx="15"
    ry="15"
    width="100"
    height="100"
    fill="url(#GradientPad)" />
  <rect
    x="10"
    y="120"
    rx="15"
    ry="15"
    width="100"
    height="100"
    fill="url(#GradientRepeat)" />
  <rect
    x="120"
    y="120"
    rx="15"
    ry="15"
    width="100"
    height="100"
    fill="url(#GradientReflect)" />
  <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">
    Pad
  </text>
  <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">
    Repeat
  </text>
  <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">
    Reflect
  </text>
</svg>
<br>
<br>
<b>Simple radialGradient gradientUnits=objectBoundingBox</b><br>
<svg height="150" width="500">
  <defs>
    <radialGradient id="gradA" gradientTransform="rotate(30 0.5 0.5)" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:white; stop-opacity:0" />
      <stop offset="100%" style="stop-color:blue; stop-opacity:1" />
    </radialGradient>
  </defs>
  <rect height="150" width="500" fill="url(#gradA)" />
</svg>
<br>
<br>
<b>radialGradient with non-centered focal point:</b><br>
<svg width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <radialGradient id="g1" cx="50%" cy="50%" r="50%" fx="25%" fy="25%">
      <stop stop-color="black" offset="0%"/>
      <stop stop-color="teal" offset="50%"/>
      <stop stop-color="white" offset="100%"/>
    </radialGradient>
  </defs>
  <circle fill="url(#g1)" cx="100" cy="100" r="100"/>
</svg>
<br>
<br>
<b>Linear gradient using percentages + inline CSS, gradientUnits=objectBoundingBox</b><br>
<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
<br>
<b>Linear gradient using numbers, gradientUnits=objectBoundingBox</b><br>
<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="red"/>
      <stop offset="1" stop-color="blue"/>
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>
<br>
<b>Linear gradient with gradientUnits=userSpaceOnUse using numbers</b><br>
<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" x1="0" y1="0" x2="300" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="cyan"/>
      <stop offset="1" stop-color="yellow"/>
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3)" />
</svg>
<br>
<b>Linear gradient with gradientUnits=userSpaceOnUse using percentages</b><br>
<svg height="150" width="400">
  <defs>
    <linearGradient id="grad4" x1="0" y1="0" x2="70%" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="black"/>
      <stop offset="1" stop-color="orange"/>
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad4)" />
</svg>
<br>
<b>Linear gradient scaled by viewbox</b><br>
<svg height="150" width="400" viewbox="0 0 20 20">
  <defs>
    <linearGradient id="grad5" x1="0" y1="0" x2="70%" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="black"/>
      <stop offset="1" stop-color="red"/>
    </linearGradient>
  </defs>
  <ellipse cx="5" cy="10" rx="10" ry="5" fill="url(#grad5)" />
</svg>
<br>
<b>Linear gradient with gradientTransform</b><br>
<svg height="150" width="400">
  <defs>
    <linearGradient id="grad6" x1="0" y1="0" x2="70%" y2="0" gradientTransform="rotate(30)">
      <stop offset="0" stop-color="pink"/>
      <stop offset="1" stop-color="purple"/>
    </linearGradient>
  </defs>
  <rect x="115" y="15" width="210" height="110" fill="url(#grad6)" />
</svg>
<br>
<b>Linear gradient + transform</b><br>
<svg height="150" width="400">
  <defs>
    <linearGradient id="grad7" x1="0" y1="0" x2="70%" y2="0">
      <stop offset="0" stop-color="blue"/>
      <stop offset="1" stop-color="magenta"/>
    </linearGradient>
  </defs>
  <rect x="115" y="15" width="170" height="110" fill="url(#grad7)" transform="rotate(45 200 70)" />
</svg>
<br>
<b>Linear gradient + transform with fill-opacity</b><br>
<svg height="150" width="400">
  <defs>
    <linearGradient id="grad7" x1="0" y1="0" x2="70%" y2="0">
      <stop offset="0" stop-color="blue"/>
      <stop offset="1" stop-color="magenta"/>
    </linearGradient>
  </defs>
  <rect x="115" y="15" width="170" height="110" fill="url(#grad7)" fill-opacity="0.5" transform="rotate(5 200 70)" />
</svg>
<br>
<b>Stroke linear gradient + transform</b><br>
<svg height="150" width="400">
  <defs>
    <linearGradient id="grad7" x1="0" y1="0" x2="70%" y2="0">
      <stop offset="0" stop-color="blue"/>
      <stop offset="1" stop-color="magenta"/>
    </linearGradient>
  </defs>
  <rect x="115" y="15" width="170" height="110" stroke="url(#grad7)" fill="none" transform="rotate(45 200 70)" />
</svg>
<br>
<b>Stroke linear gradient + transform with stroke-opacity</b><br>
<svg height="150" width="400">
  <defs>
    <linearGradient id="grad7" x1="0" y1="0" x2="70%" y2="0">
      <stop offset="0" stop-color="blue"/>
      <stop offset="1" stop-color="magenta"/>
    </linearGradient>
  </defs>
  <rect x="115" y="15" width="170" height="110" stroke="url(#grad7)" stroke-opacity="0.5" stroke-width="10" fill="none" transform="rotate(5 200 70)" />
</svg>