/* https://grabient.com/_gFtgK_gLagChgCDgCmgL5gPIgJagPYgGPgJD?style=angularSwatches&steps=21&angle=180 */
background: conic-gradient(from 180deg, #869895 0.000deg, #869895 17.143deg, #869499 calc(17.143deg + 0.1deg), #869499 34.286deg, #83929f calc(34.286deg + 0.1deg), #83929f 51.429deg, #7f93a6 calc(51.429deg + 0.1deg), #7f93a6 68.571deg, #7897ad calc(68.571deg + 0.1deg), #7897ad 85.714deg, #709eb5 calc(85.714deg + 0.1deg), #709eb5 102.857deg, #67a7bd calc(102.857deg + 0.1deg), #67a7bd 120.000deg, #5db1c5 calc(120.000deg + 0.1deg), #5db1c5 137.143deg, #53bbcc calc(137.143deg + 0.1deg), #53bbcc 154.286deg, #4ac4d3 calc(154.286deg + 0.1deg), #4ac4d3 171.429deg, #42ccd9 calc(171.429deg + 0.1deg), #42ccd9 188.571deg, #3bd2de calc(188.571deg + 0.1deg), #3bd2de 205.714deg, #37d4e2 calc(205.714deg + 0.1deg), #37d4e2 222.857deg, #34d4e4 calc(222.857deg + 0.1deg), #34d4e4 240.000deg, #34d1e4 calc(240.000deg + 0.1deg), #34d1e4 257.143deg, #36cbe4 calc(257.143deg + 0.1deg), #36cbe4 274.286deg, #3bc3e1 calc(274.286deg + 0.1deg), #3bc3e1 291.429deg, #41b9de calc(291.429deg + 0.1deg), #41b9de 308.571deg, #49afd9 calc(308.571deg + 0.1deg), #49afd9 325.714deg, #52a5d3 calc(325.714deg + 0.1deg), #52a5d3 342.857deg, #5c9dcc calc(342.857deg + 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/_gFtgK_gLagChgCDgCmgL5gPIgJagPYgGPgJD?style=angularSwatches&steps=21&angle=180 -->
<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 400.000,647.214
A 447.214,447.214 0 0 1 268.180,627.345
Z
" fill="#869895" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 268.180,627.345
A 447.214,447.214 0 0 1 148.074,569.504
Z
" fill="#869499" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 148.074,569.504
A 447.214,447.214 0 0 1 50.352,478.831
Z
" fill="#83929f" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 50.352,478.831
A 447.214,447.214 0 0 1 -16.299,363.389
Z
" fill="#7f93a6" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -16.299,363.389
A 447.214,447.214 0 0 1 -45.963,233.423
Z
" fill="#7897ad" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -45.963,233.423
A 447.214,447.214 0 0 1 -36.002,100.487
Z
" fill="#709eb5" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -36.002,100.487
A 447.214,447.214 0 0 1 12.701,-23.607
Z
" fill="#67a7bd" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 12.701,-23.607
A 447.214,447.214 0 0 1 95.818,-127.832
Z
" fill="#5db1c5" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 95.818,-127.832
A 447.214,447.214 0 0 1 205.963,-202.927
Z
" fill="#53bbcc" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 205.963,-202.927
A 447.214,447.214 0 0 1 333.350,-242.219
Z
" fill="#4ac4d3" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 333.350,-242.219
A 447.214,447.214 0 0 1 466.650,-242.219
Z
" fill="#42ccd9" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 466.650,-242.219
A 447.214,447.214 0 0 1 594.037,-202.927
Z
" fill="#3bd2de" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 594.037,-202.927
A 447.214,447.214 0 0 1 704.182,-127.832
Z
" fill="#37d4e2" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 704.182,-127.832
A 447.214,447.214 0 0 1 787.299,-23.607
Z
" fill="#34d4e4" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 787.299,-23.607
A 447.214,447.214 0 0 1 836.002,100.487
Z
" fill="#34d1e4" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 836.002,100.487
A 447.214,447.214 0 0 1 845.963,233.423
Z
" fill="#36cbe4" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 845.963,233.423
A 447.214,447.214 0 0 1 816.299,363.389
Z
" fill="#3bc3e1" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 816.299,363.389
A 447.214,447.214 0 0 1 749.648,478.831
Z
" fill="#41b9de" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 749.648,478.831
A 447.214,447.214 0 0 1 651.926,569.504
Z
" fill="#49afd9" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 651.926,569.504
A 447.214,447.214 0 0 1 531.820,627.345
Z
" fill="#52a5d3" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 531.820,627.345
A 447.214,447.214 0 0 1 400.000,647.214
Z
" fill="#5c9dcc" fill-opacity="1.000" /></g>
</svg>
["#869895", "#869499", "#83929f", "#7f93a6", "#7897ad", "#709eb5", "#67a7bd", "#5db1c5", "#53bbcc", "#4ac4d3", "#42ccd9", "#3bd2de", "#37d4e2", "#34d4e4", "#34d1e4", "#36cbe4", "#3bc3e1", "#41b9de", "#49afd9", "#52a5d3", "#5c9dcc"]
// https://grabient.com/_gFtgK_gLagChgCDgCmgL5gPIgJagPYgGPgJD?style=angularSwatches&steps=21&angle=180
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 21.0;
const float ANGLE = 180.0;
vec3 palette(float t) {
vec3 a = vec3(0.365, 0.703, 0.730);
vec3 b = vec3(0.161, 0.131, 0.166);
vec3 c = vec3(0.761, 0.968, 0.602);
vec3 d = vec3(0.984, 0.399, 0.579);
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.365, 0.703, 0.730],
[0.161, 0.131, 0.166],
[0.761, 0.968, 0.602],
[0.984, 0.399, 0.579]
]