One gradient over multiple objects

Question

I was wondering how I can apply one gradient to multiple objects.

Let's say I have ten circles next to each other and a gradient from yellow to red. All dots together should now show the gradient.

Example:

svg {
  height: 200px;
  overflow: visible;
}

<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 297 345">
        <defs>
            <linearGradient id="Orange_Gelb" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
                <stop offset="0%" stop-color="#ffff25" />
                <stop offset="100%" stop-color="#f71818" />
            </linearGradient>
        </defs>
      <g >
        <circle class="c1" cx="90" cy="100" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="200" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="300" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="400" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="500" r="50" fill="url(#Orange_Gelb)"/>
      </g>
    </svg>

Answer 1

I hope this is what you were asking for:

// initiate the canvas
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
let cw = (canvas.width = 297);
let ch = (canvas.height = 550);

// create the liniar gradient
// SVG equivalent <linearGradient x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
let grd = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
// SVG equivalent: <stop offset="0%" stop-color="#ffff25" />
grd.addColorStop(0, "#ffff25");
// SVG equivalent: <stop offset="100%" stop-color="#f71818" />
grd.addColorStop(1, "#f71818");
ctx.fillStyle = grd;

//draw the circles
for (let y = 100; y < 550; y += 100) {
  drawCircle(90,y,50);
}

function drawCircle(x,y,r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  ctx.fill();
}

svg,canvas{border:1px solid; width:297px;}

<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 297 550">
        <defs>
            <linearGradient id="Orange_Gelb" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
                <stop offset="0%" stop-color="#ffff25" />
                <stop offset="100%" stop-color="#f71818" />
            </linearGradient>
        </defs>
      <g >
        <circle class="c1" cx="90" cy="100" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="200" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="300" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="400" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="500" r="50" fill="url(#Orange_Gelb)"/>
      </g>
    </svg>

<canvas></canvas>

UPDATE

I'm adding an other example where the gradient is applied to every circle in part

// initiate the canvas
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
let cw = (canvas.width = 297);
let ch = (canvas.height = 550);


//draw the circles
for (let y = 100; y < 550; y += 100) {
  ctx.fillStyle = Grd(90,y,50)
  drawCircle(90,y,50);
}

function drawCircle(x,y,r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  ctx.fill();
}


function Grd(cx,cy,r) {
  grd = ctx.createLinearGradient(cx-r,cy-r,cx+r,cy+r);
  grd.addColorStop(0, "#ffff25");
  grd.addColorStop(1, "#f71818");

  return grd;
}

svg,canvas{border:1px solid; width:297px;}

<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 297 550">
        <defs>
            <linearGradient id="Orange_Gelb" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="objectBoundingBox">
                <stop offset="0%" stop-color="#ffff25" />
                <stop offset="100%" stop-color="#f71818" />
            </linearGradient>
        </defs>
      <g >
        <circle class="c1" cx="90" cy="100" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="200" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="300" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="400" r="50" fill="url(#Orange_Gelb)"/>
        <circle class="c1" cx="90" cy="500" r="50" fill="url(#Orange_Gelb)"/>
      </g>
    </svg>

<canvas></canvas>

Please note that in this case the SVG linear gradient uses gradientUnits="objectBoundingBox". In canvas I had to write a function that creates a different gradient for every circle.