/* https://grabient.com/_gEFgDXgDJgJSgKggKsgDsgEYgFbgAAgguhBdVv_QrXgN?style=angularSwatches&steps=34&angle=180 */
background: conic-gradient(from 180deg, #c99b00 0.000deg, #c99b00 10.588deg, #c89300 calc(10.588deg + 0.1deg), #c89300 21.176deg, #c78a00 calc(21.176deg + 0.1deg), #c78a00 31.765deg, #c58100 calc(31.765deg + 0.1deg), #c58100 42.353deg, #c37700 calc(42.353deg + 0.1deg), #c37700 52.941deg, #c16d00 calc(52.941deg + 0.1deg), #c16d00 63.529deg, #be6300 calc(63.529deg + 0.1deg), #be6300 74.118deg, #bb5800 calc(74.118deg + 0.1deg), #bb5800 84.706deg, #b84e00 calc(84.706deg + 0.1deg), #b84e00 95.294deg, #b54200 calc(95.294deg + 0.1deg), #b54200 105.882deg, #b13700 calc(105.882deg + 0.1deg), #b13700 116.471deg, #ad2b00 calc(116.471deg + 0.1deg), #ad2b00 127.059deg, #a91f00 calc(127.059deg + 0.1deg), #a91f00 137.647deg, #a41300 calc(137.647deg + 0.1deg), #a41300 148.235deg, #9f0700 calc(148.235deg + 0.1deg), #9f0700 158.824deg, #9a0000 calc(158.824deg + 0.1deg), #9a0000 169.412deg, #940000 calc(169.412deg + 0.1deg), #940000 180.000deg, #8f0000 calc(180.000deg + 0.1deg), #8f0000 190.588deg, #890000 calc(190.588deg + 0.1deg), #890000 201.176deg, #820000 calc(201.176deg + 0.1deg), #820000 211.765deg, #7c0000 calc(211.765deg + 0.1deg), #7c0000 222.353deg, #750000 calc(222.353deg + 0.1deg), #750000 232.941deg, #6e0000 calc(232.941deg + 0.1deg), #6e0000 243.529deg, #670000 calc(243.529deg + 0.1deg), #670000 254.118deg, #5f0000 calc(254.118deg + 0.1deg), #5f0000 264.706deg, #580000 calc(264.706deg + 0.1deg), #580000 275.294deg, #500000 calc(275.294deg + 0.1deg), #500000 285.882deg, #480000 calc(285.882deg + 0.1deg), #480000 296.471deg, #400000 calc(296.471deg + 0.1deg), #400000 307.059deg, #370000 calc(307.059deg + 0.1deg), #370000 317.647deg, #2f0000 calc(317.647deg + 0.1deg), #2f0000 328.235deg, #260000 calc(328.235deg + 0.1deg), #260000 338.824deg, #1d0000 calc(338.824deg + 0.1deg), #1d0000 349.412deg, #140000 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/_gEFgDXgDJgJSgKggKsgDsgEYgFbgAAgguhBdVv_QrXgN?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="#c99b00" 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="#c89300" 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="#c78a00" 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="#c58100" 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="#c37700" 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="#c16d00" 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="#be6300" 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="#bb5800" 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="#b84e00" 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="#b54200" 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="#b13700" 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="#ad2b00" 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="#a91f00" 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="#a41300" 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="#9f0700" 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="#9a0000" 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="#940000" 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="#8f0000" 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="#890000" 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="#820000" 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="#7c0000" 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="#750000" 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="#6e0000" 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="#670000" 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="#5f0000" 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="#580000" 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="#500000" 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="#480000" 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="#400000" 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="#370000" 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="#2f0000" 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="#260000" 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="#1d0000" 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="#140000" fill-opacity="1.000" /></g>
</svg>
["#c99b00", "#c89300", "#c78a00", "#c58100", "#c37700", "#c16d00", "#be6300", "#bb5800", "#b84e00", "#b54200", "#b13700", "#ad2b00", "#a91f00", "#a41300", "#9f0700", "#9a0000", "#940000", "#8f0000", "#890000", "#820000", "#7c0000", "#750000", "#6e0000", "#670000", "#5f0000", "#580000", "#500000", "#480000", "#400000", "#370000", "#2f0000", "#260000", "#1d0000", "#140000"]
// https://grabient.com/_gEFgDXgDJgJSgKggKsgDsgEYgFbgAAgguhBdVv_QrXgN?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.396, -0.442, -0.456);
vec3 b = vec3(1.188, 1.344, 1.368);
vec3 c = vec3(0.172, 0.204, 0.252);
vec3 d = vec3(0.013, 2.107, 4.202);
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.396, -0.442, -0.456],
[1.188, 1.344, 1.368],
[0.172, 0.204, 0.252],
[0.013, 2.107, 4.202]
]