/* https://grabient.com/_f_1f_1f_JfwYfwYf4-gPTgQBgsHgCjgAAgDgm6n0uAgA?style=angularSwatches&steps=34&angle=180 */
background: conic-gradient(from 180deg, #2c0059 0.000deg, #2c0059 10.588deg, #3f0075 calc(10.588deg + 0.1deg), #3f0075 21.176deg, #53008c calc(21.176deg + 0.1deg), #53008c 31.765deg, #68009a calc(31.765deg + 0.1deg), #68009a 42.353deg, #7d0c9b calc(42.353deg + 0.1deg), #7d0c9b 52.941deg, #921c90 calc(52.941deg + 0.1deg), #921c90 63.529deg, #a62e7a calc(63.529deg + 0.1deg), #a62e7a 74.118deg, #b8435f calc(74.118deg + 0.1deg), #b8435f 84.706deg, #c85845 calc(84.706deg + 0.1deg), #c85845 95.294deg, #d66e32 calc(95.294deg + 0.1deg), #d66e32 105.882deg, #e18429 calc(105.882deg + 0.1deg), #e18429 116.471deg, #e89a2e calc(116.471deg + 0.1deg), #e89a2e 127.059deg, #edae3f calc(127.059deg + 0.1deg), #edae3f 137.647deg, #edc058 calc(137.647deg + 0.1deg), #edc058 148.235deg, #ead073 calc(148.235deg + 0.1deg), #ead073 158.824deg, #e4dd8b calc(158.824deg + 0.1deg), #e4dd8b 169.412deg, #dae699 calc(169.412deg + 0.1deg), #dae699 180.000deg, #ceec9b calc(180.000deg + 0.1deg), #ceec9b 190.588deg, #beed90 calc(190.588deg + 0.1deg), #beed90 201.176deg, #adeb7b calc(201.176deg + 0.1deg), #adeb7b 211.765deg, #99e560 calc(211.765deg + 0.1deg), #99e560 222.353deg, #85dc46 calc(222.353deg + 0.1deg), #85dc46 232.941deg, #70cf32 calc(232.941deg + 0.1deg), #70cf32 243.529deg, #5abf2a calc(243.529deg + 0.1deg), #5abf2a 254.118deg, #46ad2e calc(254.118deg + 0.1deg), #46ad2e 264.706deg, #32993e calc(264.706deg + 0.1deg), #32993e 275.294deg, #208357 calc(275.294deg + 0.1deg), #208357 285.882deg, #116d72 calc(285.882deg + 0.1deg), #116d72 296.471deg, #03578a calc(296.471deg + 0.1deg), #03578a 307.059deg, #004199 calc(307.059deg + 0.1deg), #004199 317.647deg, #002d9b calc(317.647deg + 0.1deg), #002d9b 328.235deg, #001b91 calc(328.235deg + 0.1deg), #001b91 338.824deg, #000b7c calc(338.824deg + 0.1deg), #000b7c 349.412deg, #000061 calc(349.412deg + 0.1deg) 360.000deg);
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400" preserveAspectRatio="none">
<!-- https://grabient.com/_f_1f_1f_JfwYfwYf4-gPTgQBgsHgCjgAAgDgm6n0uAgA?style=angularSwatches&steps=34&angle=180 -->
<defs>
<clipPath id="squareClip">
<rect x="0" y="0" width="800" height="400" />
</clipPath>
<filter id="antiGap">
<feGaussianBlur in="SourceGraphic" stdDeviation="0.3" />
</filter>
</defs>
<g clip-path="url(#squareClip)" filter="url(#antiGap)" shape-rendering="crispEdges">
<path d="
M 400.000,200.000
L 400.000,647.214
A 447.214,447.214 0 0 1 317.826,639.600
Z
" fill="#2c0059" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 317.826,639.600
A 447.214,447.214 0 0 1 238.451,617.016
Z
" fill="#3f0075" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 238.451,617.016
A 447.214,447.214 0 0 1 164.570,580.228
Z
" fill="#53008c" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 164.570,580.228
A 447.214,447.214 0 0 1 98.714,530.495
Z
" fill="#68009a" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 98.714,530.495
A 447.214,447.214 0 0 1 43.116,469.508
Z
" fill="#7d0c9b" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 43.116,469.508
A 447.214,447.214 0 0 1 -0.328,399.343
Z
" fill="#921c90" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -0.328,399.343
A 447.214,447.214 0 0 1 -30.143,322.383
Z
" fill="#a62e7a" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -30.143,322.383
A 447.214,447.214 0 0 1 -45.306,241.263
Z
" fill="#b8435f" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -45.306,241.263
A 447.214,447.214 0 0 1 -45.306,158.737
Z
" fill="#c85845" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -45.306,158.737
A 447.214,447.214 0 0 1 -30.143,77.617
Z
" fill="#d66e32" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -30.143,77.617
A 447.214,447.214 0 0 1 -0.328,0.657
Z
" fill="#e18429" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -0.328,0.657
A 447.214,447.214 0 0 1 43.116,-69.508
Z
" fill="#e89a2e" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 43.116,-69.508
A 447.214,447.214 0 0 1 98.714,-130.495
Z
" fill="#edae3f" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 98.714,-130.495
A 447.214,447.214 0 0 1 164.570,-180.228
Z
" fill="#edc058" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 164.570,-180.228
A 447.214,447.214 0 0 1 238.451,-217.016
Z
" fill="#ead073" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 238.451,-217.016
A 447.214,447.214 0 0 1 317.826,-239.600
Z
" fill="#e4dd8b" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 317.826,-239.600
A 447.214,447.214 0 0 1 400.000,-247.214
Z
" fill="#dae699" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 400.000,-247.214
A 447.214,447.214 0 0 1 482.174,-239.600
Z
" fill="#ceec9b" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 482.174,-239.600
A 447.214,447.214 0 0 1 561.549,-217.016
Z
" fill="#beed90" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 561.549,-217.016
A 447.214,447.214 0 0 1 635.430,-180.228
Z
" fill="#adeb7b" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 635.430,-180.228
A 447.214,447.214 0 0 1 701.286,-130.495
Z
" fill="#99e560" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 701.286,-130.495
A 447.214,447.214 0 0 1 756.884,-69.508
Z
" fill="#85dc46" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 756.884,-69.508
A 447.214,447.214 0 0 1 800.328,0.657
Z
" fill="#70cf32" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 800.328,0.657
A 447.214,447.214 0 0 1 830.143,77.617
Z
" fill="#5abf2a" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 830.143,77.617
A 447.214,447.214 0 0 1 845.306,158.737
Z
" fill="#46ad2e" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 845.306,158.737
A 447.214,447.214 0 0 1 845.306,241.263
Z
" fill="#32993e" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 845.306,241.263
A 447.214,447.214 0 0 1 830.143,322.383
Z
" fill="#208357" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 830.143,322.383
A 447.214,447.214 0 0 1 800.328,399.343
Z
" fill="#116d72" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 800.328,399.343
A 447.214,447.214 0 0 1 756.884,469.508
Z
" fill="#03578a" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 756.884,469.508
A 447.214,447.214 0 0 1 701.286,530.495
Z
" fill="#004199" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 701.286,530.495
A 447.214,447.214 0 0 1 635.430,580.228
Z
" fill="#002d9b" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 635.430,580.228
A 447.214,447.214 0 0 1 561.549,617.016
Z
" fill="#001b91" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 561.549,617.016
A 447.214,447.214 0 0 1 482.174,639.600
Z
" fill="#000b7c" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 482.174,639.600
A 447.214,447.214 0 0 1 400.000,647.214
Z
" fill="#000061" fill-opacity="1.000" /></g>
</svg>
["#2c0059", "#3f0075", "#53008c", "#68009a", "#7d0c9b", "#921c90", "#a62e7a", "#b8435f", "#c85845", "#d66e32", "#e18429", "#e89a2e", "#edae3f", "#edc058", "#ead073", "#e4dd8b", "#dae699", "#ceec9b", "#beed90", "#adeb7b", "#99e560", "#85dc46", "#70cf32", "#5abf2a", "#46ad2e", "#32993e", "#208357", "#116d72", "#03578a", "#004199", "#002d9b", "#001b91", "#000b7c", "#000061"]
// https://grabient.com/_f_1f_1f_JfwYfwYf4-gPTgQBgsHgCjgAAgDgm6n0uAgA?style=angularSwatches&steps=34&angle=180
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 34.0;
const float ANGLE = 180.0;
vec3 palette(float t) {
vec3 a = vec3(0.431, 0.431, 0.387);
vec3 b = vec3(-0.500, -0.500, -0.225);
vec3 c = vec3(0.877, 0.918, 2.529);
vec3 d = vec3(0.163, 0.000, 0.224);
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;
// conic from ANGLE, clockwise from top (CSS convention)
float t = fract((atan(p.x, p.y) - radians(ANGLE)) / 6.283185);
fragColor = vec4(stops(t), 1.0);
}
[
[0.431, 0.431, 0.387],
[-0.500, -0.500, -0.225],
[0.877, 0.918, 2.529],
[0.163, 0.000, 0.224]
]