⚡ Circuitos dinámicos
Recarga para ver un nuevo patrón
Test
Fondo de circuitos
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: #0a0e1a;
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
color: white;
}
#circuit-bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
}
.content {
background: rgba(0,0,0,0.6);
padding: 2rem 3rem;
border-radius: 12px;
text-align: center;
border: 1px solid rgba(255,255,255,0.1);
}
function generateCircuitSVG() {
const svg = document.getElementById(‘circuit-bg’);
const w = window.innerWidth;
const h = window.innerHeight;
svg.setAttribute(‘viewBox’, `0 0 ${w} ${h}`);
// Limpiar
svg.innerHTML = ”;
// Fondo
const bg = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘rect’);
bg.setAttribute(‘width’, w);
bg.setAttribute(‘height’, h);
bg.setAttribute(‘fill’, ‘#0a0e1a’);
svg.appendChild(bg);
// Estilo de líneas
const strokeColor = ‘#2a6f8f’;
const strokeWidth = 1.8;
// Generar nodos aleatorios (puntos de conexión)
const numNodes = Math.floor(Math.random() * 50) + 40;
const nodes = [];
for (let i = 0; i < numNodes; i++) {
nodes.push({
x: Math.random() * w,
y: Math.random() * h
});
}
// Conectar nodos cercanos (distancias menores a un umbral)
const maxDist = Math.min(w, h) * 0.18;
for (let i = 0; i < nodes.length; i++) {
for (let j = i + 1; j < nodes.length; j++) {
const dx = nodes[i].x – nodes[j].x;
const dy = nodes[i].y – nodes[j].y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist 0.3) {
const line = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘line’);
line.setAttribute(‘x1’, nodes[i].x);
line.setAttribute(‘y1’, nodes[i].y);
line.setAttribute(‘x2’, nodes[j].x);
line.setAttribute(‘y2’, nodes[j].y);
line.setAttribute(‘stroke’, strokeColor);
line.setAttribute(‘stroke-width’, strokeWidth);
line.setAttribute(‘opacity’, 0.5 + Math.random() * 0.4);
// Opcional: agregar pequeño círculo en los nodos
svg.appendChild(line);
}
}
}
// Dibujar nodos (puntos)
for (const n of nodes) {
const circle = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘circle’);
circle.setAttribute(‘cx’, n.x);
circle.setAttribute(‘cy’, n.y);
circle.setAttribute(‘r’, 2 + Math.random() * 3);
circle.setAttribute(‘fill’, ‘#4a9fc5’);
circle.setAttribute(‘opacity’, 0.3 + Math.random() * 0.5);
svg.appendChild(circle);
}
// Añadir algunas líneas “anguladas” estilo placa (opcional)
for (let i = 0; i 0 && x2 0 && y2 < h) {
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', x1);
line.setAttribute('y1', y1);
line.setAttribute('x2', x2);
line.setAttribute('y2', y2);
line.setAttribute('stroke', '#3a7f9f');
line.setAttribute('stroke-width', 1.2);
line.setAttribute('opacity', 0.3);
svg.appendChild(line);
}
}
}
// Generar al cargar y al redimensionar
window.addEventListener('load', generateCircuitSVG);
window.addEventListener('resize', generateCircuitSVG);
Matías Valderrama Barragán 