/* https://grabient.com/_gEngEngEngFigFRgFMgJjgJMgJUhNtgckg6xeRwItnRE?style=angularSwatches&steps=34&angle=90 */
background: conic-gradient(from 90deg, #8c6c4d 0.000deg, #8c6c4d 10.588deg, #8a7254 calc(10.588deg + 0.1deg), #8a7254 21.176deg, #88785c calc(21.176deg + 0.1deg), #88785c 31.765deg, #847c63 calc(31.765deg + 0.1deg), #847c63 42.353deg, #80806a calc(42.353deg + 0.1deg), #80806a 52.941deg, #7b8370 calc(52.941deg + 0.1deg), #7b8370 63.529deg, #758575 calc(63.529deg + 0.1deg), #758575 74.118deg, #6f877a calc(74.118deg + 0.1deg), #6f877a 84.706deg, #68887e calc(84.706deg + 0.1deg), #68887e 95.294deg, #608781 calc(95.294deg + 0.1deg), #608781 105.882deg, #588684 calc(105.882deg + 0.1deg), #588684 116.471deg, #4f8485 calc(116.471deg + 0.1deg), #4f8485 127.059deg, #468286 calc(127.059deg + 0.1deg), #468286 137.647deg, #3d7e86 calc(137.647deg + 0.1deg), #3d7e86 148.235deg, #337a85 calc(148.235deg + 0.1deg), #337a85 158.824deg, #2a7583 calc(158.824deg + 0.1deg), #2a7583 169.412deg, #206f81 calc(169.412deg + 0.1deg), #206f81 180.000deg, #17697d calc(180.000deg + 0.1deg), #17697d 190.588deg, #0e6279 calc(190.588deg + 0.1deg), #0e6279 201.176deg, #055b74 calc(201.176deg + 0.1deg), #055b74 211.765deg, #00536f calc(211.765deg + 0.1deg), #00536f 222.353deg, #004b69 calc(222.353deg + 0.1deg), #004b69 232.941deg, #004362 calc(232.941deg + 0.1deg), #004362 243.529deg, #003b5b calc(243.529deg + 0.1deg), #003b5b 254.118deg, #003253 calc(254.118deg + 0.1deg), #003253 264.706deg, #00294b calc(264.706deg + 0.1deg), #00294b 275.294deg, #002143 calc(275.294deg + 0.1deg), #002143 285.882deg, #00183a calc(285.882deg + 0.1deg), #00183a 296.471deg, #001031 calc(296.471deg + 0.1deg), #001031 307.059deg, #000829 calc(307.059deg + 0.1deg), #000829 317.647deg, #000120 calc(317.647deg + 0.1deg), #000120 328.235deg, #000018 calc(328.235deg + 0.1deg), #000018 338.824deg, #000010 calc(338.824deg + 0.1deg), #000010 349.412deg, #000008 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/_gEngEngEngFigFRgFMgJjgJMgJUhNtgckg6xeRwItnRE?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="#8c6c4d" 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="#8a7254" 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="#88785c" 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="#847c63" 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="#80806a" 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="#7b8370" 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="#758575" 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="#6f877a" 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="#68887e" 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="#608781" 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="#588684" 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="#4f8485" 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="#468286" 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="#3d7e86" 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="#337a85" 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="#2a7583" 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="#206f81" 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="#17697d" 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="#0e6279" 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="#055b74" 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="#00536f" 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="#004b69" 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="#004362" 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="#003b5b" 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="#003253" 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="#00294b" 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="#002143" 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="#00183a" 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="#001031" 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="#000829" 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="#000120" 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="#000018" 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="#000010" 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="#000008" fill-opacity="1.000" /></g>
</svg>
["#8c6c4d", "#8a7254", "#88785c", "#847c63", "#80806a", "#7b8370", "#758575", "#6f877a", "#68887e", "#608781", "#588684", "#4f8485", "#468286", "#3d7e86", "#337a85", "#2a7583", "#206f81", "#17697d", "#0e6279", "#055b74", "#00536f", "#004b69", "#004362", "#003b5b", "#003253", "#00294b", "#002143", "#00183a", "#001031", "#000829", "#000120", "#000018", "#000010", "#000008"]
// https://grabient.com/_gEngEngEngFigFRgFMgJjgJMgJUhNtgckg6xeRwItnRE?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.184, 0.184, 0.184);
vec3 b = vec3(0.365, 0.348, 0.343);
vec3 c = vec3(0.532, 0.512, 0.519);
vec3 d = vec3(4.017, 0.872, 2.805);
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.184, 0.184, 0.184],
[0.365, 0.348, 0.343],
[0.532, 0.512, 0.519],
[4.017, 0.872, 2.805]
]