/* https://grabient.com/_gRegKKgFcgOQgIcgIZgGigLZf-mgEEgDdf9s?style=angularSwatches&steps=37&angle=105 */
background: conic-gradient(from 105deg, #ffbfab 0.000deg, #ffbfab 9.730deg, #feada9 calc(9.730deg + 0.1deg), #feada9 19.459deg, #ed9ca7 calc(19.459deg + 0.1deg), #ed9ca7 29.189deg, #dc8aa5 calc(29.189deg + 0.1deg), #dc8aa5 38.919deg, #cc7aa4 calc(38.919deg + 0.1deg), #cc7aa4 48.649deg, #bd69a2 calc(48.649deg + 0.1deg), #bd69a2 58.378deg, #ad5aa0 calc(58.378deg + 0.1deg), #ad5aa0 68.108deg, #9f4c9e calc(68.108deg + 0.1deg), #9f4c9e 77.838deg, #91409c calc(77.838deg + 0.1deg), #91409c 87.568deg, #84359a calc(87.568deg + 0.1deg), #84359a 97.297deg, #782c98 calc(97.297deg + 0.1deg), #782c98 107.027deg, #6c2597 calc(107.027deg + 0.1deg), #6c2597 116.757deg, #622095 calc(116.757deg + 0.1deg), #622095 126.486deg, #581d93 calc(126.486deg + 0.1deg), #581d93 136.216deg, #501c91 calc(136.216deg + 0.1deg), #501c91 145.946deg, #481e8f calc(145.946deg + 0.1deg), #481e8f 155.676deg, #42228d calc(155.676deg + 0.1deg), #42228d 165.405deg, #3d278b calc(165.405deg + 0.1deg), #3d278b 175.135deg, #392f89 calc(175.135deg + 0.1deg), #392f89 184.865deg, #363987 calc(184.865deg + 0.1deg), #363987 194.595deg, #354585 calc(194.595deg + 0.1deg), #354585 204.324deg, #355283 calc(204.324deg + 0.1deg), #355283 214.054deg, #366181 calc(214.054deg + 0.1deg), #366181 223.784deg, #38707f calc(223.784deg + 0.1deg), #38707f 233.514deg, #3b817c calc(233.514deg + 0.1deg), #3b817c 243.243deg, #40927a calc(243.243deg + 0.1deg), #40927a 252.973deg, #46a478 calc(252.973deg + 0.1deg), #46a478 262.703deg, #4db576 calc(262.703deg + 0.1deg), #4db576 272.432deg, #55c674 calc(272.432deg + 0.1deg), #55c674 282.162deg, #5ed772 calc(282.162deg + 0.1deg), #5ed772 291.892deg, #68e770 calc(291.892deg + 0.1deg), #68e770 301.622deg, #74f66e calc(301.622deg + 0.1deg), #74f66e 311.351deg, #80ff6c calc(311.351deg + 0.1deg), #80ff6c 321.081deg, #8cff69 calc(321.081deg + 0.1deg), #8cff69 330.811deg, #9aff67 calc(330.811deg + 0.1deg), #9aff67 340.541deg, #a8ff65 calc(340.541deg + 0.1deg), #a8ff65 350.270deg, #b7ff63 calc(350.270deg + 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/_gRegKKgFcgOQgIcgIZgGigLZf-mgEEgDdf9s?style=angularSwatches&steps=37&angle=105 -->
<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 831.976,315.748
A 447.214,447.214 0 0 1 806.200,387.089
Z
" fill="#ffbfab" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 806.200,387.089
A 447.214,447.214 0 0 1 768.742,453.041
Z
" fill="#feada9" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 768.742,453.041
A 447.214,447.214 0 0 1 720.672,511.720
Z
" fill="#ed9ca7" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 720.672,511.720
A 447.214,447.214 0 0 1 663.377,561.432
Z
" fill="#dc8aa5" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 663.377,561.432
A 447.214,447.214 0 0 1 598.504,600.745
Z
" fill="#cc7aa4" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 598.504,600.745
A 447.214,447.214 0 0 1 527.928,628.526
Z
" fill="#bd69a2" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 527.928,628.526
A 447.214,447.214 0 0 1 453.665,643.982
Z
" fill="#ad5aa0" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 453.665,643.982
A 447.214,447.214 0 0 1 377.857,646.666
Z
" fill="#9f4c9e" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 377.857,646.666
A 447.214,447.214 0 0 1 302.687,636.498
Z
" fill="#91409c" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 302.687,636.498
A 447.214,447.214 0 0 1 230.324,613.776
Z
" fill="#84359a" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 230.324,613.776
A 447.214,447.214 0 0 1 162.834,579.147
Z
" fill="#782c98" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 162.834,579.147
A 447.214,447.214 0 0 1 102.168,533.611
Z
" fill="#6c2597" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 102.168,533.611
A 447.214,447.214 0 0 1 50.075,478.483
Z
" fill="#622095" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 50.075,478.483
A 447.214,447.214 0 0 1 8.043,415.338
Z
" fill="#581d93" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 8.043,415.338
A 447.214,447.214 0 0 1 -22.712,345.997
Z
" fill="#501c91" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -22.712,345.997
A 447.214,447.214 0 0 1 -41.305,272.456
Z
" fill="#481e8f" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -41.305,272.456
A 447.214,447.214 0 0 1 -47.203,196.839
Z
" fill="#42228d" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -47.203,196.839
A 447.214,447.214 0 0 1 -40.236,121.305
Z
" fill="#3d278b" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -40.236,121.305
A 447.214,447.214 0 0 1 -20.603,48.034
Z
" fill="#392f89" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -20.603,48.034
A 447.214,447.214 0 0 1 11.130,-20.864
Z
" fill="#363987" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 11.130,-20.864
A 447.214,447.214 0 0 1 54.047,-83.402
Z
" fill="#354585" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 54.047,-83.402
A 447.214,447.214 0 0 1 106.919,-137.793
Z
" fill="#355283" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 106.919,-137.793
A 447.214,447.214 0 0 1 168.224,-182.466
Z
" fill="#366181" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 168.224,-182.466
A 447.214,447.214 0 0 1 236.197,-216.136
Z
" fill="#38707f" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 236.197,-216.136
A 447.214,447.214 0 0 1 308.875,-237.832
Z
" fill="#3b817c" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 308.875,-237.832
A 447.214,447.214 0 0 1 384.182,-246.934
Z
" fill="#40927a" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 384.182,-246.934
A 447.214,447.214 0 0 1 459.944,-243.178
Z
" fill="#46a478" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 459.944,-243.178
A 447.214,447.214 0 0 1 533.974,-226.675
Z
" fill="#4db576" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 533.974,-226.675
A 447.214,447.214 0 0 1 604.157,-197.895
Z
" fill="#55c674" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 604.157,-197.895
A 447.214,447.214 0 0 1 668.466,-157.668
Z
" fill="#5ed772" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 668.466,-157.668
A 447.214,447.214 0 0 1 725.052,-107.150
Z
" fill="#68e770" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 725.052,-107.150
A 447.214,447.214 0 0 1 772.282,-47.803
Z
" fill="#74f66e" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 772.282,-47.803
A 447.214,447.214 0 0 1 808.807,18.679
Z
" fill="#80ff6c" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 808.807,18.679
A 447.214,447.214 0 0 1 833.571,90.378
Z
" fill="#8cff69" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 833.571,90.378
A 447.214,447.214 0 0 1 845.860,165.231
Z
" fill="#9aff67" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 845.860,165.231
A 447.214,447.214 0 0 1 845.324,241.076
Z
" fill="#a8ff65" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 845.324,241.076
A 447.214,447.214 0 0 1 831.976,315.748
Z
" fill="#b7ff63" fill-opacity="1.000" /></g>
</svg>
["#ffbfab", "#feada9", "#ed9ca7", "#dc8aa5", "#cc7aa4", "#bd69a2", "#ad5aa0", "#9f4c9e", "#91409c", "#84359a", "#782c98", "#6c2597", "#622095", "#581d93", "#501c91", "#481e8f", "#42228d", "#3d278b", "#392f89", "#363987", "#354585", "#355283", "#366181", "#38707f", "#3b817c", "#40927a", "#46a478", "#4db576", "#55c674", "#5ed772", "#68e770", "#74f66e", "#80ff6c", "#8cff69", "#9aff67", "#a8ff65", "#b7ff63"]
// https://grabient.com/_gRegKKgFcgOQgIcgIZgGigLZf-mgEEgDdf9s?style=angularSwatches&steps=37&angle=105
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 37.0;
const float ANGLE = 105.0;
vec3 palette(float t) {
vec3 a = vec3(1.118, 0.650, 0.348);
vec3 b = vec3(0.912, 0.540, 0.537);
vec3 c = vec3(0.418, 0.729, -0.090);
vec3 d = vec3(0.260, 0.221, -0.148);
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);
}
[
[1.118, 0.650, 0.348],
[0.912, 0.540, 0.537],
[0.418, 0.729, -0.090],
[0.260, 0.221, -0.148]
]