2024 Stack Overflow Developer Survey Hero Image Recreation

Hi guys,

I’m trying to recreate the 2024 SO dev survey hero image in three.js, as an exercise. Here’s a link to the survey, it’s the image at the top:

And here’s a fiddle with my implementation:

I’m kind of 80% of the way there, I would say, but the main issue I’m having is the garbage shader I wrote (it’s my first shader). Basically, I’m trying to blend between a set of colors using the Z axis, but it’s not really turning out great. Is the original image using an angle or something?

Thanks!