/* https://grabient.com/_gG2gNTgG-gEvf1gf80gEvgEHf-8f6gf_3gAk?style=angularGradient&steps=16&angle=255 */
background: conic-gradient(from 255deg, #412e3f 0.000deg, #4a2e3f 24.000deg, #53303e 48.000deg, #5c343e 72.000deg, #653a3e 96.000deg, #6f423e 120.000deg, #794c3e 144.000deg, #83583e 168.000deg, #8c653e 192.000deg, #95733e 216.000deg, #9d833e 240.000deg, #a5943e 264.000deg, #aba53e 288.000deg, #b1b83e 312.000deg, #b6ca3e 336.000deg, #b9dd3f 360.000deg);
<svg width="800" height="400" viewBox="0 0 800 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- https://grabient.com/_gG2gNTgG-gEvf1gf80gEvgEHf-8f6gf_3gAk?style=angularGradient&steps=16&angle=255 -->
<g clip-path="url(#paint0_angular_clip_path)" data-figma-skip-parse="true"><g transform="matrix(-0.190802 0.051125 -0.051125 -0.190802 400.000000 200.000000)"><foreignObject x="-2264" y="-2264" width="4528" height="4528"><div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(65, 46, 63, 1) 0.000000deg,rgba(74, 46, 63, 1) 24.000000deg,rgba(83, 48, 62, 1) 48.000000deg,rgba(92, 52, 62, 1) 72.000000deg,rgba(101, 58, 62, 1) 96.000000deg,rgba(111, 66, 62, 1) 120.000000deg,rgba(121, 76, 62, 1) 144.000000deg,rgba(131, 88, 62, 1) 168.000000deg,rgba(140, 101, 62, 1) 192.000000deg,rgba(149, 115, 62, 1) 216.000000deg,rgba(157, 131, 62, 1) 240.000000deg,rgba(165, 148, 62, 1) 264.000000deg,rgba(171, 165, 62, 1) 288.000000deg,rgba(177, 184, 62, 1) 312.000000deg,rgba(182, 202, 62, 1) 336.000000deg,rgba(185, 221, 63, 1) 360.000000deg);height:100%;width:100%;opacity:1"></div></foreignObject></g></g><rect width="800" height="400" data-figma-gradient-fill="{"type":"GRADIENT_ANGULAR","stops":[{"color":{"r":0.2549019607843137,"g":0.1803921568627451,"b":0.24705882352941178,"a":1},"position":0},{"color":{"r":0.2901960784313726,"g":0.1803921568627451,"b":0.24705882352941178,"a":1},"position":0.06666666666666667},{"color":{"r":0.3254901960784314,"g":0.18823529411764706,"b":0.24313725490196078,"a":1},"position":0.13333333333333333},{"color":{"r":0.3607843137254902,"g":0.20392156862745098,"b":0.24313725490196078,"a":1},"position":0.2},{"color":{"r":0.396078431372549,"g":0.22745098039215686,"b":0.24313725490196078,"a":1},"position":0.26666666666666666},{"color":{"r":0.43529411764705883,"g":0.25882352941176473,"b":0.24313725490196078,"a":1},"position":0.3333333333333333},{"color":{"r":0.4745098039215686,"g":0.2980392156862745,"b":0.24313725490196078,"a":1},"position":0.4},{"color":{"r":0.5137254901960784,"g":0.34509803921568627,"b":0.24313725490196078,"a":1},"position":0.4666666666666667},{"color":{"r":0.5490196078431373,"g":0.396078431372549,"b":0.24313725490196078,"a":1},"position":0.5333333333333333},{"color":{"r":0.5843137254901961,"g":0.45098039215686275,"b":0.24313725490196078,"a":1},"position":0.6},{"color":{"r":0.615686274509804,"g":0.5137254901960784,"b":0.24313725490196078,"a":1},"position":0.6666666666666666},{"color":{"r":0.6470588235294118,"g":0.5803921568627451,"b":0.24313725490196078,"a":1},"position":0.7333333333333333},{"color":{"r":0.6705882352941176,"g":0.6470588235294118,"b":0.24313725490196078,"a":1},"position":0.8},{"color":{"r":0.6941176470588235,"g":0.7215686274509804,"b":0.24313725490196078,"a":1},"position":0.8666666666666667},{"color":{"r":0.7137254901960784,"g":0.792156862745098,"b":0.24313725490196078,"a":1},"position":0.9333333333333333},{"color":{"r":0.7254901960784313,"g":0.8666666666666667,"b":0.24705882352941178,"a":1},"position":1}],"stopsVar":[{"color":{"r":0.2549019607843137,"g":0.1803921568627451,"b":0.24705882352941178,"a":1},"position":0},{"color":{"r":0.2901960784313726,"g":0.1803921568627451,"b":0.24705882352941178,"a":1},"position":0.06666666666666667},{"color":{"r":0.3254901960784314,"g":0.18823529411764706,"b":0.24313725490196078,"a":1},"position":0.13333333333333333},{"color":{"r":0.3607843137254902,"g":0.20392156862745098,"b":0.24313725490196078,"a":1},"position":0.2},{"color":{"r":0.396078431372549,"g":0.22745098039215686,"b":0.24313725490196078,"a":1},"position":0.26666666666666666},{"color":{"r":0.43529411764705883,"g":0.25882352941176473,"b":0.24313725490196078,"a":1},"position":0.3333333333333333},{"color":{"r":0.4745098039215686,"g":0.2980392156862745,"b":0.24313725490196078,"a":1},"position":0.4},{"color":{"r":0.5137254901960784,"g":0.34509803921568627,"b":0.24313725490196078,"a":1},"position":0.4666666666666667},{"color":{"r":0.5490196078431373,"g":0.396078431372549,"b":0.24313725490196078,"a":1},"position":0.5333333333333333},{"color":{"r":0.5843137254901961,"g":0.45098039215686275,"b":0.24313725490196078,"a":1},"position":0.6},{"color":{"r":0.615686274509804,"g":0.5137254901960784,"b":0.24313725490196078,"a":1},"position":0.6666666666666666},{"color":{"r":0.6470588235294118,"g":0.5803921568627451,"b":0.24313725490196078,"a":1},"position":0.7333333333333333},{"color":{"r":0.6705882352941176,"g":0.6470588235294118,"b":0.24313725490196078,"a":1},"position":0.8},{"color":{"r":0.6941176470588235,"g":0.7215686274509804,"b":0.24313725490196078,"a":1},"position":0.8666666666666667},{"color":{"r":0.7137254901960784,"g":0.792156862745098,"b":0.24313725490196078,"a":1},"position":0.9333333333333333},{"color":{"r":0.7254901960784313,"g":0.8666666666666667,"b":0.24705882352941178,"a":1},"position":1}],"transform":{"m00":-772.740661,"m01":-207.055236,"m02":889.897949,"m10":207.055236,"m11":-772.740661,"m12":482.842712},"opacity":1.0,"blendMode":"NORMAL","visible":true}"/>
<defs>
<clipPath id="paint0_angular_clip_path"><rect width="800" height="400"/></clipPath>
</defs>
</svg>
["#412e3f", "#4a2e3f", "#53303e", "#5c343e", "#653a3e", "#6f423e", "#794c3e", "#83583e", "#8c653e", "#95733e", "#9d833e", "#a5943e", "#aba53e", "#b1b83e", "#b6ca3e", "#b9dd3f"]
// https://grabient.com/_gG2gNTgG-gEvf1gf80gEvgEHf-8f6gf_3gAk?style=angularGradient&steps=16&angle=255
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 16.0;
const float ANGLE = 255.0;
vec3 palette(float t) {
vec3 a = vec3(0.438, 0.851, 0.446);
vec3 b = vec3(0.303, -0.672, -0.204);
vec3 c = vec3(0.303, 0.263, -0.068);
vec3 d = vec3(-0.352, -0.009, 0.036);
return a + b * cos(6.283185 * (c * t + d));
}
// N stops sampled from the palette, blended like the CSS gradient
vec3 stops(float t) {
float n = STEPS - 1.0;
float x = clamp(t, 0.0, 1.0) * n;
return mix(palette(floor(x) / n), palette(min(floor(x) + 1.0, n) / n), fract(x));
}
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.438, 0.851, 0.446],
[0.303, -0.672, -0.204],
[0.303, 0.263, -0.068],
[-0.352, -0.009, 0.036]
]