Tiny Online Tools
Isometrische 3D-Würfel als flaches SVG
Isometrische Illustrationen — dreifarbige Würfel, in einem Raster gestapelt — sind sofort wiedererkennbar und mit SVG überraschend leicht zu komponieren. Dieser Generator baut ein Würfelraster, in dem jeder Würfel aus drei <polygon>-Rauten (oben, links, rechts) besteht, die mit drei frei wählbaren Farben gefüllt sind.
Wie die Würfel gezeichnet werden
Für jede (Spalte, Zeile) im Raster berechnet das Tool isometrische Versätze (cos(30°) in X, sin(30°) in Y), damit die Würfel perfekt zusammenpassen. Mit aktivierter Höhenvariation bekommt jeder Würfel zufällig eine Stapelhöhe von 1 bis 3 — so entsteht der typische „Stadt von oben"-Look.
Ein Seed steuert, welche Würfel gezeichnet und welche übersprungen werden (für Lücken) und wie hoch jeder Stapel ist. Mit Neu würfeln entdeckst du neue Layouts, während die Palette gleich bleibt.
Regler
- Spalten / Zeilen — Rastergröße.
- Kachelgröße — wie groß jeder Würfel ist.
- Farbe oben / links / rechts — drei Seitenfarben. Komplementäre Töne bringen Tiefe.
- Hintergrund — Füllung hinter den Würfeln.
- Höhenvariation — zufällige Stapelhöhen ein/aus.
Einsatzzwecke
- Architektur- und Bau-Hintergründe
- Hero-Bilder für Daten-Dashboards
- Editorial-Illustrationen zu Themen wie Immobilien, Städte oder Blockchain
- Game-Kacheln (Terrain, Stadtlandschaft)
- Deko für Präsentationsfolien
Da jeder Würfel eine Gruppe von Polygonen ist, kannst du Farben per Suchen-Ersetzen nachträglich austauschen oder Würfel via CSS für verspielte Übergänge animieren.