/* https://grabient.com/_gJ0gImgJLgHBgJwgH-gCRgDygCDf4ZgZHfzq?style=radialSwatches&steps=8&angle=225 */
background: radial-gradient(circle, #2e10b6 0.000%, #2e10b6 12.500%, #3028a7 calc(12.500% + 1px), #3028a7 25.000%, #344598 calc(25.000% + 1px), #344598 37.500%, #3a6589 calc(37.500% + 1px), #3a6589 50.000%, #428879 calc(50.000% + 1px), #428879 62.500%, #4baa6b calc(62.500% + 1px), #4baa6b 75.000%, #56cb5d calc(75.000% + 1px), #56cb5d 87.500%, #62e94f 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/_gJ0gImgJLgHBgJwgH-gCRgDygCDf4ZgZHfzq?style=radialSwatches&steps=8&angle=225 -->
<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="#2e10b6" 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="#3028a7" 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="#344598" 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="#3a6589" 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="#428879" 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="#4baa6b" 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="#56cb5d" 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="#62e94f" fill-opacity="1.000" /></g>
</svg>
["#2e10b6", "#3028a7", "#344598", "#3a6589", "#428879", "#4baa6b", "#56cb5d", "#62e94f"]
// https://grabient.com/_gJ0gImgJLgHBgJwgH-gCRgDygCDf4ZgZHfzq?style=radialSwatches&steps=8&angle=225
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 8.0;
vec3 palette(float t) {
vec3 a = vec3(0.628, 0.550, 0.587);
vec3 b = vec3(0.449, 0.624, 0.510);
vec3 c = vec3(0.145, 0.242, 0.131);
vec3 d = vec3(-0.487, 1.607, -0.790);
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.628, 0.550, 0.587],
[0.449, 0.624, 0.510],
[0.145, 0.242, 0.131],
[-0.487, 1.607, -0.790]
]