/* https://grabient.com/_gJTgGNgHRf5egB7f_7gEtf4Rf8BgDugG9f9e?style=angularSwatches&steps=25&angle=180 */
background: conic-gradient(from 180deg, #904876 0.000deg, #904876 14.400deg, #984976 calc(14.400deg + 0.1deg), #984976 28.800deg, #a04b76 calc(28.800deg + 0.1deg), #a04b76 43.200deg, #a94e76 calc(43.200deg + 0.1deg), #a94e76 57.600deg, #b15176 calc(57.600deg + 0.1deg), #b15176 72.000deg, #b95476 calc(72.000deg + 0.1deg), #b95476 86.400deg, #c15876 calc(86.400deg + 0.1deg), #c15876 100.800deg, #c95b76 calc(100.800deg + 0.1deg), #c95b76 115.200deg, #d05f77 calc(115.200deg + 0.1deg), #d05f77 129.600deg, #d76377 calc(129.600deg + 0.1deg), #d76377 144.000deg, #dd6777 calc(144.000deg + 0.1deg), #dd6777 158.400deg, #e46b77 calc(158.400deg + 0.1deg), #e46b77 172.800deg, #e96f77 calc(172.800deg + 0.1deg), #e96f77 187.200deg, #ee7377 calc(187.200deg + 0.1deg), #ee7377 201.600deg, #f37777 calc(201.600deg + 0.1deg), #f37777 216.000deg, #f77a77 calc(216.000deg + 0.1deg), #f77a77 230.400deg, #fa7d77 calc(230.400deg + 0.1deg), #fa7d77 244.800deg, #fd7f77 calc(244.800deg + 0.1deg), #fd7f77 259.200deg, #ff8177 calc(259.200deg + 0.1deg), #ff8177 273.600deg, #ff8377 calc(273.600deg + 0.1deg), #ff8377 288.000deg, #ff8477 calc(288.000deg + 0.1deg), #ff8477 302.400deg, #ff8578 calc(302.400deg + 0.1deg), #ff8578 316.800deg, #ff8578 calc(316.800deg + 0.1deg), #ff8578 331.200deg, #ff8478 calc(331.200deg + 0.1deg), #ff8478 345.600deg, #ff8378 calc(345.600deg + 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/_gJTgGNgHRf5egB7f_7gEtf4Rf8BgDugG9f9e?style=angularSwatches&steps=25&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 288.782,633.164
Z
" fill="#904876" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 288.782,633.164
A 447.214,447.214 0 0 1 184.553,591.897
Z
" fill="#984976" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 184.553,591.897
A 447.214,447.214 0 0 1 93.861,526.005
Z
" fill="#a04b76" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 93.861,526.005
A 447.214,447.214 0 0 1 22.405,439.629
Z
" fill="#a94e76" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 22.405,439.629
A 447.214,447.214 0 0 1 -25.326,338.197
Z
" fill="#b15176" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -25.326,338.197
A 447.214,447.214 0 0 1 -46.332,228.081
Z
" fill="#b95476" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -46.332,228.081
A 447.214,447.214 0 0 1 -39.293,116.200
Z
" fill="#c15876" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -39.293,116.200
A 447.214,447.214 0 0 1 -4.651,9.586
Z
" fill="#c95b76" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -4.651,9.586
A 447.214,447.214 0 0 1 55.416,-85.065
Z
" fill="#d05f77" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 55.416,-85.065
A 447.214,447.214 0 0 1 137.134,-161.804
Z
" fill="#d76377" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 137.134,-161.804
A 447.214,447.214 0 0 1 235.370,-215.809
Z
" fill="#dd6777" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 235.370,-215.809
A 447.214,447.214 0 0 1 343.949,-243.688
Z
" fill="#e46b77" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 343.949,-243.688
A 447.214,447.214 0 0 1 456.051,-243.688
Z
" fill="#e96f77" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 456.051,-243.688
A 447.214,447.214 0 0 1 564.630,-215.809
Z
" fill="#ee7377" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 564.630,-215.809
A 447.214,447.214 0 0 1 662.866,-161.804
Z
" fill="#f37777" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 662.866,-161.804
A 447.214,447.214 0 0 1 744.584,-85.065
Z
" fill="#f77a77" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 744.584,-85.065
A 447.214,447.214 0 0 1 804.651,9.586
Z
" fill="#fa7d77" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 804.651,9.586
A 447.214,447.214 0 0 1 839.293,116.200
Z
" fill="#fd7f77" 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,228.081
Z
" fill="#ff8177" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 846.332,228.081
A 447.214,447.214 0 0 1 825.326,338.197
Z
" fill="#ff8377" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 825.326,338.197
A 447.214,447.214 0 0 1 777.595,439.629
Z
" fill="#ff8477" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 777.595,439.629
A 447.214,447.214 0 0 1 706.139,526.005
Z
" fill="#ff8578" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 706.139,526.005
A 447.214,447.214 0 0 1 615.447,591.897
Z
" fill="#ff8578" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 615.447,591.897
A 447.214,447.214 0 0 1 511.218,633.164
Z
" fill="#ff8478" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 511.218,633.164
A 447.214,447.214 0 0 1 400.000,647.214
Z
" fill="#ff8378" fill-opacity="1.000" /></g>
</svg>
["#904876", "#984976", "#a04b76", "#a94e76", "#b15176", "#b95476", "#c15876", "#c95b76", "#d05f77", "#d76377", "#dd6777", "#e46b77", "#e96f77", "#ee7377", "#f37777", "#f77a77", "#fa7d77", "#fd7f77", "#ff8177", "#ff8377", "#ff8477", "#ff8578", "#ff8578", "#ff8478", "#ff8378"]
// https://grabient.com/_gJTgGNgHRf5egB7f_7gEtf4Rf8BgDugG9f9e?style=angularSwatches&steps=25&angle=180
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 25.0;
const float ANGLE = 180.0;
vec3 palette(float t) {
vec3 a = vec3(0.595, 0.397, 0.465);
vec3 b = vec3(-0.418, 0.123, -0.005);
vec3 c = vec3(0.301, -0.495, -0.255);
vec3 d = vec3(0.238, 0.445, -0.162);
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.595, 0.397, 0.465],
[-0.418, 0.123, -0.005],
[0.301, -0.495, -0.255],
[0.238, 0.445, -0.162]
]