/* https://grabient.com/_gHXgH0gIRgFygFegGVgMugNfgL9g7RgKahVCfppCxqgA?style=angularSwatches&steps=16&angle=156 */
background: conic-gradient(from 156deg, #816049 0.000deg, #816049 22.500deg, #937345 calc(22.500deg + 0.1deg), #937345 45.000deg, #a18849 calc(45.000deg + 0.1deg), #a18849 67.500deg, #a89b54 calc(67.500deg + 0.1deg), #a89b54 90.000deg, #a7a865 calc(90.000deg + 0.1deg), #a7a865 112.500deg, #9ead7a calc(112.500deg + 0.1deg), #9ead7a 135.000deg, #8faa8f calc(135.000deg + 0.1deg), #8faa8f 157.500deg, #7c9fa3 calc(157.500deg + 0.1deg), #7c9fa3 180.000deg, #678eb2 calc(180.000deg + 0.1deg), #678eb2 202.500deg, #5479bb calc(202.500deg + 0.1deg), #5479bb 225.000deg, #4565bc calc(225.000deg + 0.1deg), #4565bc 247.500deg, #3d54b6 calc(247.500deg + 0.1deg), #3d54b6 270.000deg, #3d49a9 calc(270.000deg + 0.1deg), #3d49a9 292.500deg, #444697 calc(292.500deg + 0.1deg), #444697 315.000deg, #534c81 calc(315.000deg + 0.1deg), #534c81 337.500deg, #66596c calc(337.500deg + 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/_gHXgH0gIRgFygFegGVgMugNfgL9g7RgKahVCfppCxqgA?style=angularSwatches&steps=16&angle=156 -->
<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 581.898,608.550
A 447.214,447.214 0 0 1 411.707,647.061
Z
" fill="#816049" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 411.707,647.061
A 447.214,447.214 0 0 1 239.733,617.510
Z
" fill="#937345" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 239.733,617.510
A 447.214,447.214 0 0 1 92.158,524.398
Z
" fill="#a18849" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 92.158,524.398
A 447.214,447.214 0 0 1 -8.550,381.898
Z
" fill="#a89b54" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -8.550,381.898
A 447.214,447.214 0 0 1 -47.061,211.707
Z
" fill="#a7a865" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -47.061,211.707
A 447.214,447.214 0 0 1 -17.510,39.733
Z
" fill="#9ead7a" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -17.510,39.733
A 447.214,447.214 0 0 1 75.602,-107.842
Z
" fill="#8faa8f" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 75.602,-107.842
A 447.214,447.214 0 0 1 218.102,-208.550
Z
" fill="#7c9fa3" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 218.102,-208.550
A 447.214,447.214 0 0 1 388.293,-247.061
Z
" fill="#678eb2" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 388.293,-247.061
A 447.214,447.214 0 0 1 560.267,-217.510
Z
" fill="#5479bb" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 560.267,-217.510
A 447.214,447.214 0 0 1 707.842,-124.398
Z
" fill="#4565bc" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 707.842,-124.398
A 447.214,447.214 0 0 1 808.550,18.102
Z
" fill="#3d54b6" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 808.550,18.102
A 447.214,447.214 0 0 1 847.061,188.293
Z
" fill="#3d49a9" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 847.061,188.293
A 447.214,447.214 0 0 1 817.510,360.267
Z
" fill="#444697" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 817.510,360.267
A 447.214,447.214 0 0 1 724.398,507.842
Z
" fill="#534c81" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 724.398,507.842
A 447.214,447.214 0 0 1 581.898,608.550
Z
" fill="#66596c" fill-opacity="1.000" /></g>
</svg>
["#816049", "#937345", "#a18849", "#a89b54", "#a7a865", "#9ead7a", "#8faa8f", "#7c9fa3", "#678eb2", "#5479bb", "#4565bc", "#3d54b6", "#3d49a9", "#444697", "#534c81", "#66596c"]
// https://grabient.com/_gHXgH0gIRgFygFegGVgMugNfgL9g7RgKahVCfppCxqgA?style=angularSwatches&steps=16&angle=156
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 16.0;
const float ANGLE = 156.0;
vec3 palette(float t) {
vec3 a = vec3(0.448, 0.477, 0.506);
vec3 b = vec3(0.214, 0.202, 0.234);
vec3 c = vec3(0.920, 0.975, 0.864);
vec3 d = vec3(3.793, 0.666, 5.442);
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.448, 0.477, 0.506],
[0.214, 0.202, 0.234],
[0.920, 0.975, 0.864],
[3.793, 0.666, 5.442]
]