/* https://grabient.com/_gPhgLqgLqf-cf83gBkf4wf5cf5Wf8OgA3gDPgE_Q_Qs-?style=angularSwatches&steps=15&angle=210 */
background: conic-gradient(from 210deg, #ff72f1 0.000deg, #ff72f1 24.000deg, #ff91f2 calc(24.000deg + 0.1deg), #ff91f2 48.000deg, #ffb6eb calc(48.000deg + 0.1deg), #ffb6eb 72.000deg, #ffdcde calc(72.000deg + 0.1deg), #ffdcde 96.000deg, #fffecd calc(96.000deg + 0.1deg), #fffecd 120.000deg, #ffffba calc(120.000deg + 0.1deg), #ffffba 144.000deg, #ecffa7 calc(144.000deg + 0.1deg), #ecffa7 168.000deg, #daff98 calc(168.000deg + 0.1deg), #daff98 192.000deg, #cfff8f calc(192.000deg + 0.1deg), #cfff8f 216.000deg, #cbf98c calc(216.000deg + 0.1deg), #cbf98c 240.000deg, #d1d691 calc(240.000deg + 0.1deg), #d1d691 264.000deg, #deaf9d calc(264.000deg + 0.1deg), #deaf9d 288.000deg, #f18bad calc(288.000deg + 0.1deg), #f18bad 312.000deg, #ff6ec1 calc(312.000deg + 0.1deg), #ff6ec1 336.000deg, #ff5dd4 calc(336.000deg + 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/_gPhgLqgLqf-cf83gBkf4wf5cf5Wf8OgA3gDPgE_Q_Qs-?style=angularSwatches&steps=15&angle=210 -->
<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 176.393,587.299
A 447.214,447.214 0 0 1 38.196,462.866
Z
" fill="#ff72f1" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 38.196,462.866
A 447.214,447.214 0 0 1 -37.441,292.981
Z
" fill="#ff91f2" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -37.441,292.981
A 447.214,447.214 0 0 1 -37.441,107.019
Z
" fill="#ffb6eb" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -37.441,107.019
A 447.214,447.214 0 0 1 38.196,-62.866
Z
" fill="#ffdcde" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 38.196,-62.866
A 447.214,447.214 0 0 1 176.393,-187.299
Z
" fill="#fffecd" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 176.393,-187.299
A 447.214,447.214 0 0 1 353.253,-244.764
Z
" fill="#ffffba" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 353.253,-244.764
A 447.214,447.214 0 0 1 538.197,-225.326
Z
" fill="#ecffa7" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 538.197,-225.326
A 447.214,447.214 0 0 1 699.245,-132.345
Z
" fill="#daff98" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 699.245,-132.345
A 447.214,447.214 0 0 1 808.550,18.102
Z
" fill="#cfff8f" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 808.550,18.102
A 447.214,447.214 0 0 1 847.214,200.000
Z
" fill="#cbf98c" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 847.214,200.000
A 447.214,447.214 0 0 1 808.550,381.898
Z
" fill="#d1d691" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 808.550,381.898
A 447.214,447.214 0 0 1 699.245,532.345
Z
" fill="#deaf9d" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 699.245,532.345
A 447.214,447.214 0 0 1 538.197,625.326
Z
" fill="#f18bad" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 538.197,625.326
A 447.214,447.214 0 0 1 353.253,644.764
Z
" fill="#ff6ec1" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 353.253,644.764
A 447.214,447.214 0 0 1 176.393,587.299
Z
" fill="#ff5dd4" fill-opacity="1.000" /></g>
</svg>
["#ff72f1", "#ff91f2", "#ffb6eb", "#ffdcde", "#fffecd", "#ffffba", "#ecffa7", "#daff98", "#cfff8f", "#cbf98c", "#d1d691", "#deaf9d", "#f18bad", "#ff6ec1", "#ff5dd4"]
// https://grabient.com/_gPhgLqgLqf-cf83gBkf4wf5cf5Wf8OgA3gDPgE_Q_Qs-?style=angularSwatches&steps=15&angle=210
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 15.0;
const float ANGLE = 210.0;
vec3 palette(float t) {
vec3 a = vec3(0.997, 0.750, 0.750);
vec3 b = vec3(-0.200, -0.402, 0.200);
vec3 c = vec3(-0.928, -0.840, -0.852);
vec3 d = vec3(0.588, 0.885, 1.037);
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.997, 0.750, 0.750],
[-0.200, -0.402, 0.200],
[-0.928, -0.840, -0.852],
[0.588, 0.885, 1.037]
]