/* https://grabient.com/_gJkgLzgKLgEPgCTgDZgNTgO0gNdhjehoYhtS?style=angularSwatches&steps=13&angle=45 */
background: conic-gradient(from 45deg, #6eb1dd 0.000deg, #6eb1dd 27.692deg, #5cc3d9 calc(27.692deg + 0.1deg), #5cc3d9 55.385deg, #57d4ca calc(55.385deg + 0.1deg), #57d4ca 83.077deg, #5fe1b4 calc(83.077deg + 0.1deg), #5fe1b4 110.769deg, #73e69b calc(110.769deg + 0.1deg), #73e69b 138.462deg, #8fe285 calc(138.462deg + 0.1deg), #8fe285 166.154deg, #aed675 calc(166.154deg + 0.1deg), #aed675 193.846deg, #c9c56f calc(193.846deg + 0.1deg), #c9c56f 221.538deg, #dbb274 calc(221.538deg + 0.1deg), #dbb274 249.231deg, #e1a383 calc(249.231deg + 0.1deg), #e1a383 276.923deg, #da9c99 calc(276.923deg + 0.1deg), #da9c99 304.615deg, #c69db1 calc(304.615deg + 0.1deg), #c69db1 332.308deg, #aaa7c8 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/_gJkgLzgKLgEPgCTgDZgNTgO0gNdhjehoYhtS?style=angularSwatches&steps=13&angle=45 -->
<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 716.228,-116.228
A 447.214,447.214 0 0 1 826.964,66.950
Z
" fill="#6eb1dd" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 826.964,66.950
A 447.214,447.214 0 0 1 839.888,280.616
Z
" fill="#5cc3d9" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 839.888,280.616
A 447.214,447.214 0 0 1 752.039,475.806
Z
" fill="#57d4ca" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 752.039,475.806
A 447.214,447.214 0 0 1 583.544,607.814
Z
" fill="#5fe1b4" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 583.544,607.814
A 447.214,447.214 0 0 1 372.994,646.398
Z
" fill="#73e69b" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 372.994,646.398
A 447.214,447.214 0 0 1 168.638,582.717
Z
" fill="#8fe285" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 168.638,582.717
A 447.214,447.214 0 0 1 17.283,431.362
Z
" fill="#aed675" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 17.283,431.362
A 447.214,447.214 0 0 1 -46.398,227.006
Z
" fill="#c9c56f" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -46.398,227.006
A 447.214,447.214 0 0 1 -7.814,16.456
Z
" fill="#dbb274" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -7.814,16.456
A 447.214,447.214 0 0 1 124.194,-152.039
Z
" fill="#e1a383" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 124.194,-152.039
A 447.214,447.214 0 0 1 319.384,-239.888
Z
" fill="#da9c99" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 319.384,-239.888
A 447.214,447.214 0 0 1 533.050,-226.964
Z
" fill="#c69db1" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 533.050,-226.964
A 447.214,447.214 0 0 1 716.228,-116.228
Z
" fill="#aaa7c8" fill-opacity="1.000" /></g>
</svg>
["#6eb1dd", "#5cc3d9", "#57d4ca", "#5fe1b4", "#73e69b", "#8fe285", "#aed675", "#c9c56f", "#dbb274", "#e1a383", "#da9c99", "#c69db1", "#aaa7c8"]
// https://grabient.com/_gJkgLzgKLgEPgCTgDZgNTgO0gNdhjehoYhtS?style=angularSwatches&steps=13&angle=45
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 13.0;
const float ANGLE = 45.0;
vec3 palette(float t) {
vec3 a = vec3(0.612, 0.755, 0.651);
vec3 b = vec3(0.271, 0.147, 0.217);
vec3 c = vec3(0.851, 0.948, 0.861);
vec3 d = vec3(6.366, 6.680, 6.994);
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.612, 0.755, 0.651],
[0.271, 0.147, 0.217],
[0.851, 0.948, 0.861],
[6.366, 6.680, 6.994]
]