Warum in meinem Logo eine Wurfkurve steckt

Zwei Klammern, eine Kurve, drei Punkte

Wer mein Logo sieht, erkennt sofort die spitzen Klammern – Entwickler, klar. Die rote Kurve dazwischen lesen die meisten als „irgendwas mit Wachstum”. Stimmt auch. Aber das ist nur die halbe Geschichte.

Die Kurve ist eine Wurfkurve. Der untere Punkt ist der Absprung des Balls, der Bogen die Flugbahn, der Punkt oben rechts der Ball auf dem Weg in den Korb. Ich bin in den Neunzigern aufgewachsen – der Ära von Michael „Air” Jordan. Basketball lief bei uns rauf und runter, und diese eine Bewegung – Ball verlässt die Hand, steigt, fällt perfekt durchs Netz – hat sich eingebrannt.

Als es Jahrzehnte später um ein Logo für syfrt.de ging, war die Kurve einfach da. Und das Schöne: Sie funktioniert doppelt. Als E-Commerce-Entwickler verbringe ich meine Arbeitstage damit, eine andere Art von Kurve nach oben rechts zu treiben – Umsatz, Sichtbarkeit, Conversion. Ein Strich, zwei Wahrheiten. Mehr Reduktion geht nicht.

Werfen Sie selbst

Reden ist billig – hier ist die Kurve zum Anfassen. Ziehen Sie den roten Ball zurück und werfen Sie. Jeder Wurf zeichnet seine Flugbahn im Stil des Logos nach: rote Linie, Punkte drauf. Sie zeichnen also gerade mein Logo. Bitte weitermachen.

Wie das Spiel gebaut ist (Spoiler: ohne Framework)

Das ganze Spiel ist eine einzige Canvas-Fläche und ein paar hundert Zeilen Vanilla JavaScript – kein Framework, keine Physik-Bibliothek, keine Abhängigkeiten. Ein paar Details für die Neugierigen:

• Physik in vier Zeilen: Schwerkraft ist vy += 0.38 pro Frame, dazu Position aus Geschwindigkeit. Abpraller von Ring und Brett sind einfache Reflexionen mit Dämpfungsfaktor. Mehr braucht ein glaubwürdiger Ballflug nicht.
• Treffer-Erkennung: Ein Treffer ist, wenn der Ball von oben (vy > 0) die Ringlinie zwischen den beiden Ringpunkten kreuzt. Die „CLEAN!”-Erkennung prüft zusätzlich, ob vorher weder Brett noch Ring berührt wurden.
• Touch und Maus, ein Codepfad: Beide Eingaben landen in denselben Handlern; die Koordinaten werden über getBoundingClientRect auf die Canvas-Auflösung gemappt. Deshalb spielt es sich am Handy genauso wie am Desktop.
• Die Logo-Flugbahn ist schlicht ein Array aller Ballpositionen des aktuellen Wurfs, gezeichnet als Polyline mit Punkten alle neun Frames – dieselbe Formsprache wie im Logo.

Dass die Seite dabei statisch bleibt (Astro, kein Server, keine Build-Magie im Browser), passt zum Rest von diesem Projekt: die einfachste Lösung, die das Ziel erreicht.

Was das mit Ihrem Projekt zu tun hat

Ehrlich? Erstmal nichts – es ist ein Basketballspiel. Aber es zeigt zwei Dinge, die auch in jedem Kundenprojekt stecken: Liebe zum Detail (die Flugbahn, die das Logo zeichnet) und Technik ohne Ballast (Canvas statt Framework). Wenn Sie Ihre Umsatzkurve lieber nach oben rechts werfen als Bälle: Sprechen Sie mich an. Noch ein paar Würfe gefällig? Auf dem Spielplatz warten zwei weitere Spiele.