/* https://grabient.com/_gHOgHzgGlf2Tf0If3dgDFgFrgDZhBdggugAA?style=radialSwatches&steps=8&angle=135 */
background: radial-gradient(circle, #3b0000 0.000%, #3b0000 12.500%, #550900 calc(12.500% + 1px), #550900 25.000%, #714100 calc(25.000% + 1px), #714100 37.500%, #8d7f00 calc(37.500% + 1px), #8d7f00 50.000%, #a8bd08 calc(50.000% + 1px), #a8bd08 62.500%, #c2f41d calc(62.500% + 1px), #c2f41d 75.000%, #d9ff35 calc(75.000% + 1px), #d9ff35 87.500%, #edff4f calc(87.500% + 1px) 100.000%);
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400" preserveAspectRatio="none">
<!-- https://grabient.com/_gHOgHzgGlf2Tf0If3dgDFgFrgDZhBdggugAA?style=radialSwatches&steps=8&angle=135 -->
<defs>
<clipPath id="ringBounds">
<rect x="0" y="0" width="800" height="400" />
</clipPath>
</defs>
<g clip-path="url(#ringBounds)"><path d="M 344.098,200.000 A 55.902,55.902 0 1 1 455.902,200.000 A 55.902,55.902 0 1 1 344.098,200.000 Z" fill="#3b0000" fill-opacity="1.000" /><path d="M 288.197,200.000 A 111.803,111.803 0 1 1 511.803,200.000 A 111.803,111.803 0 1 1 288.197,200.000 Z M 344.098,200.000 A 55.902,55.902 0 1 0 455.902,200.000 A 55.902,55.902 0 1 0 344.098,200.000 Z" fill="#550900" fill-opacity="1.000" /><path d="M 232.295,200.000 A 167.705,167.705 0 1 1 567.705,200.000 A 167.705,167.705 0 1 1 232.295,200.000 Z M 288.197,200.000 A 111.803,111.803 0 1 0 511.803,200.000 A 111.803,111.803 0 1 0 288.197,200.000 Z" fill="#714100" fill-opacity="1.000" /><path d="M 176.393,200.000 A 223.607,223.607 0 1 1 623.607,200.000 A 223.607,223.607 0 1 1 176.393,200.000 Z M 232.295,200.000 A 167.705,167.705 0 1 0 567.705,200.000 A 167.705,167.705 0 1 0 232.295,200.000 Z" fill="#8d7f00" fill-opacity="1.000" /><path d="M 120.492,200.000 A 279.508,279.508 0 1 1 679.508,200.000 A 279.508,279.508 0 1 1 120.492,200.000 Z M 176.393,200.000 A 223.607,223.607 0 1 0 623.607,200.000 A 223.607,223.607 0 1 0 176.393,200.000 Z" fill="#a8bd08" fill-opacity="1.000" /><path d="M 64.590,200.000 A 335.410,335.410 0 1 1 735.410,200.000 A 335.410,335.410 0 1 1 64.590,200.000 Z M 120.492,200.000 A 279.508,279.508 0 1 0 679.508,200.000 A 279.508,279.508 0 1 0 120.492,200.000 Z" fill="#c2f41d" fill-opacity="1.000" /><path d="M 8.688,200.000 A 391.312,391.312 0 1 1 791.312,200.000 A 391.312,391.312 0 1 1 8.688,200.000 Z M 64.590,200.000 A 335.410,335.410 0 1 0 735.410,200.000 A 335.410,335.410 0 1 0 64.590,200.000 Z" fill="#d9ff35" fill-opacity="1.000" /><path d="M -47.214,200.000 A 447.214,447.214 0 1 1 847.214,200.000 A 447.214,447.214 0 1 1 -47.214,200.000 Z M 8.688,200.000 A 391.312,391.312 0 1 0 791.312,200.000 A 391.312,391.312 0 1 0 8.688,200.000 Z" fill="#edff4f" fill-opacity="1.000" /></g>
</svg>
["#3b0000", "#550900", "#714100", "#8d7f00", "#a8bd08", "#c2f41d", "#d9ff35", "#edff4f"]
// https://grabient.com/_gHOgHzgGlf2Tf0If3dgDFgFrgDZhBdggugAA?style=radialSwatches&steps=8&angle=135
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 8.0;
vec3 palette(float t) {
vec3 a = vec3(0.462, 0.499, 0.421);
vec3 b = vec3(-0.621, -0.760, -0.547);
vec3 c = vec3(0.197, 0.363, 0.217);
vec3 d = vec3(4.189, 2.094, 0.000);
return a + b * cos(6.283185 * (c * t + d));
}
// N hard swatches sampled from the palette
vec3 stops(float t) {
float i = min(floor(clamp(t, 0.0, 1.0) * STEPS), STEPS - 1.0);
return palette(i / (STEPS - 1.0));
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 p = fragCoord - 0.5 * iResolution.xy;
// circle to the farthest corner (CSS default)
float t = length(p) / length(0.5 * iResolution.xy);
fragColor = vec4(stops(t), 1.0);
}
[
[0.462, 0.499, 0.421],
[-0.621, -0.760, -0.547],
[0.197, 0.363, 0.217],
[4.189, 2.094, 0.000]
]