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>

POST-6.md

@@ -264,12 +264,16 @@ Ein Zwischenstand hatte hier einen selbst erfundenen gelben Aufkleber
 Band ein flaches Rechteck mit durchlaufender Schrift; hier lag es damit als
 Aufkleber auf der Fläche statt als Band darüber.
 
-*Die Enden knicken nach hinten weg.* Die Außenkanten laufen zur Mitte zusammen
-(10 % der Bandhöhe je Kante), die Knickflächen sind dunkler (`#D6A11E`), an der
-Knickstelle steht eine Kante, und die dunklen Längskanten folgen dem Knick mit
-statt darüber zu schweben. Ein erster Anlauf knickte bei 21 % der Länge und mit
-17 % Verjüngung — das sah aus wie eine Schleife. Bei 12 % und 10 % bleibt die
-Mitte flach und nur die Enden führen weg.
+*Die Tiefe kommt aus Licht, nicht aus Geometrie.* Quer über die Höhe liegt ein
+Verlauf von `#F8C64A` über `#F1B729` nach `#D89F1B`, knapp unter der Oberkante
+ein Glanzlicht, und zu beiden Enden hin dunkelt es um 20 % ab. Die untere
+Längskante ist einen Pixel dicker als die obere, weil sie im Schatten der
+Wölbung liegt. Die Form bleibt das Rechteck, das sie auf der Website ist.
+
+Zwei Anläufe davor haben stattdessen die Form verbogen: erst die Enden zur
+Spitze verjüngt, 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 Wölbung, nicht ein Knick.
 
 *Helm und Schrift stehen einmal, mittig auf der geraden Fläche.* Wiederholt und
 am linken Rand beginnend passte der Satz zu einem endlosen Band; auf einem,

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 --