/* https://grabient.com/_gJKgH4gI_gIJgG4gITgF4gHWgFVgFrgFXgGR?style=angularSwatches&steps=34&angle=90 */
background: conic-gradient(from 90deg, #3f4325 0.000deg, #3f4325 10.588deg, #383b20 calc(10.588deg + 0.1deg), #383b20 21.176deg, #31331b calc(21.176deg + 0.1deg), #31331b 31.765deg, #2b2c17 calc(31.765deg + 0.1deg), #2b2c17 42.353deg, #262614 calc(42.353deg + 0.1deg), #262614 52.941deg, #212011 calc(52.941deg + 0.1deg), #212011 63.529deg, #1d1b0f calc(63.529deg + 0.1deg), #1d1b0f 74.118deg, #19180d calc(74.118deg + 0.1deg), #19180d 84.706deg, #16140c calc(84.706deg + 0.1deg), #16140c 95.294deg, #14120b calc(95.294deg + 0.1deg), #14120b 105.882deg, #12110b calc(105.882deg + 0.1deg), #12110b 116.471deg, #11100c calc(116.471deg + 0.1deg), #11100c 127.059deg, #11110d calc(127.059deg + 0.1deg), #11110d 137.647deg, #11120f calc(137.647deg + 0.1deg), #11120f 148.235deg, #121411 calc(148.235deg + 0.1deg), #121411 158.824deg, #141714 calc(158.824deg + 0.1deg), #141714 169.412deg, #161b17 calc(169.412deg + 0.1deg), #161b17 180.000deg, #19201b calc(180.000deg + 0.1deg), #19201b 190.588deg, #1d251f calc(190.588deg + 0.1deg), #1d251f 201.176deg, #212c24 calc(201.176deg + 0.1deg), #212c24 211.765deg, #263329 calc(211.765deg + 0.1deg), #263329 222.353deg, #2b3a2f calc(222.353deg + 0.1deg), #2b3a2f 232.941deg, #314235 calc(232.941deg + 0.1deg), #314235 243.529deg, #384b3b calc(243.529deg + 0.1deg), #384b3b 254.118deg, #3e5442 calc(254.118deg + 0.1deg), #3e5442 264.706deg, #465d4a calc(264.706deg + 0.1deg), #465d4a 275.294deg, #4e6751 calc(275.294deg + 0.1deg), #4e6751 285.882deg, #567159 calc(285.882deg + 0.1deg), #567159 296.471deg, #5e7b61 calc(296.471deg + 0.1deg), #5e7b61 307.059deg, #678569 calc(307.059deg + 0.1deg), #678569 317.647deg, #708f72 calc(317.647deg + 0.1deg), #708f72 328.235deg, #79997a calc(328.235deg + 0.1deg), #79997a 338.824deg, #83a283 calc(338.824deg + 0.1deg), #83a283 349.412deg, #8cac8c 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/_gJKgH4gI_gIJgG4gITgF4gHWgFVgFrgFXgGR?style=angularSwatches&steps=34&angle=90 -->
<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 847.214,200.000
A 447.214,447.214 0 0 1 839.600,282.174
Z
" fill="#3f4325" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 839.600,282.174
A 447.214,447.214 0 0 1 817.016,361.549
Z
" fill="#383b20" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 817.016,361.549
A 447.214,447.214 0 0 1 780.228,435.430
Z
" fill="#31331b" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 780.228,435.430
A 447.214,447.214 0 0 1 730.495,501.286
Z
" fill="#2b2c17" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 730.495,501.286
A 447.214,447.214 0 0 1 669.508,556.884
Z
" fill="#262614" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 669.508,556.884
A 447.214,447.214 0 0 1 599.343,600.328
Z
" fill="#212011" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 599.343,600.328
A 447.214,447.214 0 0 1 522.383,630.143
Z
" fill="#1d1b0f" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 522.383,630.143
A 447.214,447.214 0 0 1 441.263,645.306
Z
" fill="#19180d" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 441.263,645.306
A 447.214,447.214 0 0 1 358.737,645.306
Z
" fill="#16140c" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 358.737,645.306
A 447.214,447.214 0 0 1 277.617,630.143
Z
" fill="#14120b" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 277.617,630.143
A 447.214,447.214 0 0 1 200.657,600.328
Z
" fill="#12110b" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 200.657,600.328
A 447.214,447.214 0 0 1 130.492,556.884
Z
" fill="#11100c" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 130.492,556.884
A 447.214,447.214 0 0 1 69.505,501.286
Z
" fill="#11110d" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 69.505,501.286
A 447.214,447.214 0 0 1 19.772,435.430
Z
" fill="#11120f" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 19.772,435.430
A 447.214,447.214 0 0 1 -17.016,361.549
Z
" fill="#121411" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -17.016,361.549
A 447.214,447.214 0 0 1 -39.600,282.174
Z
" fill="#141714" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -39.600,282.174
A 447.214,447.214 0 0 1 -47.214,200.000
Z
" fill="#161b17" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -47.214,200.000
A 447.214,447.214 0 0 1 -39.600,117.826
Z
" fill="#19201b" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -39.600,117.826
A 447.214,447.214 0 0 1 -17.016,38.451
Z
" fill="#1d251f" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -17.016,38.451
A 447.214,447.214 0 0 1 19.772,-35.430
Z
" fill="#212c24" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 19.772,-35.430
A 447.214,447.214 0 0 1 69.505,-101.286
Z
" fill="#263329" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 69.505,-101.286
A 447.214,447.214 0 0 1 130.492,-156.884
Z
" fill="#2b3a2f" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 130.492,-156.884
A 447.214,447.214 0 0 1 200.657,-200.328
Z
" fill="#314235" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 200.657,-200.328
A 447.214,447.214 0 0 1 277.617,-230.143
Z
" fill="#384b3b" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 277.617,-230.143
A 447.214,447.214 0 0 1 358.737,-245.306
Z
" fill="#3e5442" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 358.737,-245.306
A 447.214,447.214 0 0 1 441.263,-245.306
Z
" fill="#465d4a" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 441.263,-245.306
A 447.214,447.214 0 0 1 522.383,-230.143
Z
" fill="#4e6751" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 522.383,-230.143
A 447.214,447.214 0 0 1 599.343,-200.328
Z
" fill="#567159" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 599.343,-200.328
A 447.214,447.214 0 0 1 669.508,-156.884
Z
" fill="#5e7b61" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 669.508,-156.884
A 447.214,447.214 0 0 1 730.495,-101.286
Z
" fill="#678569" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 730.495,-101.286
A 447.214,447.214 0 0 1 780.228,-35.430
Z
" fill="#708f72" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 780.228,-35.430
A 447.214,447.214 0 0 1 817.016,38.451
Z
" fill="#79997a" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 817.016,38.451
A 447.214,447.214 0 0 1 839.600,117.826
Z
" fill="#83a283" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 839.600,117.826
A 447.214,447.214 0 0 1 847.214,200.000
Z
" fill="#8cac8c" fill-opacity="1.000" /></g>
</svg>
["#3f4325", "#383b20", "#31331b", "#2b2c17", "#262614", "#212011", "#1d1b0f", "#19180d", "#16140c", "#14120b", "#12110b", "#11100c", "#11110d", "#11120f", "#121411", "#141714", "#161b17", "#19201b", "#1d251f", "#212c24", "#263329", "#2b3a2f", "#314235", "#384b3b", "#3e5442", "#465d4a", "#4e6751", "#567159", "#5e7b61", "#678569", "#708f72", "#79997a", "#83a283", "#8cac8c"]
// https://grabient.com/_gJKgH4gI_gIJgG4gITgF4gHWgFVgFrgFXgGR?style=angularSwatches&steps=34&angle=90
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 34.0;
const float ANGLE = 90.0;
vec3 palette(float t) {
vec3 a = vec3(0.586, 0.504, 0.575);
vec3 b = vec3(0.521, 0.440, 0.531);
vec3 c = vec3(0.376, 0.470, 0.341);
vec3 d = vec3(0.363, 0.343, 0.401);
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.586, 0.504, 0.575],
[0.521, 0.440, 0.531],
[0.376, 0.470, 0.341],
[0.363, 0.343, 0.401]
]