如何在Victory Chart中实现等产量曲线渐变背景？

我之前在Stack Overflow询问过如何为Victory Chart添加线性渐变背景，现在希望实现等产量曲线渐变背景（效果参考下图）。我知道该效果和CSS径向渐变相关，但始终没理清等产量曲线的实现逻辑。

补充说明：我已经拿到了能满足需求的SVG代码，但无法将其整合到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>

参考示例图：

我尝试过用CSS径向渐变相关的SVG代码，但还是没搞懂等产量曲线的实现逻辑，代码如下：

<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>

尝试效果参考图：

内容的提问来源于stack exchange，提问作者user299791