isoquant gradient with Victory Chart

EDIT: the svg. code was perfect to answer my question, but I am having trouble to add it to the victory chart

<svg
        style={{
          height: 0,
          width: 0,
        }}
        >
        <defs>
          <linearGradient
            viewBox="0 0 100 100"
            backgroundColor="#06b050"
            id="iso_gradient"
          >
            <path fill="#ffff00" d="M 10,0 C 15,85 15,85 100,90 L 100,0" />
            <path fill="#fdc100" d="M 30,0 C 30,40 60,70 100,70 L 100,0" />
            <path fill="#ff0000" d="M 50,0 C 55,15 85,45 100,50 L 100,0" />
            <path fill="#bf0101" d="M 70,0 C 75,7 93,25 100,30 L 100,0" />
          </linearGradient>
        </defs>
      </svg>
      <VictoryChart
        domain={{ y: domain }}
        theme={VictoryTheme.material}
        tickFormat={(tick) => `${tick}`}
        width={width}
        height={height}
        style={{
          background: {
            fill: "url(#iso_gradient)",
          },
        }}
        backgroundComponent={<Background />}
      >
        <VictoryAxis tickValues={tickxValues} tickFormat={tickxFormat} />
        <VictoryAxis
          dependentAxis
          tickValues={tickyValues}
          tickFormat={tickyFormat}
        />
        <VictoryScatter data={data} x={xaxis} y={yaxis} />
      </VictoryChart>

I have asked a question on how to create a linear gradient with Victory Chart previously here, but now I wonder if it is also possible to build a gradient with isoquant curves, like in this picture:

It should be related to radial gradients in CSS, but I cannot figure out the logic to get the isoquant curves:

<svg>
        <defs>
          <radialGradient
            id="iso_gradient"
            // gradientTransform="rotate(10)"
          >
            <stop offset="0%" stopColor={colorScale[4]} />
            <stop offset="25%" stopColor={colorScale[4]} />
            <stop offset="25%" stopColor={colorScale[3]} />
            <stop offset="50%" stopColor={colorScale[3]} />
            <stop offset="50%" stopColor={colorScale[3]} />
            <stop offset="50%" stopColor={colorScale[2]} />
            <stop offset="75%" stopColor={colorScale[2]} />
            <stop offset="75%" stopColor={colorScale[1]} />
            <stop offset="90%" stopColor={colorScale[1]} />
            <stop offset="90%" stopColor={colorScale[0]} />
            <stop offset="100%" stopColor={colorScale[0]} />
          </radialGradient>
        </defs>
      </svg>

Don't know about gradients, but it's definitely possible with svg.

<path stroke="blue" fill="none" d="M 10,0 C 15,85 15,85 100,90">

Whole thing would be more or less something like this

svg {
  width: 500px;
  height: 500px;
  background-color: #06b050;
}

<svg viewBox="0 0 100 100">
  <path fill="#ffff00" d="M 10,0 C 15,85 15,85 100,90 L 100,0" />
  <path fill="#fdc100" d="M 30,0 C 30,40 60,70 100,70 L 100,0" />
  <path fill="#ff0000" d="M 50,0 C 55,15 85,45 100,50 L 100,0" />
  <path fill="#bf0101" d="M 70,0 C 75,7 93,25 100,30 L 100,0" />
</svg>

https://www.w3schools.com/graphics/svg_path.asp