Blaupause vom Architekten
Ein blaues Technikraster, auf dem sich Wände, Türen und Maßlinien selbst zeichnen, während ein gestricheltes Fadenkreuz dem Cursor folgt.
Einstellungen
Code
<div class="pt-uvq16-blueprint"><div class="g"></div><svg viewBox="0 0 400 260" aria-hidden="true"><path class="w" pathLength="1" style="--i:0" d="M40 40H360V220H40Z"/><path class="w" pathLength="1" style="--i:1" d="M200 40V112M200 150V220"/><path class="w" pathLength="1" style="--i:2" d="M40 130H130M170 130H200"/><path class="w" pathLength="1" style="--i:3" d="M280 220V160H360"/><path class="t" pathLength="1" style="--i:4" d="M130 130V90A40 40 0 0 1 170 130"/><path class="t" pathLength="1" style="--i:4" d="M200 112H238A38 38 0 0 1 200 150"/><path class="t" pathLength="1" style="--i:5" d="M80 34V46M150 34V46M80 38H150M80 42H150M356 70H364M356 120H364M358 70V120M362 70V120"/><path class="t" pathLength="1" style="--i:6" d="M60 150H115V205H60ZM60 164H115"/><path class="t" pathLength="1" style="--i:6" d="M263 90A22 22 0 1 1 307 90A22 22 0 1 1 263 90Z"/><path class="t" pathLength="1" style="--i:7" d="M247 84h8v12h-8zM315 84h8v12h-8zM279 58h12v8h-12zM279 114h12v8h-12z"/><path class="t" pathLength="1" style="--i:7" d="M290 165V215M300 165V215M310 165V215M320 165V215M330 165V215M340 165V215M350 165V215M284 190H356"/><path class="d" pathLength="1" style="--i:8" d="M40 22H360M40 16V28M360 16V28M376 40V220M370 40H382M370 220H382M16 70L22 52L28 70L22 65Z"/><text x="200" y="12">8000</text><text x="392" y="130" transform="rotate(90 392 130)">4500</text><text x="22" y="84">N</text></svg><i class="cx"></i><i class="cy"></i><b class="rd">X 0000 · Y 0000</b></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
Dieser Hintergrund stellt einen klassischen Grundriss als Blaupause nach. Ein CSS-Raster mit Haupt- und Hilfslinien bildet das Papier, ein Inline-SVG zeichnet Wände, Türschwünge, Möbel und Maßketten nacheinander per stroke-dashoffset, blendet sie aus und beginnt von vorn. Er passt zu Architekturbüros, Immobilienportalen, technischer Dokumentation und Planungswerkzeugen.
Passe das Blau des Papiers, die Linienfarbe und den Bernsteinton für Maße und Fadenkreuz an. Die Dichte steuert die Rastergröße, die Geschwindigkeit das Zeichentempo. Ein kleines Skript bewegt das Fadenkreuz und aktualisiert die Koordinaten in der Ecke.