Slide 5: die Tiefe des Bandes kommt aus Licht statt aus Geometrie

Zwei Anlaeufe haben die Form verbogen: erst die Enden zur Spitze verjuengt,
dann um eine Knickstelle gekippt. Das erste sah aus wie eine Schleife, das
zweite wie eine Welle. Ein Absperrband ist flach und straff -- was ihm gefehlt
hat, war Woelbung, nicht ein Knick.

Jetzt quer ueber die Hoehe ein Verlauf von #F8C64A ueber #F1B729 nach #D89F1B,
knapp unter der Oberkante ein Glanzlicht, und zu beiden Enden hin 20 % Abdunkeln.
Die untere Laengskante ist einen Pixel dicker als die obere, weil sie im
Schatten der Woelbung liegt. Die Form bleibt das Rechteck, das sie auf der
Website ist.

Helm und Schrift stehen weiterhin einmal und mittig.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

post6.html

@@ -3332,35 +3332,44 @@ if (location.search.indexOf("nur=anim") >= 0)
     const bL = (W + 2 * UEBER - bh * Math.sin(bogen)) / Math.cos(bogen);
     const bA = (W - bL) / 2, bE = bA + bL;
 
-    // Wo geknickt wird, und wie stark die Enden zusammenlaufen.
-    const kL = bA + bL * 0.12, kR = bE - bL * 0.12;
-    const ein = bh * 0.10;                    // Verjuengung je Kante am Ende
-    const oT = ty, uT = ty + bh;              // Ober- und Unterkante in der Mitte
-    const oA = ty + ein, uA = ty + bh - ein;  // dieselben an der Spitze
-
-    const flaeche = (x1, o1, u1, x2, o2, u2, f) =>
-      '<path d="M' + n1(x1) + ',' + n1(o1) + 'L' + n1(x2) + ',' + n1(o2) +
-      'L' + n1(x2) + ',' + n1(u2) + 'L' + n1(x1) + ',' + n1(u1) +
-      'Z" fill="' + f + '"/>';
-
+    /* Die Tiefe kommt aus Licht und nicht aus Geometrie. Zwei Anlaeufe
+       haben die Form verbogen -- erst die Enden zur Spitze verjuengt, dann um
+       die Knickstelle gekippt. Beides sah nach Schleife oder Welle aus, weil
+       ein Absperrband nun einmal flach und straff ist. Was ihm gefehlt hat,
+       war Rundung: quer ueber die Hoehe ein Verlauf von hell nach dunkel, wie
+       auf einem Band, das leicht gewoelbt ueber der Flaeche liegt, und zu den
+       Enden hin ein Abdunkeln, weil sie weiter weg sind. Die Form bleibt das
+       Rechteck, das sie auf der Website ist. */
+    const oT = ty, uT = ty + bh;
+    const gid = "bandLicht", eid = "bandEnden";
     let band =
-      flaeche(bA, oA, uA, kL, oT, uT, WEB.bandKnick) +
-      flaeche(kL, oT, uT, kR, oT, uT, WEB.band) +
-      flaeche(kR, oT, uT, bE, oA, uA, WEB.bandKnick);
+      '<defs>' +
+      '<linearGradient id="' + gid + '" x1="0" y1="0" x2="0" y2="1">' +
+        '<stop offset="0" stop-color="#F8C64A"/>' +
+        '<stop offset="0.38" stop-color="' + WEB.band + '"/>' +
+        '<stop offset="1" stop-color="#D89F1B"/>' +
+      '</linearGradient>' +
+      '<linearGradient id="' + eid + '" x1="0" y1="0" x2="1" y2="0">' +
+        '<stop offset="0" stop-color="#000000" stop-opacity="0.20"/>' +
+        '<stop offset="0.22" stop-color="#000000" stop-opacity="0"/>' +
+        '<stop offset="0.78" stop-color="#000000" stop-opacity="0"/>' +
+        '<stop offset="1" stop-color="#000000" stop-opacity="0.20"/>' +
+      '</linearGradient>' +
+      '</defs>' +
+      '<rect x="' + n1(bA) + '" y="' + n1(oT) + '" width="' + n1(bL) +
+        '" height="' + bh + '" fill="url(#' + gid + ')"/>' +
+      '<rect x="' + n1(bA) + '" y="' + n1(oT) + '" width="' + n1(bL) +
+        '" height="' + bh + '" fill="url(#' + eid + ')"/>';
 
-    /* Die dunklen Laengskanten folgen dem Knick mit, sonst schwebten sie ueber
-       der Form. */
-    const kante = (a1, a2, a3, a4) =>
-      '<path d="M' + n1(bA) + ',' + n1(a1) + 'L' + n1(kL) + ',' + n1(a2) +
-      'H' + n1(kR) + 'L' + n1(bE) + ',' + n1(a4) + '" fill="none" stroke="' +
-      WEB.bandDunkel + '" stroke-width="4" stroke-linejoin="round"/>';
-    band += kante(oA, oT, oT, oA) + kante(uA, uT, uT, uA);
-
-    // Die Knickkanten selbst: eine Spur dunkler als die Flaeche daneben.
-    [kL, kR].forEach(kx => {
-      band += '<path d="M' + n1(kx) + ',' + n1(oT + 2) + 'V' + n1(uT - 2) +
-        '" stroke="' + WEB.bandSpitze + '" stroke-width="1.6" opacity=".7"/>';
-    });
+    /* Die dunklen Laengskanten. Die untere sitzt eine Spur dicker: dort liegt
+       die Kante im Schatten der Woelbung. */
+    band += '<path d="M' + n1(bA) + ',' + n1(oT) + 'H' + n1(bE) + '" stroke="' +
+      WEB.bandDunkel + '" stroke-width="4"/>';
+    band += '<path d="M' + n1(bA) + ',' + n1(uT) + 'H' + n1(bE) + '" stroke="' +
+      WEB.bandDunkel + '" stroke-width="5"/>';
+    // Ein heller Streifen knapp unter der Oberkante: das Glanzlicht.
+    band += '<path d="M' + n1(bA) + ',' + n1(oT + 9) + 'H' + n1(bE) +
+      '" stroke="#FFFFFF" stroke-width="2.4" opacity=".28"/>';
 
     /* Schrift und Helm einmal, mittig auf der geraden Flaeche. Vorher lief
        der Satz wiederholt ueber das ganze Band und begann links am Rand --