/* https://grabient.com/_gAAgAAgAAfwYfwYf2cgPngPngu2gBRgAAgAAn0n0vogA?style=angularSwatches&steps=34&angle=180 */
background: conic-gradient(from 180deg, #100031 0.000deg, #100031 10.588deg, #1e023e calc(10.588deg + 0.1deg), #1e023e 21.176deg, #2f095f calc(21.176deg + 0.1deg), #2f095f 31.765deg, #43148b calc(31.765deg + 0.1deg), #43148b 42.353deg, #5a23b3 calc(42.353deg + 0.1deg), #5a23b3 52.941deg, #7135ca calc(52.941deg + 0.1deg), #7135ca 63.529deg, #8a4aca calc(63.529deg + 0.1deg), #8a4aca 74.118deg, #a161b3 calc(74.118deg + 0.1deg), #a161b3 84.706deg, #b8798b calc(84.706deg + 0.1deg), #b8798b 95.294deg, #cd915f calc(95.294deg + 0.1deg), #cd915f 105.882deg, #dea93e calc(105.882deg + 0.1deg), #dea93e 116.471deg, #edbf31 calc(116.471deg + 0.1deg), #edbf31 127.059deg, #f7d33e calc(127.059deg + 0.1deg), #f7d33e 137.647deg, #fde45f calc(137.647deg + 0.1deg), #fde45f 148.235deg, #fff18a calc(148.235deg + 0.1deg), #fff18a 158.824deg, #fcfab2 calc(158.824deg + 0.1deg), #fcfab2 169.412deg, #f4feca calc(169.412deg + 0.1deg), #f4feca 180.000deg, #e9fecb calc(180.000deg + 0.1deg), #e9fecb 190.588deg, #d9fab3 calc(190.588deg + 0.1deg), #d9fab3 201.176deg, #c6f18b calc(201.176deg + 0.1deg), #c6f18b 211.765deg, #b1e460 calc(211.765deg + 0.1deg), #b1e460 222.353deg, #9ad33e calc(222.353deg + 0.1deg), #9ad33e 232.941deg, #82c031 calc(232.941deg + 0.1deg), #82c031 243.529deg, #6aaa3d calc(243.529deg + 0.1deg), #6aaa3d 254.118deg, #52925e calc(254.118deg + 0.1deg), #52925e 264.706deg, #3d7a8a calc(264.706deg + 0.1deg), #3d7a8a 275.294deg, #2962b2 calc(275.294deg + 0.1deg), #2962b2 285.882deg, #194bca calc(285.882deg + 0.1deg), #194bca 296.471deg, #0d36cb calc(296.471deg + 0.1deg), #0d36cb 307.059deg, #0424b3 calc(307.059deg + 0.1deg), #0424b3 317.647deg, #00158b calc(317.647deg + 0.1deg), #00158b 328.235deg, #010960 calc(328.235deg + 0.1deg), #010960 338.824deg, #06023e calc(338.824deg + 0.1deg), #06023e 349.412deg, #100031 calc(349.412deg + 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/_gAAgAAgAAfwYfwYf2cgPngPngu2gBRgAAgAAn0n0vogA?style=angularSwatches&steps=34&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 317.826,639.600
Z
" fill="#100031" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 317.826,639.600
A 447.214,447.214 0 0 1 238.451,617.016
Z
" fill="#1e023e" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 238.451,617.016
A 447.214,447.214 0 0 1 164.570,580.228
Z
" fill="#2f095f" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 164.570,580.228
A 447.214,447.214 0 0 1 98.714,530.495
Z
" fill="#43148b" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 98.714,530.495
A 447.214,447.214 0 0 1 43.116,469.508
Z
" fill="#5a23b3" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 43.116,469.508
A 447.214,447.214 0 0 1 -0.328,399.343
Z
" fill="#7135ca" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -0.328,399.343
A 447.214,447.214 0 0 1 -30.143,322.383
Z
" fill="#8a4aca" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -30.143,322.383
A 447.214,447.214 0 0 1 -45.306,241.263
Z
" fill="#a161b3" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -45.306,241.263
A 447.214,447.214 0 0 1 -45.306,158.737
Z
" fill="#b8798b" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -45.306,158.737
A 447.214,447.214 0 0 1 -30.143,77.617
Z
" fill="#cd915f" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -30.143,77.617
A 447.214,447.214 0 0 1 -0.328,0.657
Z
" fill="#dea93e" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -0.328,0.657
A 447.214,447.214 0 0 1 43.116,-69.508
Z
" fill="#edbf31" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 43.116,-69.508
A 447.214,447.214 0 0 1 98.714,-130.495
Z
" fill="#f7d33e" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 98.714,-130.495
A 447.214,447.214 0 0 1 164.570,-180.228
Z
" fill="#fde45f" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 164.570,-180.228
A 447.214,447.214 0 0 1 238.451,-217.016
Z
" fill="#fff18a" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 238.451,-217.016
A 447.214,447.214 0 0 1 317.826,-239.600
Z
" fill="#fcfab2" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 317.826,-239.600
A 447.214,447.214 0 0 1 400.000,-247.214
Z
" fill="#f4feca" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 400.000,-247.214
A 447.214,447.214 0 0 1 482.174,-239.600
Z
" fill="#e9fecb" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 482.174,-239.600
A 447.214,447.214 0 0 1 561.549,-217.016
Z
" fill="#d9fab3" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 561.549,-217.016
A 447.214,447.214 0 0 1 635.430,-180.228
Z
" fill="#c6f18b" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 635.430,-180.228
A 447.214,447.214 0 0 1 701.286,-130.495
Z
" fill="#b1e460" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 701.286,-130.495
A 447.214,447.214 0 0 1 756.884,-69.508
Z
" fill="#9ad33e" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 756.884,-69.508
A 447.214,447.214 0 0 1 800.328,0.657
Z
" fill="#82c031" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 800.328,0.657
A 447.214,447.214 0 0 1 830.143,77.617
Z
" fill="#6aaa3d" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 830.143,77.617
A 447.214,447.214 0 0 1 845.306,158.737
Z
" fill="#52925e" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 845.306,158.737
A 447.214,447.214 0 0 1 845.306,241.263
Z
" fill="#3d7a8a" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 845.306,241.263
A 447.214,447.214 0 0 1 830.143,322.383
Z
" fill="#2962b2" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 830.143,322.383
A 447.214,447.214 0 0 1 800.328,399.343
Z
" fill="#194bca" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 800.328,399.343
A 447.214,447.214 0 0 1 756.884,469.508
Z
" fill="#0d36cb" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 756.884,469.508
A 447.214,447.214 0 0 1 701.286,530.495
Z
" fill="#0424b3" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 701.286,530.495
A 447.214,447.214 0 0 1 635.430,580.228
Z
" fill="#00158b" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 635.430,580.228
A 447.214,447.214 0 0 1 561.549,617.016
Z
" fill="#010960" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 561.549,617.016
A 447.214,447.214 0 0 1 482.174,639.600
Z
" fill="#06023e" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 482.174,639.600
A 447.214,447.214 0 0 1 400.000,647.214
Z
" fill="#100031" fill-opacity="1.000" /></g>
</svg>
["#100031", "#1e023e", "#2f095f", "#43148b", "#5a23b3", "#7135ca", "#8a4aca", "#a161b3", "#b8798b", "#cd915f", "#dea93e", "#edbf31", "#f7d33e", "#fde45f", "#fff18a", "#fcfab2", "#f4feca", "#e9fecb", "#d9fab3", "#c6f18b", "#b1e460", "#9ad33e", "#82c031", "#6aaa3d", "#52925e", "#3d7a8a", "#2962b2", "#194bca", "#0d36cb", "#0424b3", "#00158b", "#010960", "#06023e", "#100031"]
// https://grabient.com/_gAAgAAgAAfwYfwYf2cgPngPngu2gBRgAAgAAn0n0vogA?style=angularSwatches&steps=34&angle=180
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 34.0;
const float ANGLE = 180.0;
vec3 palette(float t) {
vec3 a = vec3(0.500, 0.500, 0.500);
vec3 b = vec3(-0.500, -0.500, -0.306);
vec3 c = vec3(0.999, 0.999, 2.998);
vec3 d = vec3(0.081, 0.000, 0.000);
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.500, 0.500, 0.500],
[-0.500, -0.500, -0.306],
[0.999, 0.999, 2.998],
[0.081, 0.000, 0.000]
]