/* https://grabient.com/_gHCgB4gEYgH0gCMgFAgH0gH0gH0gH0gImgIIiVxjvBfg?style=radialSwatches&steps=21&angle=90 */
background: radial-gradient(circle, #0c1d12 0.000%, #0c1d12 4.762%, #0a1e12 calc(4.762% + 1px), #0a1e12 9.524%, #0a2014 calc(9.524% + 1px), #0a2014 14.286%, #0e2318 calc(14.286% + 1px), #0e2318 19.048%, #15261e calc(19.048% + 1px), #15261e 23.810%, #1f2b26 calc(23.810% + 1px), #1f2b26 28.571%, #2c3030 calc(28.571% + 1px), #2c3030 33.333%, #3b353a calc(33.333% + 1px), #3b353a 38.095%, #4c3b46 calc(38.095% + 1px), #4c3b46 42.857%, #5f4153 calc(42.857% + 1px), #5f4153 47.619%, #744761 calc(47.619% + 1px), #744761 52.381%, #894d6f calc(52.381% + 1px), #894d6f 57.143%, #9e527c calc(57.143% + 1px), #9e527c 61.905%, #b4588a calc(61.905% + 1px), #b4588a 66.667%, #c95d97 calc(66.667% + 1px), #c95d97 71.429%, #dc62a2 calc(71.429% + 1px), #dc62a2 76.190%, #ef65ad calc(76.190% + 1px), #ef65ad 80.952%, #ff68b6 calc(80.952% + 1px), #ff68b6 85.714%, #ff6bbe calc(85.714% + 1px), #ff6bbe 90.476%, #ff6cc4 calc(90.476% + 1px), #ff6cc4 95.238%, #ff6dc7 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/_gHCgB4gEYgH0gCMgFAgH0gH0gH0gH0gImgIIiVxjvBfg?style=radialSwatches&steps=21&angle=90 -->
<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="#0c1d12" 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="#0a1e12" 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="#0a2014" 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="#0e2318" 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="#15261e" 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="#1f2b26" 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="#2c3030" 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="#3b353a" 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="#4c3b46" 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="#5f4153" 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="#744761" 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="#894d6f" 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="#9e527c" 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="#b4588a" 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="#c95d97" 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="#dc62a2" 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="#ef65ad" 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="#ff68b6" 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="#ff6bbe" 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="#ff6cc4" 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="#ff6dc7" fill-opacity="1.000" /></g>
</svg>
["#0c1d12", "#0a1e12", "#0a2014", "#0e2318", "#15261e", "#1f2b26", "#2c3030", "#3b353a", "#4c3b46", "#5f4153", "#744761", "#894d6f", "#9e527c", "#b4588a", "#c95d97", "#dc62a2", "#ef65ad", "#ff68b6", "#ff6bbe", "#ff6cc4", "#ff6dc7"]
// https://grabient.com/_gHCgB4gEYgH0gCMgFAgH0gH0gH0gH0gImgIIiVxjvBfg?style=radialSwatches&steps=21&angle=90
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 21.0;
vec3 palette(float t) {
vec3 a = vec3(0.599, 0.269, 0.429);
vec3 b = vec3(0.561, 0.157, 0.359);
vec3 c = vec3(0.480, 0.480, 0.480);
vec3 d = vec3(0.468, 0.518, 0.488);
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.599, 0.269, 0.429],
[0.561, 0.157, 0.359],
[0.480, 0.480, 0.480],
[0.468, 0.518, 0.488]
]