Isometrisches Würfelmuster
Ein Mosaik aus Würfeln in isometrischer Perspektive gleitet diagonal, während ein weiches Licht darüber wandert.
Einstellungen
Code
<div class="pt-iso-cubes"><svg aria-hidden="true"><defs><pattern id="pt-iso-tile" width="38.105" height="66" patternUnits="userSpaceOnUse"><polygon class="t" points="19.05,0.00 38.11,11.00 19.05,22.00 0.00,11.00"/><polygon class="l" points="0.00,11.00 19.05,22.00 19.05,44.00 0.00,33.00"/><polygon class="r" points="19.05,22.00 38.11,11.00 38.11,33.00 19.05,44.00"/><polygon class="t" points="0.00,33.00 19.05,44.00 0.00,55.00 -19.05,44.00"/><polygon class="l" points="-19.05,44.00 0.00,55.00 0.00,77.00 -19.05,66.00"/><polygon class="r" points="0.00,55.00 19.05,44.00 19.05,66.00 0.00,77.00"/><polygon class="t" points="38.11,33.00 57.16,44.00 38.11,55.00 19.05,44.00"/><polygon class="l" points="19.05,44.00 38.11,55.00 38.11,77.00 19.05,66.00"/><polygon class="r" points="38.11,55.00 57.16,44.00 57.16,66.00 38.11,77.00"/><polygon class="t" points="0.00,-33.00 19.05,-22.00 0.00,-11.00 -19.05,-22.00"/><polygon class="l" points="-19.05,-22.00 0.00,-11.00 0.00,11.00 -19.05,0.00"/><polygon class="r" points="0.00,-11.00 19.05,-22.00 19.05,0.00 0.00,11.00"/><polygon class="t" points="38.11,-33.00 57.16,-22.00 38.11,-11.00 19.05,-22.00"/><polygon class="l" points="19.05,-22.00 38.11,-11.00 38.11,11.00 19.05,0.00"/><polygon class="r" points="38.11,-11.00 57.16,-22.00 57.16,0.00 38.11,11.00"/></pattern></defs><rect width="100%" height="100%" fill="url(#pt-iso-tile)"/></svg><i class="lt"></i></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Hintergründe
Alle ansehen: HintergründeWofür du ihn nutzen kannst
Die klassische Würfeltreppen Illusion als lebendiger Hintergrund. Jeder Würfel hat drei Seiten in deinen drei Farben, oben, links und rechts, sodass das Muster als massive 3D Blöcke oder als flache Sterne gelesen werden kann. Die ganze Fläche gleitet diagonal um genau eine Kachel für eine Schleife ohne sichtbare Kante.
Es ist reines HTML, eingebettetes SVG und CSS ohne JavaScript. Die Dichte skaliert die Würfel, das Tempo die Bewegung, und ein weicher Lichtschein gibt Tiefe. Reduzierte Bewegung stoppt beide Animationen. Passt zu Technik, Architektur und Games.