radial_gradient_direction.svg Update Proposal

radial_gradient_direction.svg

<svg viewBox="-301 -206 802 841" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    .label { font: 64px sans-serif; stroke-width: 0; stroke: black; fill: #1a2127; }
  </style>
  <defs>
    <radialGradient id="radgrad-pad"
                    gradientUnits="userSpaceOnUse"
                    fx="0" fy="0" fr="35"
                    cx="250" cy="0" r="80"
                    spreadMethod="pad">
      <stop offset="0%" stop-color="#DA0025"/>
      <stop offset="50%" stop-color="#FFC600"/>
      <stop offset="100%" stop-color="#0052AB"/>
    </radialGradient>
    <radialGradient id="radgrad-flipped-centers" xlink:href="#radgrad-pad"
                    fx="250" fy="0" fr="80"
                    cx="0" cy="0" r="35"/>
    <rect id="filled-rect" x="-300" y="-200" width="800" height="400" stroke-width="2" stroke="gray"/>
  </defs>
  <g transform="" class="spreadmethod-repeat">
    <use href="#filled-rect" fill="url(#radgrad-pad)"/>
    <g id="points" fill="none" stroke="#1a2127" stroke-width="2">
      <circle cx="0" cy="0" r="35" />
      <circle cx="0" cy="0" r="4" fill="#1a2127"/>
      <line x1="0" y1="0" x2="18.386" y2="-29.781" />
      <text class="label" x="-40" y="40">c₀</text>
      <text class="label" x="14" y="20">r₀</text>
      <circle cx="250" cy="0" r="80"  />
      <circle cx="250" cy="0" r="4" fill="#1a2127"/>
      <line x1="250" y1="0" x2="292.012" y2="-68.05" />
      <text class="label" x="217" y="40">c₁</text>
      <text class="label" x="277" y="0">r₁</text>
    </g>
  </g>

  <g transform="translate(0, 430)">
    <use href="#filled-rect" fill="url(#radgrad-flipped-centers)"/>
    <g id="points" fill="none" stroke="#1a2127" stroke-width="2">
      <circle cx="0" cy="0" r="35" />
      <circle cx="0" cy="0" r="4" fill="#1a2127"/>
      <line x1="0" y1="0" x2="18.386" y2="-29.781" />
      <text class="label" x="-40" y="40">c₁</text>
      <text class="label" x="14" y="20">r₁</text>
      <circle cx="250" cy="0" r="80"  />
      <circle cx="250" cy="0" r="4" fill="#1a2127"/>
      <line x1="250" y1="0" x2="292.012" y2="-68.05" />
      <text class="label" x="217" y="40">c₀</text>
      <text class="label" x="277" y="0">r₀</text>
    </g>
  </g>

</svg>