等量梯度与胜利图

Question

. Answers to this question are eligible for a +250 reputation bounty. user299791 wants to to this question.

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>

Answer 1

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