app
Circuit Trace Generators
Public Made by Adomby adom
Two dependency-free, seeded circuit-background generators: a seamless torus tile with ambient or progressive reveal, and the v9 continuous field with obstacles, scroll reveal, and five ambient systems.
master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Procedural Circuit Background</title>
<style>
:root {
color-scheme: dark;
--bg: #0d1117;
--surface: #161b22;
--border: #30363d;
--text: #e6edf3;
--muted: #8b949e;
--accent: #00b8b0;
--accent-bright: #00e6dc;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
background: var(--bg);
color: var(--text);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.hero {
--circuit-hole: var(--bg);
position: relative;
min-height: 100svh;
overflow: hidden;
display: grid;
place-items: center;
isolation: isolate;
}
.circuit-layer {
position: absolute;
inset: 0;
z-index: 0;
}
.glow {
--atmosphere-strength: 1;
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(ellipse 46% 34% at 50% 45%, rgba(13, 17, 23, .64), rgba(13, 17, 23, .34) 48%, transparent 100%),
linear-gradient(to top, var(--bg) 0, transparent 13rem);
}
.glow::before {
content: "";
position: absolute;
inset: -12%;
background:
radial-gradient(ellipse 28% 38% at 22% 48%, rgba(0, 230, 220, .06), transparent 72%),
radial-gradient(ellipse 34% 42% at 58% 46%, rgba(57, 184, 255, .045), transparent 72%),
radial-gradient(ellipse 30% 38% at 84% 52%, rgba(140, 107, 247, .045), transparent 72%);
mix-blend-mode: screen;
opacity: calc(var(--atmosphere-strength) * .72);
filter: blur(34px);
}
.hero[data-motion="on"][data-animation-system="conductor"] .glow {
background:
radial-gradient(circle at 52% 44%, rgba(0, 230, 220, .06), transparent 34%),
linear-gradient(to top, var(--bg) 0, transparent 12rem);
animation: atmosphere-breathe 8s ease-in-out infinite alternate;
will-change: opacity, filter;
}
.hero[data-motion="on"][data-animation-system="conductor"] .glow::before {
inset: -18%;
background:
radial-gradient(circle at 28% 38%, rgba(0, 230, 220, .075), transparent 20%),
radial-gradient(circle at 72% 58%, rgba(100, 171, 255, .055), transparent 24%),
radial-gradient(circle at 52% 82%, rgba(197, 179, 255, .04), transparent 18%);
opacity: 1;
filter: none;
animation: atmosphere-drift 19s cubic-bezier(.45,.05,.55,.95) infinite alternate;
will-change: transform;
}
@keyframes atmosphere-breathe {
from { opacity: var(--atmosphere-low, .66); filter: saturate(.82); }
to { opacity: var(--atmosphere-high, 1); filter: saturate(1.18); }
}
@keyframes atmosphere-drift {
0% { transform: translate3d(-3%, -2%, 0) scale(1); }
45% { transform: translate3d(4%, 1%, 0) scale(1.08); }
100% { transform: translate3d(-1%, 5%, 0) scale(1.03); }
}
main {
position: relative;
z-index: 2;
width: min(760px, calc(100% - 40px));
text-align: center;
padding: 80px 0 180px;
}
.hero-copy { position: relative; }
.eyebrow {
margin: 0 0 20px;
color: var(--accent-bright);
font: 600 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: .18em;
text-transform: uppercase;
}
h1 {
margin: 0;
font-size: clamp(3.2rem, 10vw, 7.5rem);
line-height: .9;
letter-spacing: -.055em;
color: transparent;
background: linear-gradient(100deg, #e6edf3 4%, #00e6dc 38%, #39b8ff 66%, #8c6bf7 96%);
background-clip: text;
filter: drop-shadow(0 0 .4em rgba(255,255,255,.18));
}
.lede {
max-width: 570px;
margin: 28px auto 0;
color: #bac6d3;
font-size: clamp(1rem, 2vw, 1.25rem);
line-height: 1.6;
}
.hint {
margin-top: 24px;
color: var(--muted);
font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.controls {
position: fixed;
left: 50%;
bottom: 12px;
z-index: 5;
width: min(1180px, calc(100% - 24px));
transform: translateX(-50%);
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: end;
gap: 8px;
padding: 10px;
border: 1px solid rgba(48, 54, 61, .9);
border-radius: 12px;
background: rgba(22, 27, 34, .88);
box-shadow: 0 18px 70px rgba(0,0,0,.38);
backdrop-filter: blur(18px);
}
label { min-width: 0; display: grid; gap: 4px; color: var(--muted); font-size: 10px; }
label > span { display: flex; justify-content: space-between; gap: 3px; white-space: nowrap; }
input[type="text"] {
width: 100%;
height: 32px;
padding: 0 8px;
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
outline: none;
background: #0d1117;
font: 500 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
input[type="text"]:focus { border-color: var(--accent); }
input[type="range"] { width: 100%; accent-color: var(--accent); }
button {
height: 32px;
padding: 0 11px;
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
background: #21262d;
font: 700 12px system-ui, sans-serif;
cursor: pointer;
}
button:hover { border-color: #59636e; background: #282e36; }
button.primary { color: #062d2b; border-color: var(--accent); background: var(--accent); }
button.primary:hover { background: var(--accent-bright); }
.preset-bar {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.preset-title {
margin-right: 3px;
color: var(--muted);
font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: .12em;
text-transform: uppercase;
}
.preset-bar button {
height: 28px;
padding: 0 10px;
color: #aab5c1;
font-size: 11px;
}
.preset-bar button[aria-pressed="true"] {
color: #082f2d;
border-color: var(--accent);
background: var(--accent);
}
.parameter-panel {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: end;
gap: 8px;
}
.parameter-panel[hidden] { display: none; }
/* A quiet text toggle, not a button: it opens a drawer, it does not pick a preset. */
.preset-bar .panel-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
width: auto;
height: 28px;
padding: 0 2px;
margin-left: 4px;
color: var(--muted);
border: 0;
border-radius: 0;
background: none;
font: 600 11px system-ui, sans-serif;
}
.preset-bar .panel-toggle:hover { color: var(--text); border: 0; background: none; }
.preset-bar .panel-toggle:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.preset-bar .panel-toggle[aria-expanded="true"] { color: var(--accent-bright); }
.panel-toggle .chevron { display: inline-block; font-size: 9px; line-height: 1; transition: transform .15s ease; }
.panel-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.animation-bar {
padding-top: 8px;
border-top: 1px solid rgba(48, 54, 61, .72);
}
.movement-power {
flex: 1 1 150px;
max-width: 180px;
margin-left: 6px;
}
.movement-power input { margin: 0; }
.trace-count {
margin-left: auto;
color: var(--accent-bright);
font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
white-space: nowrap;
}
@media (max-width: 1180px) {
.controls {
grid-template-columns: repeat(6, minmax(0, 1fr));
max-height: calc(100svh - 24px);
overflow-y: auto;
}
.parameter-panel { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.preset-bar { flex-wrap: wrap; }
}
@media (max-width: 760px) {
.controls { grid-template-columns: 1fr 1fr; bottom: 12px; }
.parameter-panel { grid-template-columns: 1fr 1fr; }
.controls button { width: 100%; }
.preset-title { width: 100%; }
.trace-count { margin-left: 0; }
main { padding-bottom: 360px; }
}
@media (prefers-reduced-motion: reduce) {
.glow, .glow::before { animation: none; }
.panel-toggle .chevron { transition: none; }
}
</style>
</head>
<body>
<section class="hero" id="hero">
<div class="circuit-layer" id="circuit"></div>
<div class="glow" aria-hidden="true"></div>
<main>
<div class="hero-copy" data-circuit-reading-zone>
<p class="eyebrow">Seeded SVG generator</p>
<h1>Live circuitry</h1>
<p class="lede">
A procedural version of the Nitrogen hero pattern: dense routed traces, 45° chamfers,
annular vias, continuous trace packing, and multiple animation systems for the generated topology.
</p>
<p class="hint" id="motionHint">Static circuit · no animation layers</p>
</div>
</main>
</section>
<form class="controls" id="controls">
<div class="preset-bar" aria-label="Generator presets">
<span class="preset-title">Generation</span>
<button type="button" data-preset="original" aria-pressed="true">Original match</button>
<button type="button" data-preset="dense" aria-pressed="false">Dense</button>
<button type="button" data-preset="diagonal" aria-pressed="false">Diagonal sweep</button>
<button type="button" data-preset="swirl" aria-pressed="false">Broad swirl</button>
<button type="button" data-preset="sparse" aria-pressed="false">Sparse</button>
<button type="button" class="panel-toggle" id="parameterToggle" aria-expanded="false" aria-controls="parameterPanel">
Parameters<span class="chevron" aria-hidden="true">▾</span>
</button>
<output class="trace-count" id="traceCount">235 traces</output>
</div>
<div class="parameter-panel" id="parameterPanel" hidden>
<label>
Seed
<input id="seed" type="text" value="nitrogen" autocomplete="off" spellcheck="false" />
</label>
<label>
<span>Density <output id="fillValue">74.4%</output></span>
<input id="fill" type="range" min="0.35" max="0.76" step="0.001" value="0.744" />
</label>
<label>
<span>Avg length <output id="routeLengthValue">1.14×</output></span>
<input id="routeLength" type="range" min="0.55" max="2.25" step="0.01" value="1.14" />
</label>
<label>
<span>Primary flow <output id="horizontalFlowValue">90%</output></span>
<input id="horizontalFlow" type="range" min="0.3" max="0.98" step="0.01" value="0.9" />
</label>
<label>
<span>Angle <output id="flowAngleValue">153°</output></span>
<input id="flowAngle" type="range" min="0" max="180" step="1" value="153" />
</label>
<label>
<span>Diagonal <output id="diagonalFlowValue">100%</output></span>
<input id="diagonalFlow" type="range" min="0" max="1" step="0.01" value="1" />
</label>
<label>
<span>Long flow <output id="longFlowValue">31%</output></span>
<input id="longFlow" type="range" min="0" max="0.36" step="0.01" value="0.31" />
</label>
<label>
<span>Swirl <output id="swirlValue">82%</output></span>
<input id="swirl" type="range" min="0" max="1.4" step="0.01" value="0.82" />
</label>
<label>
<span>Swirl scale <output id="swirlScaleValue">0.72×</output></span>
<input id="swirlScale" type="range" min="0.25" max="1.4" step="0.01" value="0.72" />
</label>
<label>
<span>Jog size <output id="jogLengthValue">0.42×</output></span>
<input id="jogLength" type="range" min="0.3" max="1.8" step="0.01" value="0.42" />
</label>
<label>
<span>Channel pull <output id="channelAttractionValue">150%</output></span>
<input id="channelAttraction" type="range" min="0" max="1.5" step="0.01" value="1.5" />
</label>
<label>
<span>Scale <output id="featureScaleValue">1.37×</output></span>
<input id="featureScale" type="range" min="0.55" max="2" step="0.01" value="1.37" />
</label>
</div>
<div class="preset-bar animation-bar" aria-label="Animation presets">
<span class="preset-title">Animation</span>
<button type="button" data-animation-preset="none" aria-pressed="true">None</button>
<button type="button" data-animation-preset="growth" aria-pressed="false">Trace growth</button>
<button type="button" data-animation-preset="reflection" aria-pressed="false">Adom reflection</button>
<button type="button" data-animation-preset="conductor" aria-pressed="false">Conductor</button>
<button type="button" data-animation-preset="routed" aria-pressed="false">Routed field</button>
<button type="button" data-animation-preset="handshake" aria-pressed="false">Handshake</button>
<label class="movement-power">
<span>Movement power <output id="livelinessValue">0%</output></span>
<input id="liveliness" type="range" min="0" max="1.5" step="0.01" value="0" />
</label>
<button class="primary" type="submit">Generate</button>
<button id="download" type="button">Export SVG</button>
</div>
</form>
<script type="module">
import { ANIMATION_PRESETS, createCircuitBackground } from "./circuit-background-v6.js?v=1";
const mount = document.querySelector("#circuit");
const controls = document.querySelector("#controls");
const generationPresetButtons = [...document.querySelectorAll("[data-preset]")];
const animationPresetButtons = [...document.querySelectorAll("[data-animation-preset]")];
const traceCount = document.querySelector("#traceCount");
const hero = document.querySelector("#hero");
const glow = document.querySelector(".glow");
const seed = document.querySelector("#seed");
const parameterToggle = document.querySelector("#parameterToggle");
const parameterPanel = document.querySelector("#parameterPanel");
const motionHint = document.querySelector("#motionHint");
const download = document.querySelector("#download");
const geometryParameterIds = ["fill", "routeLength", "horizontalFlow", "flowAngle", "diagonalFlow", "longFlow", "swirl", "swirlScale", "jogLength", "channelAttraction", "featureScale"];
const animationParameterIds = ["liveliness"];
const parameterIds = [...geometryParameterIds, ...animationParameterIds];
const parameters = Object.fromEntries(parameterIds.map((id) => [id, document.querySelector(`#${id}`)]));
const presets = {
original: { fill: 0.744, routeLength: 1.14, horizontalFlow: 0.9, flowAngle: 153, diagonalFlow: 1, longFlow: 0.31, swirl: 0.82, swirlScale: 0.72, jogLength: 0.42, channelAttraction: 1.5, featureScale: 1.37 },
dense: { fill: 0.76, routeLength: 1.29, horizontalFlow: 0.57, flowAngle: 138, diagonalFlow: 0.26, longFlow: 0.3, swirl: 0.43, swirlScale: 0.52, jogLength: 0.85, channelAttraction: 0.69, featureScale: 0.65 },
diagonal: { fill: 0.591, routeLength: 1.51, horizontalFlow: 0.98, flowAngle: 45, diagonalFlow: 1, longFlow: 0, swirl: 0, swirlScale: 0.75, jogLength: 0.65, channelAttraction: 0.86, featureScale: 1.28 },
swirl: { fill: 0.58, routeLength: 1.1, horizontalFlow: 0.82, flowAngle: 15, diagonalFlow: 0.72, longFlow: 0.2, swirl: 0.9, swirlScale: 0.9, jogLength: 0.75, channelAttraction: 0.8, featureScale: 1 },
sparse: { fill: 0.35, routeLength: 1.9, horizontalFlow: 0.45, flowAngle: 0, diagonalFlow: 0.3, longFlow: 0.32, swirl: 0.08, swirlScale: 0.93, jogLength: 0.57, channelAttraction: 0.6, featureScale: 0.88 },
};
const animationHints = {
none: "Static circuit · no animation layers",
conductor: "Move to shape the current · click anywhere to activate the network",
adom: "Move to steer the routed field · click to launch a local bloom",
handshake: "Move to bias the next handshake · click to request a local exchange",
growth: "A curved routing front grows each trace from its source via to its destination",
reflection: "Move to catch the light · click to send a quiet reflection across the board",
};
const formats = {
fill: (value) => `${Number((value * 100).toFixed(1))}%`,
routeLength: (value) => `${value.toFixed(2)}×`,
horizontalFlow: (value) => `${Math.round(value * 100)}%`,
flowAngle: (value) => `${Math.round(value)}°`,
diagonalFlow: (value) => `${Math.round(value * 100)}%`,
longFlow: (value) => `${Math.round(value * 100)}%`,
swirl: (value) => `${Math.round(value * 100)}%`,
swirlScale: (value) => `${value.toFixed(2)}×`,
jogLength: (value) => `${value.toFixed(2)}×`,
channelAttraction: (value) => `${Math.round(value * 100)}%`,
featureScale: (value) => `${value.toFixed(2)}×`,
liveliness: (value) => `${Math.round(value * 100)}%`,
};
const query = new URLSearchParams(location.search);
const requestedAnimationPreset = query.get("animationPreset");
const initialAnimationPreset = ANIMATION_PRESETS[requestedAnimationPreset]
? requestedAnimationPreset
: "none";
let animationOptions = { ...ANIMATION_PRESETS[initialAnimationPreset] };
if (query.has("seed")) seed.value = query.get("seed").slice(0, 80);
for (const id of parameterIds) {
if (!query.has(id)) continue;
const value = Number(query.get(id));
if (Number.isFinite(value)) parameters[id].value = String(value);
}
// A deep link that tunes parameters should show them, not hide the reason the render differs.
if (geometryParameterIds.some((id) => query.has(id))) {
parameterToggle.setAttribute("aria-expanded", "true");
parameterPanel.hidden = false;
}
if (!query.has("liveliness")) parameters.liveliness.value = String(animationOptions.liveliness);
if (query.has("motion")) {
animationOptions.motion = !["0", "false", "off"].includes(query.get("motion").toLowerCase());
}
function setActiveGenerationPreset(name) {
for (const button of generationPresetButtons) {
button.setAttribute("aria-pressed", String(button.dataset.preset === name));
}
}
function setActiveAnimationPreset(name) {
for (const button of animationPresetButtons) {
button.setAttribute("aria-pressed", String(button.dataset.animationPreset === name));
}
}
function applyAtmosphere(options) {
const amount = Math.max(0, Math.min(1.25, options.atmosphereStrength));
hero.dataset.animationSystem = options.animationSystem;
hero.dataset.motion = options.motion ? "on" : "off";
glow.style.setProperty("--atmosphere-strength", String(amount));
glow.style.setProperty("--atmosphere-low", String(Math.min(1, amount * 0.66)));
glow.style.setProperty("--atmosphere-high", String(Math.min(1, amount)));
motionHint.textContent = animationHints[options.animationSystem] || animationHints.none;
}
if (geometryParameterIds.some((id) => query.has(id))) setActiveGenerationPreset(null);
const animationIsCustom = animationParameterIds.some((id) => query.has(id)) || query.has("motion");
setActiveAnimationPreset(animationIsCustom ? null : initialAnimationPreset);
applyAtmosphere(animationOptions);
function optionsFromControls() {
const options = {
...animationOptions,
seed: seed.value.trim() || "nitrogen",
traceColor: "#1d2938",
};
for (const id of parameterIds) options[id] = Number(parameters[id].value);
return options;
}
function updateOutput(id) {
const value = Number(parameters[id].value);
document.querySelector(`#${id}Value`).value = formats[id](value);
}
parameterIds.forEach(updateOutput);
const circuit = createCircuitBackground(mount, optionsFromControls());
let regenerationTimer;
function updateTraceCount() {
traceCount.value = `${circuit.field.traces.length} traces`;
}
updateTraceCount();
function regenerate() {
window.clearTimeout(regenerationTimer);
circuit.regenerate(optionsFromControls());
updateTraceCount();
}
for (const id of parameterIds) {
parameters[id].addEventListener("input", () => {
if (geometryParameterIds.includes(id)) setActiveGenerationPreset(null);
else setActiveAnimationPreset(null);
updateOutput(id);
window.clearTimeout(regenerationTimer);
regenerationTimer = window.setTimeout(regenerate, 140);
});
}
for (const button of generationPresetButtons) {
button.addEventListener("click", () => {
const name = button.dataset.preset;
const values = presets[name];
for (const [id, value] of Object.entries(values)) {
parameters[id].value = String(value);
updateOutput(id);
}
setActiveGenerationPreset(name);
regenerate();
});
}
parameterToggle.addEventListener("click", () => {
const expanded = parameterToggle.getAttribute("aria-expanded") === "true";
parameterToggle.setAttribute("aria-expanded", String(!expanded));
parameterPanel.hidden = expanded;
});
for (const button of animationPresetButtons) {
button.addEventListener("click", () => {
const name = button.dataset.animationPreset;
animationOptions = { ...ANIMATION_PRESETS[name] };
parameters.liveliness.value = String(animationOptions.liveliness);
updateOutput("liveliness");
applyAtmosphere(animationOptions);
setActiveAnimationPreset(name);
regenerate();
});
}
seed.addEventListener("change", regenerate);
controls.addEventListener("submit", (event) => {
event.preventDefault();
regenerate();
});
function saveBlob(text, name) {
const blob = new Blob([text], { type: "image/svg+xml" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = name;
link.click();
URL.revokeObjectURL(url);
}
const slug = () => (seed.value || "seed").replace(/[^a-z0-9_-]+/gi, "-");
download.addEventListener("click", () => {
saveBlob(circuit.exportSvg(), `circuit-${slug()}.svg`);
});
</script>
</body>
</html>