/* https://grabient.com/_f-Xf6bgAUfaYfXpf2cgNGgLygsPgC3gBmgB6llmTvOgA?style=angularSwatches&steps=34&angle=180 */
background: conic-gradient(from 180deg, #000033 0.000deg, #000033 10.588deg, #00004f calc(10.588deg + 0.1deg), #00004f 21.176deg, #25006f calc(21.176deg + 0.1deg), #25006f 31.765deg, #4b008c calc(31.765deg + 0.1deg), #4b008c 42.353deg, #72009d calc(42.353deg + 0.1deg), #72009d 52.941deg, #97009d calc(52.941deg + 0.1deg), #97009d 63.529deg, #b9008d calc(63.529deg + 0.1deg), #b9008d 74.118deg, #d90d71 calc(74.118deg + 0.1deg), #d90d71 84.706deg, #f63250 calc(84.706deg + 0.1deg), #f63250 95.294deg, #ff5634 calc(95.294deg + 0.1deg), #ff5634 105.882deg, #ff7823 calc(105.882deg + 0.1deg), #ff7823 116.471deg, #ff9823 calc(116.471deg + 0.1deg), #ff9823 127.059deg, #ffb534 calc(127.059deg + 0.1deg), #ffb534 137.647deg, #ffce50 calc(137.647deg + 0.1deg), #ffce50 148.235deg, #ffe370 calc(148.235deg + 0.1deg), #ffe370 158.824deg, #fff48d calc(158.824deg + 0.1deg), #fff48d 169.412deg, #ffff9d calc(169.412deg + 0.1deg), #ffff9d 180.000deg, #ffff9d calc(180.000deg + 0.1deg), #ffff9d 190.588deg, #ecff8c calc(190.588deg + 0.1deg), #ecff8c 201.176deg, #ceff70 calc(201.176deg + 0.1deg), #ceff70 211.765deg, #adfe4f calc(211.765deg + 0.1deg), #adfe4f 222.353deg, #89f133 calc(222.353deg + 0.1deg), #89f133 232.941deg, #64df23 calc(232.941deg + 0.1deg), #64df23 243.529deg, #3dc824 calc(243.529deg + 0.1deg), #3dc824 254.118deg, #17ae34 calc(254.118deg + 0.1deg), #17ae34 264.706deg, #009151 calc(264.706deg + 0.1deg), #009151 275.294deg, #007071 calc(275.294deg + 0.1deg), #007071 285.882deg, #004d8d calc(285.882deg + 0.1deg), #004d8d 296.471deg, #00299d calc(296.471deg + 0.1deg), #00299d 307.059deg, #00049d calc(307.059deg + 0.1deg), #00049d 317.647deg, #00008c calc(317.647deg + 0.1deg), #00008c 328.235deg, #00006f calc(328.235deg + 0.1deg), #00006f 338.824deg, #00004e calc(338.824deg + 0.1deg), #00004e 349.412deg, #000032 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/_f-Xf6bgAUfaYfXpf2cgNGgLygsPgC3gBmgB6llmTvOgA?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="#000033" 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="#00004f" 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="#25006f" 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="#4b008c" 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="#72009d" 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="#97009d" 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="#b9008d" 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="#d90d71" 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="#f63250" 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="#ff5634" 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="#ff7823" 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="#ff9823" 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="#ffb534" 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="#ffce50" 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="#ffe370" 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="#fff48d" 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="#ffff9d" 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="#ffff9d" 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="#ecff8c" 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="#ceff70" 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="#adfe4f" 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="#89f133" 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="#64df23" 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="#3dc824" 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="#17ae34" 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="#009151" 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="#007071" 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="#004d8d" 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="#00299d" 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="#00049d" 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="#00008c" 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="#00006f" 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="#00004e" 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="#000032" fill-opacity="1.000" /></g>
</svg>
["#000033", "#00004f", "#25006f", "#4b008c", "#72009d", "#97009d", "#b9008d", "#d90d71", "#f63250", "#ff5634", "#ff7823", "#ff9823", "#ffb534", "#ffce50", "#ffe370", "#fff48d", "#ffff9d", "#ffff9d", "#ecff8c", "#ceff70", "#adfe4f", "#89f133", "#64df23", "#3dc824", "#17ae34", "#009151", "#007071", "#004d8d", "#00299d", "#00049d", "#00008c", "#00006f", "#00004e", "#000032"]
// https://grabient.com/_f-Xf6bgAUfaYfXpf2cgNGgLygsPgC3gBmgB6llmTvOgA?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.252, 0.000, 0.377);
vec3 b = vec3(-0.970, -1.041, -0.247);
vec3 c = vec3(0.816, 0.734, 2.757);
vec3 d = vec3(0.183, 0.102, 0.122);
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.252, 0.000, 0.377],
[-0.970, -1.041, -0.247],
[0.816, 0.734, 2.757],
[0.183, 0.102, 0.122]
]