I want the typical behavior, Colour1 on the lower value of the knob and as the arc progresses it reveals Colour2.

I know someone knows what im talking about because Claude doesnt get it and it keeps giving me weird results.

See here how it tries to divide the arc up into tiny pieces lmaooo
I can definitely see all the little sections. smh.

It looks fine, but Im not happy with the hacky work around. I suspect it'll give me more problems.
If someone can help please.

Thank you!

    // -- arcBasic --
    var arcBasicW = 0.45 * 2;
    var arcBasicCols = [0xff005EC2, 0xff085BBC, 0xff1058B5, 0xff1955AF, 0xff2152A9, 0xff294FA3, 0xff314C9C, 0xff3A4996, 0xff424690, 0xff4A438A, 0xff524083, 0xff5A3D7D, 0xff633A77, 0xff6B3771, 0xff73346A, 0xff7B3164, 0xff842D5E, 0xff8C2A58, 0xff942751, 0xff9C244B, 0xffA52145, 0xffAD1E3F, 0xffB51B38, 0xffBD1832, 0xffC5152C, 0xffCE1226, 0xffD60F1F, 0xffDE0C19, 0xffE60913, 0xffEF060D, 0xffF70306, 0xffFF0000];
    var arcBasicA0 = -startOffset;
    var arcBasicA1 = endOffset;
    var arcBasicSpan = arcBasicA1 - arcBasicA0;
    for (i = 0; i < 32; i++)
    {
        var ts = i / 32.0;
        var te = (i + 1) / 32.0;
        var sa = arcBasicA0 + arcBasicSpan * ts;
        var ea = arcBasicA0 + arcBasicSpan * te;
        var gT = (sa + startOffset) / totalSweep;
        var ci = Math.floor(gT * 32);
        if (ci < 0) ci = 0;
        if (ci >= 32) ci = 31;
        var Kseg = Content.createPath();
        Kseg.addArc([(1.0-arcBasicW)/2, (1.0-arcBasicW)/2, arcBasicW, arcBasicW], sa, ea);
        var arSeg = Kseg.getBounds(stableSize); arSeg[0]+=ox; arSeg[1]+=oy + stableSize * 0;
        g.setColour(arcBasicCols[ci]);
        var segCap = (i == 0 || i == 31) ? "rounded" : "butt";
        g.drawPath(Kseg, arSeg, {Thickness: stableSize * 0.04, EndCapStyle: segCap, JointStyle: "curved"});
    }

Looks good still but when turning the knob I can see little imperfections which im guessing is from all the cuts in the path.