/* https://grabient.com/_gKvgDggHlf7CgHyf7Yf2egDzf6NgUVf_tgGI?style=angularSwatches&steps=13&angle=225 */
background: conic-gradient(from 225deg, #c9b7b6 0.000deg, #c9b7b6 27.692deg, #afb8ac calc(27.692deg + 0.1deg), #afb8ac 55.385deg, #96b7a0 calc(55.385deg + 0.1deg), #96b7a0 83.077deg, #7fb493 calc(83.077deg + 0.1deg), #7fb493 110.769deg, #6daf84 calc(110.769deg + 0.1deg), #6daf84 138.462deg, #62a876 calc(138.462deg + 0.1deg), #62a876 166.154deg, #5e9f67 calc(166.154deg + 0.1deg), #5e9f67 193.846deg, #63945a calc(193.846deg + 0.1deg), #63945a 221.538deg, #6f884d calc(221.538deg + 0.1deg), #6f884d 249.231deg, #827b43 calc(249.231deg + 0.1deg), #827b43 276.923deg, #9a6d3a calc(276.923deg + 0.1deg), #9a6d3a 304.615deg, #b35e34 calc(304.615deg + 0.1deg), #b35e34 332.308deg, #cd4e31 calc(332.308deg + 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/_gKvgDggHlf7CgHyf7Yf2egDzf6NgUVf_tgGI?style=angularSwatches&steps=13&angle=225 -->
<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 83.772,516.228
A 447.214,447.214 0 0 1 -26.964,333.050
Z
" fill="#c9b7b6" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -26.964,333.050
A 447.214,447.214 0 0 1 -39.888,119.384
Z
" fill="#afb8ac" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -39.888,119.384
A 447.214,447.214 0 0 1 47.961,-75.806
Z
" fill="#96b7a0" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 47.961,-75.806
A 447.214,447.214 0 0 1 216.456,-207.814
Z
" fill="#7fb493" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 216.456,-207.814
A 447.214,447.214 0 0 1 427.006,-246.398
Z
" fill="#6daf84" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 427.006,-246.398
A 447.214,447.214 0 0 1 631.362,-182.717
Z
" fill="#62a876" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 631.362,-182.717
A 447.214,447.214 0 0 1 782.717,-31.362
Z
" fill="#5e9f67" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 782.717,-31.362
A 447.214,447.214 0 0 1 846.398,172.994
Z
" fill="#63945a" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 846.398,172.994
A 447.214,447.214 0 0 1 807.814,383.544
Z
" fill="#6f884d" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 807.814,383.544
A 447.214,447.214 0 0 1 675.806,552.039
Z
" fill="#827b43" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 675.806,552.039
A 447.214,447.214 0 0 1 480.616,639.888
Z
" fill="#9a6d3a" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 480.616,639.888
A 447.214,447.214 0 0 1 266.950,626.964
Z
" fill="#b35e34" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 266.950,626.964
A 447.214,447.214 0 0 1 83.772,516.228
Z
" fill="#cd4e31" fill-opacity="1.000" /></g>
</svg>
["#c9b7b6", "#afb8ac", "#96b7a0", "#7fb493", "#6daf84", "#62a876", "#5e9f67", "#63945a", "#6f884d", "#827b43", "#9a6d3a", "#b35e34", "#cd4e31"]
// https://grabient.com/_gKvgDggHlf7CgHyf7Yf2egDzf6NgUVf_tgGI?style=angularSwatches&steps=13&angle=225
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 13.0;
const float ANGLE = 225.0;
vec3 palette(float t) {
vec3 a = vec3(0.687, 0.224, 0.485);
vec3 b = vec3(-0.318, 0.498, -0.296);
vec3 c = vec3(-0.610, 0.243, -0.371);
vec3 d = vec3(1.301, -0.019, 0.392);
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.687, 0.224, 0.485],
[-0.318, 0.498, -0.296],
[-0.610, 0.243, -0.371],
[1.301, -0.019, 0.392]
]