/* https://grabient.com/_gAAgAAf-4gPngPngB6gPTgPTgu2f-ugA9gAAn0n0vogA?style=angularSwatches&steps=34&angle=0 */
background: conic-gradient(from 0deg, #eef67d 0.000deg, #eef67d 10.588deg, #f8eb7a calc(10.588deg + 0.1deg), #f8eb7a 21.176deg, #fedc74 calc(21.176deg + 0.1deg), #fedc74 31.765deg, #ffca6b calc(31.765deg + 0.1deg), #ffca6b 42.353deg, #fcb663 calc(42.353deg + 0.1deg), #fcb663 52.941deg, #f4a05e calc(52.941deg + 0.1deg), #f4a05e 63.529deg, #e8885e calc(63.529deg + 0.1deg), #e8885e 74.118deg, #d97163 calc(74.118deg + 0.1deg), #d97163 84.706deg, #c7596b calc(84.706deg + 0.1deg), #c7596b 95.294deg, #b24474 calc(95.294deg + 0.1deg), #b24474 105.882deg, #9c307a calc(105.882deg + 0.1deg), #9c307a 116.471deg, #841f7d calc(116.471deg + 0.1deg), #841f7d 127.059deg, #6c117a calc(127.059deg + 0.1deg), #6c117a 137.647deg, #550774 calc(137.647deg + 0.1deg), #550774 148.235deg, #40026b calc(148.235deg + 0.1deg), #40026b 158.824deg, #2c0063 calc(158.824deg + 0.1deg), #2c0063 169.412deg, #1c035e calc(169.412deg + 0.1deg), #1c035e 180.000deg, #0f0b5e calc(180.000deg + 0.1deg), #0f0b5e 190.588deg, #061663 calc(190.588deg + 0.1deg), #061663 201.176deg, #01256b calc(201.176deg + 0.1deg), #01256b 211.765deg, #003773 calc(211.765deg + 0.1deg), #003773 222.353deg, #044c7a calc(222.353deg + 0.1deg), #044c7a 232.941deg, #0c637d calc(232.941deg + 0.1deg), #0c637d 243.529deg, #197a7a calc(243.529deg + 0.1deg), #197a7a 254.118deg, #289274 calc(254.118deg + 0.1deg), #289274 264.706deg, #3ba96b calc(264.706deg + 0.1deg), #3ba96b 275.294deg, #50be63 calc(275.294deg + 0.1deg), #50be63 285.882deg, #67d25e calc(285.882deg + 0.1deg), #67d25e 296.471deg, #7ee25e calc(296.471deg + 0.1deg), #7ee25e 307.059deg, #96f063 calc(307.059deg + 0.1deg), #96f063 317.647deg, #adf96b calc(317.647deg + 0.1deg), #adf96b 328.235deg, #c2fe73 calc(328.235deg + 0.1deg), #c2fe73 338.824deg, #d5ff7a calc(338.824deg + 0.1deg), #d5ff7a 349.412deg, #e5fb7d 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/_gAAgAAf-4gPngPngB6gPTgPTgu2f-ugA9gAAn0n0vogA?style=angularSwatches&steps=34&angle=0 -->
<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,-247.214
A 447.214,447.214 0 0 1 482.174,-239.600
Z
" fill="#eef67d" 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="#f8eb7a" 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="#fedc74" 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="#ffca6b" 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="#fcb663" 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="#f4a05e" 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="#e8885e" 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="#d97163" 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="#c7596b" 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="#b24474" 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="#9c307a" 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="#841f7d" 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="#6c117a" 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="#550774" 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="#40026b" 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="#2c0063" 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="#1c035e" fill-opacity="1.000" /><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="#0f0b5e" 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="#061663" 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="#01256b" 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="#003773" 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="#044c7a" 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="#0c637d" 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="#197a7a" 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="#289274" 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="#3ba96b" 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="#50be63" 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="#67d25e" 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="#7ee25e" 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="#96f063" 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="#adf96b" 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="#c2fe73" 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="#d5ff7a" 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="#e5fb7d" fill-opacity="1.000" /></g>
</svg>
["#eef67d", "#f8eb7a", "#fedc74", "#ffca6b", "#fcb663", "#f4a05e", "#e8885e", "#d97163", "#c7596b", "#b24474", "#9c307a", "#841f7d", "#6c117a", "#550774", "#40026b", "#2c0063", "#1c035e", "#0f0b5e", "#061663", "#01256b", "#003773", "#044c7a", "#0c637d", "#197a7a", "#289274", "#3ba96b", "#50be63", "#67d25e", "#7ee25e", "#96f063", "#adf96b", "#c2fe73", "#d5ff7a", "#e5fb7d"]
// https://grabient.com/_gAAgAAf-4gPngPngB6gPTgPTgu2f-ugA9gAAn0n0vogA?style=angularSwatches&steps=34&angle=0
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 34.0;
const float ANGLE = 0.0;
vec3 palette(float t) {
vec3 a = vec3(0.500, 0.500, 0.428);
vec3 b = vec3(0.499, 0.499, 0.061);
vec3 c = vec3(0.979, 0.979, 2.998);
vec3 d = vec3(-0.082, 0.061, 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;
// 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.500, 0.500, 0.428],
[0.499, 0.499, 0.061],
[0.979, 0.979, 2.998],
[-0.082, 0.061, 0.000]
]