/* https://grabient.com/_gKJgI6gGFgD8gDmgDxgGQgK_gL1gBXgG3gES?style=radialSwatches&steps=21&angle=180 */
background: radial-gradient(circle, #dc5b5a 0.000%, #dc5b5a 4.762%, #d8574c calc(4.762% + 1px), #d8574c 9.524%, #d2573f calc(9.524% + 1px), #d2573f 14.286%, #cc5934 calc(14.286% + 1px), #cc5934 19.048%, #c65e2c calc(19.048% + 1px), #c65e2c 23.810%, #be6527 calc(23.810% + 1px), #be6527 28.571%, #b76f26 calc(28.571% + 1px), #b76f26 33.333%, #af7a28 calc(33.333% + 1px), #af7a28 38.095%, #a7862d calc(38.095% + 1px), #a7862d 42.857%, #9f9335 calc(42.857% + 1px), #9f9335 47.619%, #97a040 calc(47.619% + 1px), #97a040 52.381%, #8fac4d calc(52.381% + 1px), #8fac4d 57.143%, #88b75b calc(57.143% + 1px), #88b75b 61.905%, #81c069 calc(61.905% + 1px), #81c069 66.667%, #7ac778 calc(66.667% + 1px), #7ac778 71.429%, #75cb85 calc(71.429% + 1px), #75cb85 76.190%, #70cc90 calc(76.190% + 1px), #70cc90 80.952%, #6cca99 calc(80.952% + 1px), #6cca99 85.714%, #69c69e calc(85.714% + 1px), #69c69e 90.476%, #67bfa1 calc(90.476% + 1px), #67bfa1 95.238%, #65b69f calc(95.238% + 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/_gKJgI6gGFgD8gDmgDxgGQgK_gL1gBXgG3gES?style=radialSwatches&steps=21&angle=180 -->
<defs>
<clipPath id="ringBounds">
<rect x="0" y="0" width="800" height="400" />
</clipPath>
</defs>
<g clip-path="url(#ringBounds)"><path d="M 378.704,200.000 A 21.296,21.296 0 1 1 421.296,200.000 A 21.296,21.296 0 1 1 378.704,200.000 Z" fill="#dc5b5a" fill-opacity="1.000" /><path d="M 357.408,200.000 A 42.592,42.592 0 1 1 442.592,200.000 A 42.592,42.592 0 1 1 357.408,200.000 Z M 378.704,200.000 A 21.296,21.296 0 1 0 421.296,200.000 A 21.296,21.296 0 1 0 378.704,200.000 Z" fill="#d8574c" fill-opacity="1.000" /><path d="M 336.112,200.000 A 63.888,63.888 0 1 1 463.888,200.000 A 63.888,63.888 0 1 1 336.112,200.000 Z M 357.408,200.000 A 42.592,42.592 0 1 0 442.592,200.000 A 42.592,42.592 0 1 0 357.408,200.000 Z" fill="#d2573f" fill-opacity="1.000" /><path d="M 314.816,200.000 A 85.184,85.184 0 1 1 485.184,200.000 A 85.184,85.184 0 1 1 314.816,200.000 Z M 336.112,200.000 A 63.888,63.888 0 1 0 463.888,200.000 A 63.888,63.888 0 1 0 336.112,200.000 Z" fill="#cc5934" fill-opacity="1.000" /><path d="M 293.521,200.000 A 106.479,106.479 0 1 1 506.479,200.000 A 106.479,106.479 0 1 1 293.521,200.000 Z M 314.816,200.000 A 85.184,85.184 0 1 0 485.184,200.000 A 85.184,85.184 0 1 0 314.816,200.000 Z" fill="#c65e2c" fill-opacity="1.000" /><path d="M 272.225,200.000 A 127.775,127.775 0 1 1 527.775,200.000 A 127.775,127.775 0 1 1 272.225,200.000 Z M 293.521,200.000 A 106.479,106.479 0 1 0 506.479,200.000 A 106.479,106.479 0 1 0 293.521,200.000 Z" fill="#be6527" fill-opacity="1.000" /><path d="M 250.929,200.000 A 149.071,149.071 0 1 1 549.071,200.000 A 149.071,149.071 0 1 1 250.929,200.000 Z M 272.225,200.000 A 127.775,127.775 0 1 0 527.775,200.000 A 127.775,127.775 0 1 0 272.225,200.000 Z" fill="#b76f26" fill-opacity="1.000" /><path d="M 229.633,200.000 A 170.367,170.367 0 1 1 570.367,200.000 A 170.367,170.367 0 1 1 229.633,200.000 Z M 250.929,200.000 A 149.071,149.071 0 1 0 549.071,200.000 A 149.071,149.071 0 1 0 250.929,200.000 Z" fill="#af7a28" fill-opacity="1.000" /><path d="M 208.337,200.000 A 191.663,191.663 0 1 1 591.663,200.000 A 191.663,191.663 0 1 1 208.337,200.000 Z M 229.633,200.000 A 170.367,170.367 0 1 0 570.367,200.000 A 170.367,170.367 0 1 0 229.633,200.000 Z" fill="#a7862d" fill-opacity="1.000" /><path d="M 187.041,200.000 A 212.959,212.959 0 1 1 612.959,200.000 A 212.959,212.959 0 1 1 187.041,200.000 Z M 208.337,200.000 A 191.663,191.663 0 1 0 591.663,200.000 A 191.663,191.663 0 1 0 208.337,200.000 Z" fill="#9f9335" fill-opacity="1.000" /><path d="M 165.745,200.000 A 234.255,234.255 0 1 1 634.255,200.000 A 234.255,234.255 0 1 1 165.745,200.000 Z M 187.041,200.000 A 212.959,212.959 0 1 0 612.959,200.000 A 212.959,212.959 0 1 0 187.041,200.000 Z" fill="#97a040" fill-opacity="1.000" /><path d="M 144.449,200.000 A 255.551,255.551 0 1 1 655.551,200.000 A 255.551,255.551 0 1 1 144.449,200.000 Z M 165.745,200.000 A 234.255,234.255 0 1 0 634.255,200.000 A 234.255,234.255 0 1 0 165.745,200.000 Z" fill="#8fac4d" fill-opacity="1.000" /><path d="M 123.153,200.000 A 276.847,276.847 0 1 1 676.847,200.000 A 276.847,276.847 0 1 1 123.153,200.000 Z M 144.449,200.000 A 255.551,255.551 0 1 0 655.551,200.000 A 255.551,255.551 0 1 0 144.449,200.000 Z" fill="#88b75b" fill-opacity="1.000" /><path d="M 101.858,200.000 A 298.142,298.142 0 1 1 698.142,200.000 A 298.142,298.142 0 1 1 101.858,200.000 Z M 123.153,200.000 A 276.847,276.847 0 1 0 676.847,200.000 A 276.847,276.847 0 1 0 123.153,200.000 Z" fill="#81c069" fill-opacity="1.000" /><path d="M 80.562,200.000 A 319.438,319.438 0 1 1 719.438,200.000 A 319.438,319.438 0 1 1 80.562,200.000 Z M 101.858,200.000 A 298.142,298.142 0 1 0 698.142,200.000 A 298.142,298.142 0 1 0 101.858,200.000 Z" fill="#7ac778" fill-opacity="1.000" /><path d="M 59.266,200.000 A 340.734,340.734 0 1 1 740.734,200.000 A 340.734,340.734 0 1 1 59.266,200.000 Z M 80.562,200.000 A 319.438,319.438 0 1 0 719.438,200.000 A 319.438,319.438 0 1 0 80.562,200.000 Z" fill="#75cb85" fill-opacity="1.000" /><path d="M 37.970,200.000 A 362.030,362.030 0 1 1 762.030,200.000 A 362.030,362.030 0 1 1 37.970,200.000 Z M 59.266,200.000 A 340.734,340.734 0 1 0 740.734,200.000 A 340.734,340.734 0 1 0 59.266,200.000 Z" fill="#70cc90" fill-opacity="1.000" /><path d="M 16.674,200.000 A 383.326,383.326 0 1 1 783.326,200.000 A 383.326,383.326 0 1 1 16.674,200.000 Z M 37.970,200.000 A 362.030,362.030 0 1 0 762.030,200.000 A 362.030,362.030 0 1 0 37.970,200.000 Z" fill="#6cca99" fill-opacity="1.000" /><path d="M -4.622,200.000 A 404.622,404.622 0 1 1 804.622,200.000 A 404.622,404.622 0 1 1 -4.622,200.000 Z M 16.674,200.000 A 383.326,383.326 0 1 0 783.326,200.000 A 383.326,383.326 0 1 0 16.674,200.000 Z" fill="#69c69e" fill-opacity="1.000" /><path d="M -25.918,200.000 A 425.918,425.918 0 1 1 825.918,200.000 A 425.918,425.918 0 1 1 -25.918,200.000 Z M -4.622,200.000 A 404.622,404.622 0 1 0 804.622,200.000 A 404.622,404.622 0 1 0 -4.622,200.000 Z" fill="#67bfa1" 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 -25.918,200.000 A 425.918,425.918 0 1 0 825.918,200.000 A 425.918,425.918 0 1 0 -25.918,200.000 Z" fill="#65b69f" fill-opacity="1.000" /></g>
</svg>
["#dc5b5a", "#d8574c", "#d2573f", "#cc5934", "#c65e2c", "#be6527", "#b76f26", "#af7a28", "#a7862d", "#9f9335", "#97a040", "#8fac4d", "#88b75b", "#81c069", "#7ac778", "#75cb85", "#70cc90", "#6cca99", "#69c69e", "#67bfa1", "#65b69f"]
// https://grabient.com/_gKJgI6gGFgD8gDmgDxgGQgK_gL1gBXgG3gES?style=radialSwatches&steps=21&angle=180
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 21.0;
vec3 palette(float t) {
vec3 a = vec3(0.649, 0.570, 0.389);
vec3 b = vec3(0.252, 0.230, 0.241);
vec3 c = vec3(0.400, 0.703, 0.757);
vec3 d = vec3(0.087, 0.439, 0.274);
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.649, 0.570, 0.389],
[0.252, 0.230, 0.241],
[0.400, 0.703, 0.757],
[0.087, 0.439, 0.274]
]