Architect's blueprint
A blue technical grid where walls, doors and dimension lines draw themselves while a dashed crosshair follows the pointer.
Settings
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 for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
See all BackgroundsWhere to use it
This background recreates a classic cyanotype floor plan. A CSS grid with major and minor lines sets the paper, and an inline SVG draws walls, door swings, furniture and dimension lines one after another with stroke-dashoffset, then fades them out and starts again. It fits architecture studios, real estate tools, engineering docs and any product about planning.
Change the paper blue, the line color and the amber accent used for dimensions and the crosshair. Density sets the grid size and speed the drawing pace. A small script moves the crosshair and updates the coordinate readout in the corner.