/* https://grabient.com/_gCYgAKf-PfrmfqUf2cgOVgOpgsPgA9f_XgAAn0n0wVgA?style=angularSwatches&steps=34&angle=180 */
background: conic-gradient(from 180deg, #0c0015 0.000deg, #0c0015 10.588deg, #1a0021 calc(10.588deg + 0.1deg), #1a0021 21.176deg, #2c0041 calc(21.176deg + 0.1deg), #2c0041 31.765deg, #43006c calc(31.765deg + 0.1deg), #43006c 42.353deg, #5d0094 calc(42.353deg + 0.1deg), #5d0094 52.941deg, #7900ad calc(52.941deg + 0.1deg), #7900ad 63.529deg, #970faf calc(63.529deg + 0.1deg), #970faf 74.118deg, #b52a99 calc(74.118deg + 0.1deg), #b52a99 84.706deg, #d34873 calc(84.706deg + 0.1deg), #d34873 95.294deg, #ef6847 calc(95.294deg + 0.1deg), #ef6847 105.882deg, #ff8825 calc(105.882deg + 0.1deg), #ff8825 116.471deg, #ffa915 calc(116.471deg + 0.1deg), #ffa915 127.059deg, #ffc81d calc(127.059deg + 0.1deg), #ffc81d 137.647deg, #ffe53b calc(137.647deg + 0.1deg), #ffe53b 148.235deg, #ffff65 calc(148.235deg + 0.1deg), #ffff65 158.824deg, #ffff8e calc(158.824deg + 0.1deg), #ffff8e 169.412deg, #ffffaa calc(169.412deg + 0.1deg), #ffffaa 180.000deg, #ffffb0 calc(180.000deg + 0.1deg), #ffffb0 190.588deg, #ffff9e calc(190.588deg + 0.1deg), #ffff9e 201.176deg, #ffff79 calc(201.176deg + 0.1deg), #ffff79 211.765deg, #ffff4e calc(211.765deg + 0.1deg), #ffff4e 222.353deg, #f6ff29 calc(222.353deg + 0.1deg), #f6ff29 232.941deg, #daff16 calc(232.941deg + 0.1deg), #daff16 243.529deg, #bcf21a calc(243.529deg + 0.1deg), #bcf21a 254.118deg, #9ed635 calc(254.118deg + 0.1deg), #9ed635 264.706deg, #80b85e calc(264.706deg + 0.1deg), #80b85e 275.294deg, #639889 calc(275.294deg + 0.1deg), #639889 285.882deg, #4977a7 calc(285.882deg + 0.1deg), #4977a7 296.471deg, #3156b1 calc(296.471deg + 0.1deg), #3156b1 307.059deg, #1e37a2 calc(307.059deg + 0.1deg), #1e37a2 317.647deg, #0f1b80 calc(317.647deg + 0.1deg), #0f1b80 328.235deg, #050254 calc(328.235deg + 0.1deg), #050254 338.824deg, #00002e calc(338.824deg + 0.1deg), #00002e 349.412deg, #010017 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/_gCYgAKf-PfrmfqUf2cgOVgOpgsPgA9f_XgAAn0n0wVgA?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="#0c0015" 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="#1a0021" 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="#2c0041" 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="#43006c" 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="#5d0094" 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="#7900ad" 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="#970faf" 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="#b52a99" 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="#d34873" 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="#ef6847" 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="#ff8825" 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="#ffa915" 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="#ffc81d" 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="#ffe53b" 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="#ffff65" 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="#ffff8e" 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="#ffffaa" 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="#ffffb0" 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="#ffff9e" 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="#ffff79" 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="#ffff4e" 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="#f6ff29" 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="#daff16" 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="#bcf21a" 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="#9ed635" 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="#80b85e" 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="#639889" 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="#4977a7" 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="#3156b1" 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="#1e37a2" 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="#0f1b80" 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="#050254" 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="#00002e" 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="#010017" fill-opacity="1.000" /></g>
</svg>
["#0c0015", "#1a0021", "#2c0041", "#43006c", "#5d0094", "#7900ad", "#970faf", "#b52a99", "#d34873", "#ef6847", "#ff8825", "#ffa915", "#ffc81d", "#ffe53b", "#ffff65", "#ffff8e", "#ffffaa", "#ffffb0", "#ffff9e", "#ffff79", "#ffff4e", "#f6ff29", "#daff16", "#bcf21a", "#9ed635", "#80b85e", "#639889", "#4977a7", "#3156b1", "#1e37a2", "#0f1b80", "#050254", "#00002e", "#010017"]
// https://grabient.com/_gCYgAKf-PfrmfqUf2cgOVgOpgsPgA9f_XgAAn0n0wVgA?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.652, 0.510, 0.387);
vec3 b = vec3(-0.653, -0.694, -0.306);
vec3 c = vec3(0.958, 0.979, 2.958);
vec3 d = vec3(0.061, -0.041, 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.652, 0.510, 0.387],
[-0.653, -0.694, -0.306],
[0.958, 0.979, 2.958],
[0.061, -0.041, 0.000]
]