# Architect's blueprint

> A blue technical grid where walls, doors and dimension lines draw themselves while a dashed crosshair follows the pointer.

- Category: [Backgrounds](https://library.aimran.es/components/patterns)
- Built with: HTML + CSS
- Live editor: https://library.aimran.es/blocks/pt-uvq16-blueprint
- Library: AIMRAN Library (https://library.aimran.es), free, no sign-up, by Aimran Oukham

## Where 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.

## Code

### HTML

```html
<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>
```

### CSS

```css
.pt-uvq16-blueprint {
  --c1: #1d4f91;
  --c2: #eaf2ff;
  --c3: #ffb020;
  --k: 1;
  /* velocidad */
  --d: 1;
  /* densidad / escala */
  --o: 1;
  /* opacidad */
  --bg: #05060a;
  --fg: #ffffff;
  --blend: screen;
  min-height: 100vh;
}

.pt-uvq16-blueprint {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg);
  container-type: size;
  isolation: isolate;
}

.pt-uvq16-blueprint>* {
  opacity: var(--o);
}

.pt-uvq16-blueprint {
  background: radial-gradient(130% 100% at 50% 35%,color-mix(in srgb,var(--c1) 90%,#fff),color-mix(in srgb,var(--c1) 70%,#000));
}

.pt-uvq16-blueprint .g {
  position: absolute;
  inset: 0;
  --a: calc(64px / var(--d));
  --b: calc(var(--a) / 5);
  background-image: linear-gradient(color-mix(in srgb,var(--c2) 24%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--c2) 24%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--c2) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--c2) 9%,transparent) 1px,transparent 1px);
  background-size: var(--a) var(--a),var(--a) var(--a),var(--b) var(--b),var(--b) var(--b);
  background-position: center;
}

.pt-uvq16-blueprint svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(84cqw,125cqh);
  translate: -50% -50%;
  overflow: visible;
  fill: none;
  stroke: var(--c2);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pt-uvq16-blueprint .w {
  stroke-width: 4;
}

.pt-uvq16-blueprint .t {
  stroke-width: 1.5;
}

.pt-uvq16-blueprint .d {
  stroke-width: 1;
  stroke: var(--c3);
}

.pt-uvq16-blueprint path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: uvq16-bp-draw calc(14s / var(--k)) cubic-bezier(.45,0,.2,1) infinite;
  animation-delay: calc(var(--i) * .45s / var(--k));
}

.pt-uvq16-blueprint text {
  fill: var(--c3);
  stroke: none;
  font: 600 9px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing: .12em;
  text-anchor: middle;
  opacity: 0;
  animation: uvq16-bp-fade calc(14s / var(--k)) ease infinite;
}

.pt-uvq16-blueprint .cx,.pt-uvq16-blueprint .cy {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.pt-uvq16-blueprint .cx {
  width: 1px;
  height: 100%;
  background: repeating-linear-gradient(var(--c3) 0 6px,transparent 6px 10px);
  translate: var(--px,30cqw) 0;
  animation: uvq16-bp-x calc(11s / var(--k)) ease-in-out infinite alternate;
}

.pt-uvq16-blueprint .cy {
  height: 1px;
  width: 100%;
  background: repeating-linear-gradient(90deg,var(--c3) 0 6px,transparent 6px 10px);
  translate: 0 var(--py,40cqh);
  animation: uvq16-bp-y calc(7s / var(--k)) ease-in-out infinite alternate;
}

.pt-uvq16-blueprint[data-on] .cx,.pt-uvq16-blueprint[data-on] .cy {
  animation: none;
}

.pt-uvq16-blueprint .rd {
  position: absolute;
  left: 14px;
  top: 14px;
  font: 600 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing: .08em;
  color: var(--c2);
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb,var(--c2) 45%,transparent);
  background: color-mix(in srgb,var(--c1) 80%,transparent);
  font-variant-numeric: tabular-nums;
}

@keyframes uvq16-bp-draw {
  0% {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  30% {
    stroke-dashoffset: 0;
  }
  86% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  96%,100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes uvq16-bp-fade {
  0%,40% {
    opacity: 0;
  }
  50%,86% {
    opacity: 1;
  }
  96%,100% {
    opacity: 0;
  }
}

@keyframes uvq16-bp-x {
  from {
    translate: 18cqw 0;
  }
  to {
    translate: 82cqw 0;
  }
}

@keyframes uvq16-bp-y {
  from {
    translate: 0 22cqh;
  }
  to {
    translate: 0 78cqh;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pt-uvq16-blueprint path {
    animation: none;
    stroke-dashoffset: 0;
  }
  .pt-uvq16-blueprint text {
    animation: none;
    opacity: 1;
  }
  .pt-uvq16-blueprint .cx,.pt-uvq16-blueprint .cy {
    animation: none;
  }
}
```

### JavaScript

```js
(function (el) {
const rd=el.querySelector(".rd");const mv=e=>{const b=el.getBoundingClientRect();if(!b.width)return;const px=Math.min(1,Math.max(0,(e.clientX-b.left)/b.width)),py=Math.min(1,Math.max(0,(e.clientY-b.top)/b.height));el.style.setProperty("--px",(px*100).toFixed(2)+"cqw");el.style.setProperty("--py",(py*100).toFixed(2)+"cqh");el.dataset.on="1";rd.textContent="X "+String(Math.round(px*8000)).padStart(4,"0")+" · Y "+String(Math.round(py*4500)).padStart(4,"0")};
const lv=()=>{delete el.dataset.on};el.addEventListener("pointermove",mv);el.addEventListener("pointerleave",lv);
return()=>{el.removeEventListener("pointermove",mv);el.removeEventListener("pointerleave",lv)};
})(document.querySelector(".pt-uvq16-blueprint"));
```

### React

```tsx
// @ts-nocheck
import { useEffect, useRef } from "react";

const css = `
.pt-uvq16-blueprint {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg);
  container-type: size;
  isolation: isolate;
}

.pt-uvq16-blueprint>* {
  opacity: var(--o);
}

.pt-uvq16-blueprint {
  background: radial-gradient(130% 100% at 50% 35%,color-mix(in srgb,var(--c1) 90%,#fff),color-mix(in srgb,var(--c1) 70%,#000));
}

.pt-uvq16-blueprint .g {
  position: absolute;
  inset: 0;
  --a: calc(64px / var(--d));
  --b: calc(var(--a) / 5);
  background-image: linear-gradient(color-mix(in srgb,var(--c2) 24%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--c2) 24%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--c2) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--c2) 9%,transparent) 1px,transparent 1px);
  background-size: var(--a) var(--a),var(--a) var(--a),var(--b) var(--b),var(--b) var(--b);
  background-position: center;
}

.pt-uvq16-blueprint svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(84cqw,125cqh);
  translate: -50% -50%;
  overflow: visible;
  fill: none;
  stroke: var(--c2);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pt-uvq16-blueprint .w {
  stroke-width: 4;
}

.pt-uvq16-blueprint .t {
  stroke-width: 1.5;
}

.pt-uvq16-blueprint .d {
  stroke-width: 1;
  stroke: var(--c3);
}

.pt-uvq16-blueprint path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: uvq16-bp-draw calc(14s / var(--k)) cubic-bezier(.45,0,.2,1) infinite;
  animation-delay: calc(var(--i) * .45s / var(--k));
}

.pt-uvq16-blueprint text {
  fill: var(--c3);
  stroke: none;
  font: 600 9px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing: .12em;
  text-anchor: middle;
  opacity: 0;
  animation: uvq16-bp-fade calc(14s / var(--k)) ease infinite;
}

.pt-uvq16-blueprint .cx,.pt-uvq16-blueprint .cy {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.pt-uvq16-blueprint .cx {
  width: 1px;
  height: 100%;
  background: repeating-linear-gradient(var(--c3) 0 6px,transparent 6px 10px);
  translate: var(--px,30cqw) 0;
  animation: uvq16-bp-x calc(11s / var(--k)) ease-in-out infinite alternate;
}

.pt-uvq16-blueprint .cy {
  height: 1px;
  width: 100%;
  background: repeating-linear-gradient(90deg,var(--c3) 0 6px,transparent 6px 10px);
  translate: 0 var(--py,40cqh);
  animation: uvq16-bp-y calc(7s / var(--k)) ease-in-out infinite alternate;
}

.pt-uvq16-blueprint[data-on] .cx,.pt-uvq16-blueprint[data-on] .cy {
  animation: none;
}

.pt-uvq16-blueprint .rd {
  position: absolute;
  left: 14px;
  top: 14px;
  font: 600 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing: .08em;
  color: var(--c2);
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb,var(--c2) 45%,transparent);
  background: color-mix(in srgb,var(--c1) 80%,transparent);
  font-variant-numeric: tabular-nums;
}

@keyframes uvq16-bp-draw {
  0% {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  30% {
    stroke-dashoffset: 0;
  }
  86% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  96%,100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes uvq16-bp-fade {
  0%,40% {
    opacity: 0;
  }
  50%,86% {
    opacity: 1;
  }
  96%,100% {
    opacity: 0;
  }
}

@keyframes uvq16-bp-x {
  from {
    translate: 18cqw 0;
  }
  to {
    translate: 82cqw 0;
  }
}

@keyframes uvq16-bp-y {
  from {
    translate: 0 22cqh;
  }
  to {
    translate: 0 78cqh;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pt-uvq16-blueprint path {
    animation: none;
    stroke-dashoffset: 0;
  }
  .pt-uvq16-blueprint text {
    animation: none;
    opacity: 1;
  }
  .pt-uvq16-blueprint .cx,.pt-uvq16-blueprint .cy {
    animation: none;
  }
}

`;

export default function PatternUvq16Blueprint() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
const rd=el.querySelector(".rd");const mv=e=>{const b=el.getBoundingClientRect();if(!b.width)return;const px=Math.min(1,Math.max(0,(e.clientX-b.left)/b.width)),py=Math.min(1,Math.max(0,(e.clientY-b.top)/b.height));el.style.setProperty("--px",(px*100).toFixed(2)+"cqw");el.style.setProperty("--py",(py*100).toFixed(2)+"cqh");el.dataset.on="1";rd.textContent="X "+String(Math.round(px*8000)).padStart(4,"0")+" · Y "+String(Math.round(py*4500)).padStart(4,"0")};
const lv=()=>{delete el.dataset.on};el.addEventListener("pointermove",mv);el.addEventListener("pointerleave",lv);
return()=>{el.removeEventListener("pointermove",mv);el.removeEventListener("pointerleave",lv)};
  }, []);
  return (
    <>
      <style>{css}</style>
      <div
        ref={ref}
        className="pt-uvq16-blueprint"
        style={{
          "--c1": "#1d4f91",
          "--c2": "#eaf2ff",
          "--c3": "#ffb020",
          "--k": 1,
          "--d": 1,
          "--o": 1,
          "--bg": "#05060a",
          "--fg": "#ffffff",
          "--blend": "screen",
          minHeight: "100vh",
        }}
      >
        <div className="g"></div><svg viewBox="0 0 400 260" aria-hidden="true"><path className="w" pathLength="1" style={{ "--i": "0" } as CSSProperties} d="M40 40H360V220H40Z" /><path className="w" pathLength="1" style={{ "--i": "1" } as CSSProperties} d="M200 40V112M200 150V220" /><path className="w" pathLength="1" style={{ "--i": "2" } as CSSProperties} d="M40 130H130M170 130H200" /><path className="w" pathLength="1" style={{ "--i": "3" } as CSSProperties} d="M280 220V160H360" /><path className="t" pathLength="1" style={{ "--i": "4" } as CSSProperties} d="M130 130V90A40 40 0 0 1 170 130" /><path className="t" pathLength="1" style={{ "--i": "4" } as CSSProperties} d="M200 112H238A38 38 0 0 1 200 150" /><path className="t" pathLength="1" style={{ "--i": "5" } as CSSProperties} d="M80 34V46M150 34V46M80 38H150M80 42H150M356 70H364M356 120H364M358 70V120M362 70V120" /><path className="t" pathLength="1" style={{ "--i": "6" } as CSSProperties} d="M60 150H115V205H60ZM60 164H115" /><path className="t" pathLength="1" style={{ "--i": "6" } as CSSProperties} d="M263 90A22 22 0 1 1 307 90A22 22 0 1 1 263 90Z" /><path className="t" pathLength="1" style={{ "--i": "7" } as CSSProperties} d="M247 84h8v12h-8zM315 84h8v12h-8zM279 58h12v8h-12zM279 114h12v8h-12z" /><path className="t" pathLength="1" style={{ "--i": "7" } as CSSProperties} d="M290 165V215M300 165V215M310 165V215M320 165V215M330 165V215M340 165V215M350 165V215M284 190H356" /><path className="d" pathLength="1" style={{ "--i": "8" } as CSSProperties} 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 className="cx"></i><i className="cy"></i><b className="rd">X 0000 · Y 0000</b>
      </div>
    </>
  );
}
```

## Prompt for AI assistants

Paste this into ChatGPT, Claude, Cursor, v0 or Lovable to adapt the block to your stack (Tailwind, Vue, Svelte…):

````text
I want to add the “Architect's blueprint” block (Backgrounds) from AIMRAN Library to my project.

## What it is
A blue technical grid where walls, doors and dimension lines draw themselves while a dashed crosshair follows the pointer.

## Chosen settings
- Color 1: #1d4f91
- Color 2: #eaf2ff
- Color 3: #ffb020
- Speed: 1x (from 0.2 to 3x)
- Density / scale: 1x (from 0.5 to 2x)
- Opacity: 1 (from 0.2 to 1)

## What I need
1. Add it to my project with the same look and animation as the reference code: same sizes, colours, radii, shadows, timings and easing.
2. It is built with plain HTML and CSS (the reference wraps it in a React component with its CSS). If my project uses something else (Vue, Svelte, Astro, plain HTML…), translate it without losing any behaviour. If I use Tailwind, turn the styles into classes; if not, keep the CSS in its own file.
3. Expose the settings above as props (or CSS variables) with those values as defaults.
4. Make it work well on phones: nothing that depends only on hover, touch targets of at least 44 px and no overflow on 320 px screens.
5. Make it look right in light and dark mode.
6. Keep it accessible: semantic HTML, roles and aria-* where needed, visible focus and keyboard support.
7. Respect prefers-reduced-motion: with reduced motion, no big animations but the same end result.

## Reference code
```tsx
// @ts-nocheck
import { useEffect, useRef } from "react";

const css = `
.pt-uvq16-blueprint {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg);
  container-type: size;
  isolation: isolate;
}

.pt-uvq16-blueprint>* {
  opacity: var(--o);
}

.pt-uvq16-blueprint {
  background: radial-gradient(130% 100% at 50% 35%,color-mix(in srgb,var(--c1) 90%,#fff),color-mix(in srgb,var(--c1) 70%,#000));
}

.pt-uvq16-blueprint .g {
  position: absolute;
  inset: 0;
  --a: calc(64px / var(--d));
  --b: calc(var(--a) / 5);
  background-image: linear-gradient(color-mix(in srgb,var(--c2) 24%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--c2) 24%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--c2) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--c2) 9%,transparent) 1px,transparent 1px);
  background-size: var(--a) var(--a),var(--a) var(--a),var(--b) var(--b),var(--b) var(--b);
  background-position: center;
}

.pt-uvq16-blueprint svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(84cqw,125cqh);
  translate: -50% -50%;
  overflow: visible;
  fill: none;
  stroke: var(--c2);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pt-uvq16-blueprint .w {
  stroke-width: 4;
}

.pt-uvq16-blueprint .t {
  stroke-width: 1.5;
}

.pt-uvq16-blueprint .d {
  stroke-width: 1;
  stroke: var(--c3);
}

.pt-uvq16-blueprint path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: uvq16-bp-draw calc(14s / var(--k)) cubic-bezier(.45,0,.2,1) infinite;
  animation-delay: calc(var(--i) * .45s / var(--k));
}

.pt-uvq16-blueprint text {
  fill: var(--c3);
  stroke: none;
  font: 600 9px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing: .12em;
  text-anchor: middle;
  opacity: 0;
  animation: uvq16-bp-fade calc(14s / var(--k)) ease infinite;
}

.pt-uvq16-blueprint .cx,.pt-uvq16-blueprint .cy {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.pt-uvq16-blueprint .cx {
  width: 1px;
  height: 100%;
  background: repeating-linear-gradient(var(--c3) 0 6px,transparent 6px 10px);
  translate: var(--px,30cqw) 0;
  animation: uvq16-bp-x calc(11s / var(--k)) ease-in-out infinite alternate;
}

.pt-uvq16-blueprint .cy {
  height: 1px;
  width: 100%;
  background: repeating-linear-gradient(90deg,var(--c3) 0 6px,transparent 6px 10px);
  translate: 0 var(--py,40cqh);
  animation: uvq16-bp-y calc(7s / var(--k)) ease-in-out infinite alternate;
}

.pt-uvq16-blueprint[data-on] .cx,.pt-uvq16-blueprint[data-on] .cy {
  animation: none;
}

.pt-uvq16-blueprint .rd {
  position: absolute;
  left: 14px;
  top: 14px;
  font: 600 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing: .08em;
  color: var(--c2);
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb,var(--c2) 45%,transparent);
  background: color-mix(in srgb,var(--c1) 80%,transparent);
  font-variant-numeric: tabular-nums;
}

@keyframes uvq16-bp-draw {
  0% {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  30% {
    stroke-dashoffset: 0;
  }
  86% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  96%,100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes uvq16-bp-fade {
  0%,40% {
    opacity: 0;
  }
  50%,86% {
    opacity: 1;
  }
  96%,100% {
    opacity: 0;
  }
}

@keyframes uvq16-bp-x {
  from {
    translate: 18cqw 0;
  }
  to {
    translate: 82cqw 0;
  }
}

@keyframes uvq16-bp-y {
  from {
    translate: 0 22cqh;
  }
  to {
    translate: 0 78cqh;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pt-uvq16-blueprint path {
    animation: none;
    stroke-dashoffset: 0;
  }
  .pt-uvq16-blueprint text {
    animation: none;
    opacity: 1;
  }
  .pt-uvq16-blueprint .cx,.pt-uvq16-blueprint .cy {
    animation: none;
  }
}

`;

export default function PatternUvq16Blueprint() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
const rd=el.querySelector(".rd");const mv=e=>{const b=el.getBoundingClientRect();if(!b.width)return;const px=Math.min(1,Math.max(0,(e.clientX-b.left)/b.width)),py=Math.min(1,Math.max(0,(e.clientY-b.top)/b.height));el.style.setProperty("--px",(px*100).toFixed(2)+"cqw");el.style.setProperty("--py",(py*100).toFixed(2)+"cqh");el.dataset.on="1";rd.textContent="X "+String(Math.round(px*8000)).padStart(4,"0")+" · Y "+String(Math.round(py*4500)).padStart(4,"0")};
const lv=()=>{delete el.dataset.on};el.addEventListener("pointermove",mv);el.addEventListener("pointerleave",lv);
return()=>{el.removeEventListener("pointermove",mv);el.removeEventListener("pointerleave",lv)};
  }, []);
  return (
    <>
      <style>{css}</style>
      <div
        ref={ref}
        className="pt-uvq16-blueprint"
        style={{
          "--c1": "#1d4f91",
          "--c2": "#eaf2ff",
          "--c3": "#ffb020",
          "--k": 1,
          "--d": 1,
          "--o": 1,
          "--bg": "#05060a",
          "--fg": "#ffffff",
          "--blend": "screen",
          minHeight: "100vh",
        }}
      >
        <div className="g"></div><svg viewBox="0 0 400 260" aria-hidden="true"><path className="w" pathLength="1" style={{ "--i": "0" } as CSSProperties} d="M40 40H360V220H40Z" /><path className="w" pathLength="1" style={{ "--i": "1" } as CSSProperties} d="M200 40V112M200 150V220" /><path className="w" pathLength="1" style={{ "--i": "2" } as CSSProperties} d="M40 130H130M170 130H200" /><path className="w" pathLength="1" style={{ "--i": "3" } as CSSProperties} d="M280 220V160H360" /><path className="t" pathLength="1" style={{ "--i": "4" } as CSSProperties} d="M130 130V90A40 40 0 0 1 170 130" /><path className="t" pathLength="1" style={{ "--i": "4" } as CSSProperties} d="M200 112H238A38 38 0 0 1 200 150" /><path className="t" pathLength="1" style={{ "--i": "5" } as CSSProperties} d="M80 34V46M150 34V46M80 38H150M80 42H150M356 70H364M356 120H364M358 70V120M362 70V120" /><path className="t" pathLength="1" style={{ "--i": "6" } as CSSProperties} d="M60 150H115V205H60ZM60 164H115" /><path className="t" pathLength="1" style={{ "--i": "6" } as CSSProperties} d="M263 90A22 22 0 1 1 307 90A22 22 0 1 1 263 90Z" /><path className="t" pathLength="1" style={{ "--i": "7" } as CSSProperties} d="M247 84h8v12h-8zM315 84h8v12h-8zM279 58h12v8h-12zM279 114h12v8h-12z" /><path className="t" pathLength="1" style={{ "--i": "7" } as CSSProperties} d="M290 165V215M300 165V215M310 165V215M320 165V215M330 165V215M340 165V215M350 165V215M284 190H356" /><path className="d" pathLength="1" style={{ "--i": "8" } as CSSProperties} 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 className="cx"></i><i className="cy"></i><b className="rd">X 0000 · Y 0000</b>
      </div>
    </>
  );
}
```

Give me the complete final code, ready to paste, and tell me in one line where to put it in my project.
````