isometric cubes – interaktives SVG-Pattern

Ideenfindung
Als Grundform habe ich ein Parallelogramm gewählt, das sich aus vier gleichseitigen Dreiecken zusammensetzt. Dieses Verhältnis bot die meisten Gestaltungsmöglichkeiten für ein Grundmodul. In analogen Skizzen habe ich diese Form verschoben, rotiert, skaliert und verzerrt, um verschiedene Anordnungen zu testen. Einige Varianten habe ich anschließend in Illustrator nachgebaut, um sie schnell als Pattern zu prüfen. Dabei zeigte sich eine besonders geeignete Variante: Aus drei bzw. sechs aneinandergefügten Parallelogrammen entsteht der Eindruck eines dreidimensionalen, isometrischen Würfels. Durch das Einfärben der Flächen wurde dieser Effekt noch deutlicher.

Aufbau des Grundmoduls im Code

Verschieben und Rotieren der Mittelachse
Ausgehend vom Grundmodul lässt sich die Position der Mittelachse über zwei Offsets per Slider verändern: offset1x und offset1y steuern die Verschiebung, offset2x und offset2y die Rotation. Beide Offsets werden in den Koordinaten der SVG-Polygone verwendet. Über einen Toggle lassen sich die beiden Offsets miteinander koppeln, wodurch der Eindruck entsteht, dass sich die Mittelachse um einen festen Punkt dreht.

Farbvarianten
In der ersten Farbvariante bleibt der geometrische Aufbau unverändert; ein Slider erlaubt die Auswahl eines Farbbereichs von 0 bis 270 Grad im OKLCH-Farbraum, ein zweiter Slider bestimmt den Helligkeitsunterschied innerhalb einer Farbtongruppe. In der zweiten Farbvariante habe ich untersucht, wie sich die Polygone zu neuen Formen zusammenfassen lassen. Über Modul-Unterteilungen (A, B, C) entstehen so aus den Parallelogrammen Sechsecke oder Rauten. Auch hier bleibt der Farbbereich einstellbar. Die dritte, erweiterte Farbvariante erlaubt es, Farbton und Helligkeit jeder der drei Gruppen einzeln festzulegen sowie Sättigung und Helligkeitsunterschied insgesamt anzupassen. Dadurch lassen sich die Würfel unter anderem visuell invertieren.

Formexperimente in Illustrator
Nach den Farbvarianten habe ich in Illustrator weitere Versuche gemacht, wie sich das Grundmodul aufbrechen lässt.

Daraus ist eine Variante entstanden, bei der nicht die Mittelachse, sondern die Mittelpunkte der Polygone verschoben werden. Sie bewegen sich nach rechts oben beziehungsweise links unten, um sich an die Form der Parallelogramme anzupassen. Auch hier kommen die Modul-Unterteilungen zum Einsatz.

Im letzten Navigationspunkt lässt sich die Ausrichtung der Parallelogramm-Gruppe verändern. In der mittleren Reglerstellung entsteht eine Anordnung aus sechs Trapezen und drei Rauten, in deren Mitte sich ein zusätzliches, verdecktes Sechseck bildet. Um diese Fläche hervorzuheben, habe ich die drei Rauten in der Komplementärfarbe eingefärbt, statt sie im gleichen Farbton wie die übrigen Polygone zu belassen.

Ergebnisse