/* https://grabient.com/_gIagH1gJDgJtgL4gIjgDFgCogDZhBdggugAAd9qw1Fag?style=angularSwatches&steps=34&angle=90 */
background: conic-gradient(from 90deg, #a05839 0.000deg, #a05839 10.588deg, #a55d3d calc(10.588deg + 0.1deg), #a55d3d 21.176deg, #aa6342 calc(21.176deg + 0.1deg), #aa6342 31.765deg, #ae6946 calc(31.765deg + 0.1deg), #ae6946 42.353deg, #b26f4b calc(42.353deg + 0.1deg), #b26f4b 52.941deg, #b67450 calc(52.941deg + 0.1deg), #b67450 63.529deg, #ba7a55 calc(63.529deg + 0.1deg), #ba7a55 74.118deg, #bd805a calc(74.118deg + 0.1deg), #bd805a 84.706deg, #c08560 calc(84.706deg + 0.1deg), #c08560 95.294deg, #c48b65 calc(95.294deg + 0.1deg), #c48b65 105.882deg, #c6906a calc(105.882deg + 0.1deg), #c6906a 116.471deg, #c99570 calc(116.471deg + 0.1deg), #c99570 127.059deg, #cb9a75 calc(127.059deg + 0.1deg), #cb9a75 137.647deg, #cea07a calc(137.647deg + 0.1deg), #cea07a 148.235deg, #cfa480 calc(148.235deg + 0.1deg), #cfa480 158.824deg, #d1a985 calc(158.824deg + 0.1deg), #d1a985 169.412deg, #d2ae8a calc(169.412deg + 0.1deg), #d2ae8a 180.000deg, #d3b38f calc(180.000deg + 0.1deg), #d3b38f 190.588deg, #d4b794 calc(190.588deg + 0.1deg), #d4b794 201.176deg, #d5bb99 calc(201.176deg + 0.1deg), #d5bb99 211.765deg, #d5bf9e calc(211.765deg + 0.1deg), #d5bf9e 222.353deg, #d5c3a3 calc(222.353deg + 0.1deg), #d5c3a3 232.941deg, #d4c7a7 calc(232.941deg + 0.1deg), #d4c7a7 243.529deg, #d4caac calc(243.529deg + 0.1deg), #d4caac 254.118deg, #d3cdb0 calc(254.118deg + 0.1deg), #d3cdb0 264.706deg, #d2d1b4 calc(264.706deg + 0.1deg), #d2d1b4 275.294deg, #d0d3b8 calc(275.294deg + 0.1deg), #d0d3b8 285.882deg, #ced6bb calc(285.882deg + 0.1deg), #ced6bb 296.471deg, #ccd8bf calc(296.471deg + 0.1deg), #ccd8bf 307.059deg, #cadbc2 calc(307.059deg + 0.1deg), #cadbc2 317.647deg, #c8ddc5 calc(317.647deg + 0.1deg), #c8ddc5 328.235deg, #c5dec7 calc(328.235deg + 0.1deg), #c5dec7 338.824deg, #c2e0ca calc(338.824deg + 0.1deg), #c2e0ca 349.412deg, #bfe1cc 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/_gIagH1gJDgJtgL4gIjgDFgCogDZhBdggugAAd9qw1Fag?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="#a05839" 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="#a55d3d" 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="#aa6342" 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="#ae6946" 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="#b26f4b" 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="#b67450" 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="#ba7a55" 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="#bd805a" 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="#c08560" 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="#c48b65" 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="#c6906a" 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="#c99570" 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="#cb9a75" 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="#cea07a" 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="#cfa480" 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="#d1a985" 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="#d2ae8a" 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="#d3b38f" 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="#d4b794" 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="#d5bb99" 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="#d5bf9e" 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="#d5c3a3" 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="#d4c7a7" 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="#d4caac" 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="#d3cdb0" 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="#d2d1b4" 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="#d0d3b8" 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="#ced6bb" 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="#ccd8bf" 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="#cadbc2" 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="#c8ddc5" 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="#c5dec7" 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="#c2e0ca" 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="#bfe1cc" fill-opacity="1.000" /></g>
</svg>
["#a05839", "#a55d3d", "#aa6342", "#ae6946", "#b26f4b", "#b67450", "#ba7a55", "#bd805a", "#c08560", "#c48b65", "#c6906a", "#c99570", "#cb9a75", "#cea07a", "#cfa480", "#d1a985", "#d2ae8a", "#d3b38f", "#d4b794", "#d5bb99", "#d5bf9e", "#d5c3a3", "#d4c7a7", "#d4caac", "#d3cdb0", "#d2d1b4", "#d0d3b8", "#ced6bb", "#ccd8bf", "#cadbc2", "#c8ddc5", "#c5dec7", "#c2e0ca", "#bfe1cc"]
// https://grabient.com/_gIagH1gJDgJtgL4gIjgDFgCogDZhBdggugAAd9qw1Fag?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.407, 0.370, 0.448);
vec3 b = vec3(0.427, 0.523, 0.376);
vec3 c = vec3(0.266, 0.227, 0.293);
vec3 d = vec3(3.837, 1.742, -0.352);
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.407, 0.370, 0.448],
[0.427, 0.523, 0.376],
[0.266, 0.227, 0.293],
[3.837, 1.742, -0.352]
]