/* https://grabient.com/_gGagMPgJwgQAgELgCZgKvgH_gIbhrYhuphD6?style=angularSwatches&steps=26&angle=300 */
background: conic-gradient(from 300deg, #ffff89 0.000deg, #ffff89 13.846deg, #fffe85 calc(13.846deg + 0.1deg), #fffe85 27.692deg, #fff981 calc(27.692deg + 0.1deg), #fff981 41.538deg, #fff27e calc(41.538deg + 0.1deg), #fff27e 55.385deg, #ffeb7c calc(55.385deg + 0.1deg), #ffeb7c 69.231deg, #ffe37a calc(69.231deg + 0.1deg), #ffe37a 83.077deg, #ffdb79 calc(83.077deg + 0.1deg), #ffdb79 96.923deg, #ffd378 calc(96.923deg + 0.1deg), #ffd378 110.769deg, #ffca78 calc(110.769deg + 0.1deg), #ffca78 124.615deg, #ffc179 calc(124.615deg + 0.1deg), #ffc179 138.462deg, #ffb97b calc(138.462deg + 0.1deg), #ffb97b 152.308deg, #e0b07d calc(152.308deg + 0.1deg), #e0b07d 166.154deg, #b6a880 calc(166.154deg + 0.1deg), #b6a880 180.000deg, #8ba184 calc(180.000deg + 0.1deg), #8ba184 193.846deg, #5e9a88 calc(193.846deg + 0.1deg), #5e9a88 207.692deg, #31948c calc(207.692deg + 0.1deg), #31948c 221.538deg, #068f91 calc(221.538deg + 0.1deg), #068f91 235.385deg, #008a96 calc(235.385deg + 0.1deg), #008a96 249.231deg, #00879b calc(249.231deg + 0.1deg), #00879b 263.077deg, #0085a1 calc(263.077deg + 0.1deg), #0085a1 276.923deg, #0084a6 calc(276.923deg + 0.1deg), #0084a6 290.769deg, #0084ab calc(290.769deg + 0.1deg), #0084ab 304.615deg, #0085b0 calc(304.615deg + 0.1deg), #0085b0 318.462deg, #0087b4 calc(318.462deg + 0.1deg), #0087b4 332.308deg, #008ab9 calc(332.308deg + 0.1deg), #008ab9 346.154deg, #008fbc calc(346.154deg + 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/_gGagMPgJwgQAgELgCZgKvgH_gIbhrYhuphD6?style=angularSwatches&steps=26&angle=300 -->
<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 12.701,-23.607
A 447.214,447.214 0 0 1 77.467,-109.795
Z
" fill="#ffff89" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 77.467,-109.795
A 447.214,447.214 0 0 1 160.977,-177.980
Z
" fill="#fffe85" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 160.977,-177.980
A 447.214,447.214 0 0 1 258.378,-224.198
Z
" fill="#fff981" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 258.378,-224.198
A 447.214,447.214 0 0 1 364.017,-245.764
Z
" fill="#fff27e" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 364.017,-245.764
A 447.214,447.214 0 0 1 471.740,-241.422
Z
" fill="#ffeb7c" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 471.740,-241.422
A 447.214,447.214 0 0 1 575.294,-211.427
Z
" fill="#ffe37a" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 575.294,-211.427
A 447.214,447.214 0 0 1 668.660,-157.522
Z
" fill="#ffdb79" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 668.660,-157.522
A 447.214,447.214 0 0 1 746.413,-82.840
Z
" fill="#ffd378" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 746.413,-82.840
A 447.214,447.214 0 0 1 804.034,8.280
Z
" fill="#ffca78" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 804.034,8.280
A 447.214,447.214 0 0 1 838.177,110.549
Z
" fill="#ffc179" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 838.177,110.549
A 447.214,447.214 0 0 1 846.851,218.010
Z
" fill="#ffb97b" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 846.851,218.010
A 447.214,447.214 0 0 1 829.557,324.424
Z
" fill="#e0b07d" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 829.557,324.424
A 447.214,447.214 0 0 1 787.299,423.607
Z
" fill="#b6a880" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 787.299,423.607
A 447.214,447.214 0 0 1 722.533,509.795
Z
" fill="#8ba184" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 722.533,509.795
A 447.214,447.214 0 0 1 639.023,577.980
Z
" fill="#5e9a88" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 639.023,577.980
A 447.214,447.214 0 0 1 541.622,624.198
Z
" fill="#31948c" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 541.622,624.198
A 447.214,447.214 0 0 1 435.983,645.764
Z
" fill="#068f91" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 435.983,645.764
A 447.214,447.214 0 0 1 328.260,641.422
Z
" fill="#008a96" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 328.260,641.422
A 447.214,447.214 0 0 1 224.706,611.427
Z
" fill="#00879b" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 224.706,611.427
A 447.214,447.214 0 0 1 131.340,557.522
Z
" fill="#0085a1" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 131.340,557.522
A 447.214,447.214 0 0 1 53.587,482.840
Z
" fill="#0084a6" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 53.587,482.840
A 447.214,447.214 0 0 1 -4.034,391.720
Z
" fill="#0084ab" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -4.034,391.720
A 447.214,447.214 0 0 1 -38.177,289.451
Z
" fill="#0085b0" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -38.177,289.451
A 447.214,447.214 0 0 1 -46.851,181.990
Z
" fill="#0087b4" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -46.851,181.990
A 447.214,447.214 0 0 1 -29.557,75.576
Z
" fill="#008ab9" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -29.557,75.576
A 447.214,447.214 0 0 1 12.701,-23.607
Z
" fill="#008fbc" fill-opacity="1.000" /></g>
</svg>
["#ffff89", "#fffe85", "#fff981", "#fff27e", "#ffeb7c", "#ffe37a", "#ffdb79", "#ffd378", "#ffca78", "#ffc179", "#ffb97b", "#e0b07d", "#b6a880", "#8ba184", "#5e9a88", "#31948c", "#068f91", "#008a96", "#00879b", "#0085a1", "#0084a6", "#0084ab", "#0085b0", "#0087b4", "#008ab9", "#008fbc"]
// https://grabient.com/_gGagMPgJwgQAgELgCZgKvgH_gIbhrYhuphD6?style=angularSwatches&steps=26&angle=300
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 26.0;
const float ANGLE = 300.0;
vec3 palette(float t) {
vec3 a = vec3(0.410, 0.783, 0.624);
vec3 b = vec3(1.024, 0.267, 0.153);
vec3 c = vec3(0.687, 0.511, 0.539);
vec3 d = vec3(6.872, 7.081, 4.346);
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.410, 0.783, 0.624],
[1.024, 0.267, 0.153],
[0.687, 0.511, 0.539],
[6.872, 7.081, 4.346]
]