Part 1 - Make or buy?
„Das hast du doch einfach aus irgendeiner React-Grafikbibliothek kopiert…“
Joa. Zum Teil stimmt’s ja auch manchmal. Aber eben nicht immer. Manchmal will ich nicht die 37. Library an den Start bringen, sondern einfach selber bauen. Von Grund auf. So richtig oldschool – nur ich, ein paar Koordinaten und natürlich sehr viel KI.
1. Aus Q wird A
Ausgangspunkt war ein Logo: ein abstrahiertes, inszeniertes Q. Linien, Farben, dieser kleine „ich bin wichtiger als ich aussehe“-Vibe – hat mich sofort gekriegt. Also hab ich mir das Q geschnappt, die KI drauf losgelassen und daraus ein A gemacht. Ein A als Pixelbild. Minimalistisch, aber mit Haltung. Wie ein Buchstabe, der schon seine eigene Netflix-Serie hat.
2. Reine Mathematik
Jetzt hätte ich natürlich einfach schnell ein SVG in Illustrator zusammenschrauben und importieren können. Hätte niemand gemerkt, hätte allen gereicht.
Aber nein. Purismus-Modus an. Ich wollte das Dreieck wirklich konstruieren (lassen): Punkte berechnen, Kanten definieren, alles Mathe. Wenn schon banal, dann bitte konsequent banal. Die eigentliche Fleißarbeit übernimmt natürlich die KI.
3. Die erste Version: ein Dreieck, das noch nichts ahnt
Am Anfang stand nur dieses eine Dreieck. Keine Animation, kein Schnickschnack, einfach: da.
Aber genau das war der Punkt: Ich wollte die Basis so sauber haben, dass alles, was danach kommt, darauf aufbauen kann. Kein fremdes Framework, kein wildes Copy-Paste, sondern ein Element, das ich wirklich verstehe.
4. Schieberegler, Rundungen und der Beginn des Wahnsinns
Ab hier wird aus „ist halt ein Dreieck“ so langsam ein Charakter.
Die Ecken sind echte Kreisbögen, der Schieberegler steuert, wie weit ich gehen darf, bevor sich die Bögen gegenseitig auf die Füße treten würden. Dazu noch Linienstärke und Canvas-Größe – fertig.
Spannend wird’s, wenn man merkt: Nur über ein paar Zahlen im UI entscheidet sich, ob das Ding nach „Logo“, „Warnschild“ oder „Future-OS-Icon“ aussieht.
5. Jetzt sitzt das Ding
Hier drehe ich das Dreieck zum ersten Mal dorthin, wo es am Ende auch stehen soll. Die Rotation landet in ihrer Endposition – ab jetzt ist das die feste Ausrichtung, auf der alles Weitere aufbaut. Aus dem suchenden Dreieck wird das definierte Grundelement.
6. Ausbeulen, Einziehen, Formenfamilie
Als Nächstes geht’s ans Ausbeulen und Einziehen. Über einen einzigen Parameter werden die Kanten per Bézier-Kurven nach außen oder innen gezogen – und aus dem Dreieck wird auf einmal eine ganze Formenfamilie: mal eher Propeller, mal Blüte, mal Raumschiff-Emblem.
Wie weit darf die Form kippen, bevor sie ihre Dreiecks-DNA verliert? Genau dieser Punkt dazwischen ist spannend – nicht mehr streng geometrisch, aber auch noch nicht komplett esoterisch.
7. Viele Dreiecke, ein System
Jetzt wird gestapelt. Mehrfach-Dreiecke, Abstand, Anzahl, Verdrehung pro Schritt, XY-Versatz, Verlaufswinkel – alles steuerbar. Aus einer Form wird ein kleines System, das plötzlich in alle Richtungen eskalieren kann.
Jetzt greifen auch die Farbverschiebungen ins System: statt „sieht ganz gut aus“ werden die Töne berechnet und ins Farbsystem zurückgespielt.
Wenn alles sitzt, speichern wir das Ganze als fertiges Set aus Parametern. Ab da brauchen wir kein UI-Gebastel mehr – die Schieberegler haben ihren Job getan und dürfen in die Tonne.
Was bleibt, ist ein schlankes, reproduzierbares Ergebnis: Mathe, Geometrie, Code.
8. Das finale Dreieck
Am Ende steht dieses eine Motiv: ein mehrfach laufendes, weich gerundetes Dreieck mit Farbverlauf – genau in der Optik, die ich am Anfang im Kopf hatte, nur jetzt voll parametrisch und sauber im Code verankert.
Kein Illustrator-Export, keine fremde Library, kein „irgendwo geklaut“. Sondern ein Shape, das aus Mathe und Reglern entstanden ist.
Part 2 – Aus dem Dreieck wird ein Kosmos
Mehr Ecken, mehr Dimensionen, mehr Story in deinen Charts.
Genau da geht die Reise weiter: Wir nehmen die saubere Geometrie aus Part 1, drehen an ein paar Parametern...Am Ende steht ein flexibles System: Anzahl Ecken, Wertebereich, Korridore, Layer – alles steuerbar.
1. Von 3 Ecken zu „so viele du willst“
Ausgangspunkt bleibt unser Dreieck – sauber konstruiert, mathematisch durchdekliniert, bereit für den nächsten Evolutionsschritt.
Die Idee: Wenn wir einmal verstanden haben, wie eine Form parametrisch funktioniert, ist es ziemlich egal, ob sie drei, vier, fünf oder zwölf Ecken hat.
Also machen wir aus „dem Dreieck“ ganz einfach „das n-Eck“: Ein Regler für die Anzahl der Ecken, ein bisschen Geometrie unter der Haube – und schon springt die Form von Dreieck zu Quadrat, Pentagon, Hexagon… bis hin zum kompletten Spinnennetz.
Das Ziel ist klar: am Ende wollen wir beim Radar landen – oder gleich bei der vollen Spider-Grafik.
2. Eine Geometrie – unendlich viele Shapes
Wenn die Anzahl der Ecken variabel wird, entsteht eine kleine Formenfamilie:
Vom kompakten Dreieck über das klassische Viereck bis hin zum soft abgerundeten Vieleck, das fast schon wie ein organisches Icon wirkt.
Jede Variante ist dabei nicht nur „andere Optik“, sondern steht für eine andere Anzahl an Kriterien im späteren Radar:
3 Ecken = 3 KPIs, 5 Ecken = 5 Dimensionen, 8 Ecken = 8 Blickwinkel auf denselben Sachverhalt.
So wächst aus einer einzigen technischen Basis ein kompletter Baukasten für Spinnennetze – visuell konsistent, aber maximal flexibel.
3. Drei Werte, ein Shape – und schon wird’s lesbar
Anders als bei einer dekorativen Liniengrafik tragen Radarcharts wirklich Information. Pro Achse steht ein Kriterium, und der Wert läuft von Minimum bis Maximum – bei uns sauber skaliert von 0 bis 100.
0 liegt in der Mitte des Netzes – Kriterium komplett verfehlt.100 sitzt außen an der Kante – Kriterium maximal erfüllt.
Die Anzahl der Ecken entspricht also genau der Anzahl der Kriterien, die wir betrachten.
Dazu kommen Labels, Legende, Einheiten – erst im Dreieck, dann später mit mehr Ecken.
Ab hier erzählen die Formen keine abstrakte Kunst mehr, sondern messbare Realität.
4. Der Diamant: Wenn vier Dimensionen im Fokus stehen
Der nächste Klassiker: das Viereck.
Aus dem Dreieck wird ein Diamant – perfekt, wenn vier zentrale Dimensionen im Fokus stehen: zum Beispiel Technik, Organisation, Prozesse, Kultur.
Die Form bleibt parametrisch:
Wir können sie strecken, drehen, abrunden, ausbeulen – und trotzdem bleibt sie im System.
So entsteht aus einer simplen geometrischen Figur ein wiedererkennbares Pattern für ganze Dashboard-Gruppen.
5. Mehrere Spinnen, eine Wahrheit: der Vergleich
Ein Spinnennetz allein ist gut. Zwei übereinander sind besser.
Jetzt legen wir mehrere Wertemengen übereinander: Ist-Zustand vs. Zielbild, Team A vs. Team B, heute vs. letztes Jahr.
Die Flächen überlagern sich, schneiden sich, klaffen auseinander – und genau diese Unterschiede machen die Sache spannend.
Wir könnten das theoretisch unbegrenzt wiederholen, aber irgendwann sieht man nur noch Daten-Salat. Also halten wir es bewusst reduziert und fokussiert: lieber zwei, maximal drei Spinnen, dafür klar lesbar.
6. Korridor festsetzen
Wenn wir schon Formen duplizieren können, nutzen wir das natürlich aus:
Wir kopieren das vorhandene Polygon, ziehen es nach innen – und definieren damit einen Korridor, also einen Zielbereich.
Alles, was später innerhalb dieses Bereichs liegt, ist „grün“. Alles darunter schreit nach Aufmerksamkeit. So wird aus der reinen Darstellung ein visuelles Ampelsystem, das sofort zeigt, wo es hakt – ganz ohne Textblock daneben.
Unter der Motorhaube steckt der Konfigurations-Wahnsinn für alle, die gerne schrauben:
Anzahl Ecken, Skalen, Korridore, Füllungen, Linien, Animation – alles promptbar, alles über Regler steuerbar.
Wenn das sitzt, kann der ganze Spaß ins Dashboard wandern und direkt an echte Datenquellen angeschlossen werden.
Vom Labor ins Live-Dashboard
Am Ende landet das nicht als hübsches Standbild in irgendeiner Präsentation, sondern als lebendiges Element im Dashboard:
Die Spinne zieht ihre Werte aus echten Daten, passt sich automatisch an Filter, Zeiträume und Segmente an und zeigt in Echtzeit, wo dein System glänzt – und wo es brennt.
Ob du auf Organisation, IT-Sicherheit, Prozesse oder komplett andere Themen schaust:
Die Geometrie bleibt dieselbe, nur die Bedeutung der Achsen ändert sich.
So wird aus einem Spiel mit Formen ein ernstzunehmendes Analyse-Tool – mit genau der Portion Visual-Drama, die man auf einem guten Dashboard eben haben will.
Part 3 – Da ist ein Raster im Dashboard
Statt einem großen Fokus-Chart geht es hier um mehrere Karten nebeneinander – jede mit eigener Kennzahl oder Grafik.
Dafür braucht es ein Raster:
Wie viele Cards pro Zeile, wie viele Zeilen, welcher Abstand, welche Form – Quadrat, Kreis, Hexagon oder Dreieck.
1. Eine Dashboard-Card ist quadratisch oder rund. Das war schon immer so.
Das Raster hier ist kein klassisches Layout-Grid, sondern ein Konfigurator für Formen im Dashboard. Über Slider lassen sich Zeilen, Spalten, Abstände und die Form selbst steuern – vom Vieleck bis zum Kreis.
Parallel dazu bleibt die Chartintegration im Fokus:
Ein Radarbild oder ein anderer Chart soll in jede dieser Formen technisch sauber und visuell lesbar hineinpassen.
2. Der Klassiker: Das Quadrat und sein exentrischer Bruder, der Diamant
Aus dem Quadrat wird durch Drehung der Diamant:
Gleiche Größe, gleiches Grid, andere Ausrichtung.
Die Cards bleiben exakt im Raster, wirken aber dynamischer. Die Steuerung läuft über einen Rotationsparameter – kein neuer Code, nur eine andere Einstellung.
3. Der Standard für KPIs
Kreise eignen sich gut für viele gleichgewichtete KPIs nebeneinander.
Oben ein schlichtes zweizeiliges Raster, unten eine engere, leicht versetzte Anordnung. Die Orientierung bleibt klar: mehrere gleich wichtige Kennzahlen in einem Block, gut vergleichbar. Form und Abstände werden über dieselben Parameter geregelt wie in den vorherigen Beispielen.
4. Wabenstruktur für Netzwerker und Systemnerds
Mit Hexagonen wird das Grid zur Wabenstruktur.
Oben kompakte Hexagon-Gitter, unten versetzte Zeilen im Honeycomb-Muster. Über die Einstellungen für Zeilenversatz entsteht ein vernetzter Eindruck, ohne zusätzliche Linien.
Ideal für Cluster, Module oder Netzwerke – die Form übernimmt einen Teil der Strukturierung, das Raster sorgt für Ordnung.
5. Pentagon und Stoppschild
Fünfecke und verwandte Formen markieren besondere Zustände: Warnungen, kritische Bereiche oder zentrale Themen.
Sie folgen denselben Rasterregeln wie Quadrate und Kreise.
6. Der Exot
Die Dreiecksvariante zeigt die Grenze des Gewohnten – aber mit derselben Systematik.
Oben ein einfaches Dreiecks-Grid, darunter versetzte und optional gedrehte Zeilen.
Gesteuert über Parameter für alternierende Reihen und Versatz. Nicht als Standardlayout gedacht, sondern für spezielle Einsatzzwecke und experimentelle Visualisierungen.Trotz der ungewöhnlichen Optik bleibt alles parametrisiert und sauber im Raster verankert.