/* https://grabient.com/_gAAgAAf_1fwYfwYf7igPTgPTgt5gB6gAAgAAn0n0vogA?style=angularSwatches&steps=34&angle=180 */
background: conic-gradient(from 180deg, #240058 0.000deg, #240058 10.588deg, #36025e calc(10.588deg + 0.1deg), #36025e 21.176deg, #4a096d calc(21.176deg + 0.1deg), #4a096d 31.765deg, #611381 calc(31.765deg + 0.1deg), #611381 42.353deg, #782293 calc(42.353deg + 0.1deg), #782293 52.941deg, #90339f calc(52.941deg + 0.1deg), #90339f 63.529deg, #a748a0 calc(63.529deg + 0.1deg), #a748a0 74.118deg, #bd5e97 calc(74.118deg + 0.1deg), #bd5e97 84.706deg, #d07585 calc(84.706deg + 0.1deg), #d07585 95.294deg, #e18d71 calc(95.294deg + 0.1deg), #e18d71 105.882deg, #efa461 calc(105.882deg + 0.1deg), #efa461 116.471deg, #f8ba59 calc(116.471deg + 0.1deg), #f8ba59 127.059deg, #fece5c calc(127.059deg + 0.1deg), #fece5c 137.647deg, #ffdf69 calc(137.647deg + 0.1deg), #ffdf69 148.235deg, #fced7c calc(148.235deg + 0.1deg), #fced7c 158.824deg, #f4f78f calc(158.824deg + 0.1deg), #f4f78f 169.412deg, #e8fd9d calc(169.412deg + 0.1deg), #e8fd9d 180.000deg, #d9ffa1 calc(180.000deg + 0.1deg), #d9ffa1 190.588deg, #c7fc9a calc(190.588deg + 0.1deg), #c7fc9a 201.176deg, #b2f58a calc(201.176deg + 0.1deg), #b2f58a 211.765deg, #9bea76 calc(211.765deg + 0.1deg), #9bea76 222.353deg, #84db64 calc(222.353deg + 0.1deg), #84db64 232.941deg, #6cc959 calc(232.941deg + 0.1deg), #6cc959 243.529deg, #55b45a calc(243.529deg + 0.1deg), #55b45a 254.118deg, #3f9e65 calc(254.118deg + 0.1deg), #3f9e65 264.706deg, #2c8677 calc(264.706deg + 0.1deg), #2c8677 275.294deg, #1c6e8b calc(275.294deg + 0.1deg), #1c6e8b 285.882deg, #0f579b calc(285.882deg + 0.1deg), #0f579b 296.471deg, #0642a1 calc(296.471deg + 0.1deg), #0642a1 307.059deg, #012e9d calc(307.059deg + 0.1deg), #012e9d 317.647deg, #001d8e calc(317.647deg + 0.1deg), #001d8e 328.235deg, #04107b calc(328.235deg + 0.1deg), #04107b 338.824deg, #0d0668 calc(338.824deg + 0.1deg), #0d0668 349.412deg, #19015b 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/_gAAgAAf_1fwYfwYf7igPTgPTgt5gB6gAAgAAn0n0vogA?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="#240058" 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="#36025e" 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="#4a096d" 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="#611381" 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="#782293" 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="#90339f" 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="#a748a0" 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="#bd5e97" 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="#d07585" 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="#e18d71" 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="#efa461" 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="#f8ba59" 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="#fece5c" 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="#ffdf69" 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="#fced7c" 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="#f4f78f" 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="#e8fd9d" 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="#d9ffa1" 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="#c7fc9a" 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="#b2f58a" 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="#9bea76" 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="#84db64" 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="#6cc959" 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="#55b45a" 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="#3f9e65" 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="#2c8677" 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="#1c6e8b" 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="#0f579b" 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="#0642a1" 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="#012e9d" 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="#001d8e" 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="#04107b" 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="#0d0668" 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="#19015b" fill-opacity="1.000" /></g>
</svg>
["#240058", "#36025e", "#4a096d", "#611381", "#782293", "#90339f", "#a748a0", "#bd5e97", "#d07585", "#e18d71", "#efa461", "#f8ba59", "#fece5c", "#ffdf69", "#fced7c", "#f4f78f", "#e8fd9d", "#d9ffa1", "#c7fc9a", "#b2f58a", "#9bea76", "#84db64", "#6cc959", "#55b45a", "#3f9e65", "#2c8677", "#1c6e8b", "#0f579b", "#0642a1", "#012e9d", "#001d8e", "#04107b", "#0d0668", "#19015b"]
// https://grabient.com/_gAAgAAf_1fwYfwYf7igPTgPTgt5gB6gAAgAAn0n0vogA?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.489);
vec3 b = vec3(-0.500, -0.500, -0.143);
vec3 c = vec3(0.979, 0.979, 2.937);
vec3 d = vec3(0.122, 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.489],
[-0.500, -0.500, -0.143],
[0.979, 0.979, 2.937],
[0.122, 0.000, 0.000]
]