/* https://grabient.com/_gMDgF-gAegEPgFZgAygLTgNMgSMgJAgFxgMYdrvovog0?style=angularSwatches&steps=21&angle=45 */
background: conic-gradient(from 45deg, #6f0000 0.000deg, #6f0000 17.143deg, #7b0000 calc(17.143deg + 0.1deg), #7b0000 34.286deg, #890000 calc(34.286deg + 0.1deg), #890000 51.429deg, #990000 calc(51.429deg + 0.1deg), #990000 68.571deg, #a80000 calc(68.571deg + 0.1deg), #a80000 85.714deg, #b80000 calc(85.714deg + 0.1deg), #b80000 102.857deg, #c51300 calc(102.857deg + 0.1deg), #c51300 120.000deg, #d12900 calc(120.000deg + 0.1deg), #d12900 137.143deg, #db4000 calc(137.143deg + 0.1deg), #db4000 154.286deg, #e15700 calc(154.286deg + 0.1deg), #e15700 171.429deg, #e46c00 calc(171.429deg + 0.1deg), #e46c00 188.571deg, #e37d00 calc(188.571deg + 0.1deg), #e37d00 205.714deg, #df8a00 calc(205.714deg + 0.1deg), #df8a00 222.857deg, #d79200 calc(222.857deg + 0.1deg), #d79200 240.000deg, #cd9300 calc(240.000deg + 0.1deg), #cd9300 257.143deg, #c08e00 calc(257.143deg + 0.1deg), #c08e00 274.286deg, #b18400 calc(274.286deg + 0.1deg), #b18400 291.429deg, #a27400 calc(291.429deg + 0.1deg), #a27400 308.571deg, #926100 calc(308.571deg + 0.1deg), #926100 325.714deg, #834a00 calc(325.714deg + 0.1deg), #834a00 342.857deg, #763300 calc(342.857deg + 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/_gMDgF-gAegEPgFZgAygLTgNMgSMgJAgFxgMYdrvovog0?style=angularSwatches&steps=21&angle=45 -->
<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 716.228,-116.228
A 447.214,447.214 0 0 1 795.389,-8.968
Z
" fill="#6f0000" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 795.389,-8.968
A 447.214,447.214 0 0 1 839.418,116.860
Z
" fill="#7b0000" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 839.418,116.860
A 447.214,447.214 0 0 1 844.402,250.075
Z
" fill="#890000" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 844.402,250.075
A 447.214,447.214 0 0 1 809.901,378.834
Z
" fill="#990000" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 809.901,378.834
A 447.214,447.214 0 0 1 738.977,491.710
Z
" fill="#a80000" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 738.977,491.710
A 447.214,447.214 0 0 1 637.933,578.666
Z
" fill="#b80000" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 637.933,578.666
A 447.214,447.214 0 0 1 515.748,631.976
Z
" fill="#c51300" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 515.748,631.976
A 447.214,447.214 0 0 1 383.277,646.901
Z
" fill="#d12900" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 383.277,646.901
A 447.214,447.214 0 0 1 252.292,622.117
Z
" fill="#db4000" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 252.292,622.117
A 447.214,447.214 0 0 1 134.433,559.825
Z
" fill="#e15700" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 134.433,559.825
A 447.214,447.214 0 0 1 40.175,465.567
Z
" fill="#e46c00" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 40.175,465.567
A 447.214,447.214 0 0 1 -22.117,347.708
Z
" fill="#e37d00" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -22.117,347.708
A 447.214,447.214 0 0 1 -46.901,216.723
Z
" fill="#df8a00" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -46.901,216.723
A 447.214,447.214 0 0 1 -31.976,84.252
Z
" fill="#d79200" fill-opacity="1.000" /><path d="
M 400.000,200.000
L -31.976,84.252
A 447.214,447.214 0 0 1 21.334,-37.933
Z
" fill="#cd9300" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 21.334,-37.933
A 447.214,447.214 0 0 1 108.290,-138.977
Z
" fill="#c08e00" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 108.290,-138.977
A 447.214,447.214 0 0 1 221.166,-209.901
Z
" fill="#b18400" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 221.166,-209.901
A 447.214,447.214 0 0 1 349.925,-244.402
Z
" fill="#a27400" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 349.925,-244.402
A 447.214,447.214 0 0 1 483.140,-239.418
Z
" fill="#926100" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 483.140,-239.418
A 447.214,447.214 0 0 1 608.968,-195.389
Z
" fill="#834a00" fill-opacity="1.000" /><path d="
M 400.000,200.000
L 608.968,-195.389
A 447.214,447.214 0 0 1 716.228,-116.228
Z
" fill="#763300" fill-opacity="1.000" /></g>
</svg>
["#6f0000", "#7b0000", "#890000", "#990000", "#a80000", "#b80000", "#c51300", "#d12900", "#db4000", "#e15700", "#e46c00", "#e37d00", "#df8a00", "#d79200", "#cd9300", "#c08e00", "#b18400", "#a27400", "#926100", "#834a00", "#763300"]
// https://grabient.com/_gMDgF-gAegEPgFZgAygLTgNMgSMgJAgFxgMYdrvovog0?style=angularSwatches&steps=21&angle=45
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 21.0;
const float ANGLE = 45.0;
vec3 palette(float t) {
vec3 a = vec3(0.622, 0.233, -0.119);
vec3 b = vec3(0.271, 0.345, 0.050);
vec3 c = vec3(0.723, 0.844, 1.164);
vec3 d = vec3(0.628, 0.421, 0.844);
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.622, 0.233, -0.119],
[0.271, 0.345, 0.050],
[0.723, 0.844, 1.164],
[0.628, 0.421, 0.844]
]