/* https://grabient.com/_gCYf-Pf-PfrmfjUf2cgOVgOpgsPgA9f_XgAAn0n0wVgA?style=angularSwatches&steps=50&angle=180 */
background: conic-gradient(from 180deg, #0c0015 0.000deg, #0c0015 7.200deg, #15001a calc(7.200deg + 0.1deg), #15001a 14.400deg, #20002a calc(14.400deg + 0.1deg), #20002a 21.600deg, #2d0042 calc(21.600deg + 0.1deg), #2d0042 28.800deg, #3b005f calc(28.800deg + 0.1deg), #3b005f 36.000deg, #4c007c calc(36.000deg + 0.1deg), #4c007c 43.200deg, #5e0095 calc(43.200deg + 0.1deg), #5e0095 50.400deg, #7100a8 calc(50.400deg + 0.1deg), #7100a8 57.600deg, #8400b0 calc(57.600deg + 0.1deg), #8400b0 64.800deg, #9900ae calc(64.800deg + 0.1deg), #9900ae 72.000deg, #ad00a1 calc(72.000deg + 0.1deg), #ad00a1 79.200deg, #c1008b calc(79.200deg + 0.1deg), #c1008b 86.400deg, #d5196f calc(86.400deg + 0.1deg), #d5196f 93.600deg, #e93552 calc(93.600deg + 0.1deg), #e93552 100.800deg, #fb5237 calc(100.800deg + 0.1deg), #fb5237 108.000deg, #ff7022 calc(108.000deg + 0.1deg), #ff7022 115.200deg, #ff8d16 calc(115.200deg + 0.1deg), #ff8d16 122.400deg, #ffa916 calc(122.400deg + 0.1deg), #ffa916 129.600deg, #ffc520 calc(129.600deg + 0.1deg), #ffc520 136.800deg, #ffde34 calc(136.800deg + 0.1deg), #ffde34 144.000deg, #fff64e calc(144.000deg + 0.1deg), #fff64e 151.200deg, #ffff6b calc(151.200deg + 0.1deg), #ffff6b 158.400deg, #ffff88 calc(158.400deg + 0.1deg), #ffff88 165.600deg, #ffff9e calc(165.600deg + 0.1deg), #ffff9e 172.800deg, #ffffad calc(172.800deg + 0.1deg), #ffffad 180.000deg, #ffffb1 calc(180.000deg + 0.1deg), #ffffb1 187.200deg, #ffffa9 calc(187.200deg + 0.1deg), #ffffa9 194.400deg, #ffff98 calc(194.400deg + 0.1deg), #ffff98 201.600deg, #ffff7f calc(201.600deg + 0.1deg), #ffff7f 208.800deg, #ffff62 calc(208.800deg + 0.1deg), #ffff62 216.000deg, #ffff45 calc(216.000deg + 0.1deg), #ffff45 223.200deg, #f9ff2d calc(223.200deg + 0.1deg), #f9ff2d 230.400deg, #e7ff1c calc(230.400deg + 0.1deg), #e7ff1c 237.600deg, #d3ff15 calc(237.600deg + 0.1deg), #d3ff15 244.800deg, #bffa19 calc(244.800deg + 0.1deg), #bffa19 252.000deg, #abe228 calc(252.000deg + 0.1deg), #abe228 259.200deg, #97c83f calc(259.200deg + 0.1deg), #97c83f 266.400deg, #82ad5b calc(266.400deg + 0.1deg), #82ad5b 273.600deg, #6f9178 calc(273.600deg + 0.1deg), #6f9178 280.800deg, #5c7492 calc(280.800deg + 0.1deg), #5c7492 288.000deg, #4a56a6 calc(288.000deg + 0.1deg), #4a56a6 295.200deg, #3a39b0 calc(295.200deg + 0.1deg), #3a39b0 302.400deg, #2b1daf calc(302.400deg + 0.1deg), #2b1daf 309.600deg, #1e01a3 calc(309.600deg + 0.1deg), #1e01a3 316.800deg, #14008e calc(316.800deg + 0.1deg), #14008e 324.000deg, #0b0073 calc(324.000deg + 0.1deg), #0b0073 331.200deg, #050055 calc(331.200deg + 0.1deg), #050055 338.400deg, #01003a calc(338.400deg + 0.1deg), #01003a 345.600deg, #000024 calc(345.600deg + 0.1deg), #000024 352.800deg, #010017 calc(352.800deg + 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/_gCYf-Pf-PfrmfjUf2cgOVgOpgsPgA9f_XgAAn0n0wVgA?style=angularSwatches&steps=50&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 343.949,643.688
Z
" fill="#0c0015" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 343.949,643.688
A 447.214,447.214 0 0 1 288.782,633.164
Z
" fill="#15001a" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 288.782,633.164
A 447.214,447.214 0 0 1 235.370,615.809
Z
" fill="#20002a" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 235.370,615.809
A 447.214,447.214 0 0 1 184.553,591.897
Z
" fill="#2d0042" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 184.553,591.897
A 447.214,447.214 0 0 1 137.134,561.804
Z
" fill="#3b005f" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 137.134,561.804
A 447.214,447.214 0 0 1 93.861,526.005
Z
" fill="#4c007c" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 93.861,526.005
A 447.214,447.214 0 0 1 55.416,485.065
Z
" fill="#5e0095" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 55.416,485.065
A 447.214,447.214 0 0 1 22.405,439.629
Z
" fill="#7100a8" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 22.405,439.629
A 447.214,447.214 0 0 1 -4.651,390.414
Z
" fill="#8400b0" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -4.651,390.414
A 447.214,447.214 0 0 1 -25.326,338.197
Z
" fill="#9900ae" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -25.326,338.197
A 447.214,447.214 0 0 1 -39.293,283.800
Z
" fill="#ad00a1" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -39.293,283.800
A 447.214,447.214 0 0 1 -46.332,228.081
Z
" fill="#c1008b" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -46.332,228.081
A 447.214,447.214 0 0 1 -46.332,171.919
Z
" fill="#d5196f" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -46.332,171.919
A 447.214,447.214 0 0 1 -39.293,116.200
Z
" fill="#e93552" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -39.293,116.200
A 447.214,447.214 0 0 1 -25.326,61.803
Z
" fill="#fb5237" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -25.326,61.803
A 447.214,447.214 0 0 1 -4.651,9.586
Z
" fill="#ff7022" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -4.651,9.586
A 447.214,447.214 0 0 1 22.405,-39.629
Z
" fill="#ff8d16" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 22.405,-39.629
A 447.214,447.214 0 0 1 55.416,-85.065
Z
" fill="#ffa916" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 55.416,-85.065
A 447.214,447.214 0 0 1 93.861,-126.005
Z
" fill="#ffc520" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 93.861,-126.005
A 447.214,447.214 0 0 1 137.134,-161.804
Z
" fill="#ffde34" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 137.134,-161.804
A 447.214,447.214 0 0 1 184.553,-191.897
Z
" fill="#fff64e" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 184.553,-191.897
A 447.214,447.214 0 0 1 235.370,-215.809
Z
" fill="#ffff6b" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 235.370,-215.809
A 447.214,447.214 0 0 1 288.782,-233.164
Z
" fill="#ffff88" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 288.782,-233.164
A 447.214,447.214 0 0 1 343.949,-243.688
Z
" fill="#ffff9e" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 343.949,-243.688
A 447.214,447.214 0 0 1 400.000,-247.214
Z
" fill="#ffffad" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 400.000,-247.214
A 447.214,447.214 0 0 1 456.051,-243.688
Z
" fill="#ffffb1" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 456.051,-243.688
A 447.214,447.214 0 0 1 511.218,-233.164
Z
" fill="#ffffa9" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 511.218,-233.164
A 447.214,447.214 0 0 1 564.630,-215.809
Z
" fill="#ffff98" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 564.630,-215.809
A 447.214,447.214 0 0 1 615.447,-191.897
Z
" fill="#ffff7f" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 615.447,-191.897
A 447.214,447.214 0 0 1 662.866,-161.804
Z
" fill="#ffff62" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 662.866,-161.804
A 447.214,447.214 0 0 1 706.139,-126.005
Z
" fill="#ffff45" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 706.139,-126.005
A 447.214,447.214 0 0 1 744.584,-85.065
Z
" fill="#f9ff2d" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 744.584,-85.065
A 447.214,447.214 0 0 1 777.595,-39.629
Z
" fill="#e7ff1c" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 777.595,-39.629
A 447.214,447.214 0 0 1 804.651,9.586
Z
" fill="#d3ff15" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 804.651,9.586
A 447.214,447.214 0 0 1 825.326,61.803
Z
" fill="#bffa19" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 825.326,61.803
A 447.214,447.214 0 0 1 839.293,116.200
Z
" fill="#abe228" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 839.293,116.200
A 447.214,447.214 0 0 1 846.332,171.919
Z
" fill="#97c83f" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 846.332,171.919
A 447.214,447.214 0 0 1 846.332,228.081
Z
" fill="#82ad5b" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 846.332,228.081
A 447.214,447.214 0 0 1 839.293,283.800
Z
" fill="#6f9178" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 839.293,283.800
A 447.214,447.214 0 0 1 825.326,338.197
Z
" fill="#5c7492" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 825.326,338.197
A 447.214,447.214 0 0 1 804.651,390.414
Z
" fill="#4a56a6" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 804.651,390.414
A 447.214,447.214 0 0 1 777.595,439.629
Z
" fill="#3a39b0" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 777.595,439.629
A 447.214,447.214 0 0 1 744.584,485.065
Z
" fill="#2b1daf" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 744.584,485.065
A 447.214,447.214 0 0 1 706.139,526.005
Z
" fill="#1e01a3" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 706.139,526.005
A 447.214,447.214 0 0 1 662.866,561.804
Z
" fill="#14008e" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 662.866,561.804
A 447.214,447.214 0 0 1 615.447,591.897
Z
" fill="#0b0073" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 615.447,591.897
A 447.214,447.214 0 0 1 564.630,615.809
Z
" fill="#050055" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 564.630,615.809
A 447.214,447.214 0 0 1 511.218,633.164
Z
" fill="#01003a" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 511.218,633.164
A 447.214,447.214 0 0 1 456.051,643.688
Z
" fill="#000024" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 456.051,643.688
A 447.214,447.214 0 0 1 400.000,647.214
Z
" fill="#010017" fill-opacity="1.000" /></g>
</svg>
["#0c0015", "#15001a", "#20002a", "#2d0042", "#3b005f", "#4c007c", "#5e0095", "#7100a8", "#8400b0", "#9900ae", "#ad00a1", "#c1008b", "#d5196f", "#e93552", "#fb5237", "#ff7022", "#ff8d16", "#ffa916", "#ffc520", "#ffde34", "#fff64e", "#ffff6b", "#ffff88", "#ffff9e", "#ffffad", "#ffffb1", "#ffffa9", "#ffff98", "#ffff7f", "#ffff62", "#ffff45", "#f9ff2d", "#e7ff1c", "#d3ff15", "#bffa19", "#abe228", "#97c83f", "#82ad5b", "#6f9178", "#5c7492", "#4a56a6", "#3a39b0", "#2b1daf", "#1e01a3", "#14008e", "#0b0073", "#050055", "#01003a", "#000024", "#010017"]
// https://grabient.com/_gCYf-Pf-PfrmfjUf2cgOVgOpgsPgA9f_XgAAn0n0wVgA?style=angularSwatches&steps=50&angle=180
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 50.0;
const float ANGLE = 180.0;
vec3 palette(float t) {
vec3 a = vec3(0.652, 0.387, 0.387);
vec3 b = vec3(-0.653, -0.918, -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.387, 0.387],
[-0.653, -0.918, -0.306],
[0.958, 0.979, 2.958],
[0.061, -0.041, 0.000]
]