This is a free, copy-paste ready animated gold circuit board background built entirely with HTML, CSS, and inline SVG — zero JavaScript required. Two symmetric gold circuit panels flank a central glowing IC chip node, with CSS keyframe-powered glow pulses and a sweeping light beam that travels across the full composition on an infinite loop.
The luxury gold color palette — constructed from SVG linearGradient and
radialGradient definitions — makes this the perfect background for premium tech products,
fintech websites, cybersecurity landing pages, AI company hero sections, electronics portfolios, and
award certificate designs. It loads in milliseconds, works in all modern browsers, and requires
no build tools, npm, or server.
The gold circuit board animation works beautifully as a tech company hero section background, a loading screen for web apps, a certificate or award background, a cybersecurity or AI landing page backdrop, a fintech product page, or as a decorative frame around centered product showcases. The symmetric composition and central focal point make it especially effective with white or light text overlaid on top.
Change the gold to any color by editing the stop-color values in the SVG
<linearGradient> and <radialGradient> blocks.
For blue circuits use #4da6ff and #1e5fa0.
For neon green use #00ff88 and #00a355.
Adjust animation speed by changing the duration in @keyframes glow (default 2.4s)
and @keyframes sweep (default 4.8s).
Scale the panels by modifying width: 23vw on .circuit-svg.
Released under Creative Commons Attribution 4.0 International (CC BY 4.0). Free for personal and commercial use with attribution to Coodeverse. No Red Bull or other brand elements in this project — completely original work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Premium Gold Circuit Board Background with Glow Animation</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
background: radial-gradient(circle at 50% 55%, #f9f7f3 60%, #fceabb 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.circuit-bg {
position: relative;
width: 98vw;
height: 90vh;
background: none;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.circuit-svg {
position: absolute;
top: 0; bottom: 0;
height: 100%;
width: 23vw;
filter: drop-shadow(0 0 8px #ecdaa0aa) drop-shadow(0 0 2px #ffe7b099);
opacity: 0.93;
pointer-events: none;
}
.circuit-left { left: 0; transform: scaleX(-1); z-index: 2; }
.circuit-right { right: 0; z-index: 2; }
.centerpiece { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; }
.glow-pulse { animation: glow 2.4s infinite alternate; }
@keyframes glow {
0% { filter: drop-shadow(0 0 12px #ecd67055) drop-shadow(0 0 6px #fff7df99); }
100% { filter: drop-shadow(0 0 32px #ffeabfbb) drop-shadow(0 0 13px #ffedc7d1); }
}
.circuit-bg::before {
content: "";
position: absolute;
left: 40%;
top: 0;
width: 20vw;
height: 90%;
background: linear-gradient(90deg, transparent 0%, rgba(255,245,222,0.22) 50%, transparent 100%);
pointer-events: none;
z-index: 4;
animation: sweep 4.8s linear infinite;
opacity: 0.54;
}
@keyframes sweep {
0% { left:10%; opacity: 0.09; }
45% { left:45%; opacity: 0.54; }
60% { left:65%; opacity: 0.32; }
100% { left:93%; opacity: 0.05; }
}
</style>
</head>
<body>
<div class="circuit-bg">
<!-- LEFT SVG -->
<svg class="circuit-svg circuit-left" viewBox="0 0 180 600" fill="none" xmlns="http://www.w3.org/2000/svg">
<g stroke="url(#gold1)" stroke-width="3.7">
<polyline points="172,60 28,315 168,555" />
<polyline points="151,90 44,315 151,530" />
<polyline points="142,170 82,315 142,435"/>
<line x1="137" y1="240" x2="112" y2="315"/>
<line x1="137" y1="385" x2="112" y2="315"/>
<circle cx="112" cy="315" r="9" fill="url(#gold1)" class="glow-pulse"/>
</g>
<g stroke="url(#gold2)" stroke-width="2">
<polyline points="23,133 48,176 33,295"/>
<polyline points="60,590 54,547 62,402"/>
<line x1="42" y1="323" x2="49" y2="313"/>
<line x1="49" y1="279" x2="49" y2="270"/>
<line x1="60" y1="530" x2="120" y2="590"/>
<ellipse cx="23" cy="133" rx="4" ry="4" fill="url(#gold1)" opacity="0.85"/>
<ellipse cx="42" cy="323" rx="3" ry="3" fill="url(#gold1)" opacity="0.77"/>
</g>
<g>
<circle cx="151" cy="530" r="2" fill="#fff7df"/>
<circle cx="54" cy="547" r="1.8" fill="#ffe7b0"/>
<circle cx="120" cy="590" r="2.5" fill="#ffefb7"/>
</g>
<defs>
<linearGradient id="gold1" x1="0" y1="0" x2="200" y2="600" gradientUnits="userSpaceOnUse">
<stop stop-color="#ffefb7"/>
<stop offset="0.25" stop-color="#f3c761"/>
<stop offset="0.59" stop-color="#bfa046"/>
<stop offset="1" stop-color="#ffe993"/>
</linearGradient>
<linearGradient id="gold2" x1="0" y1="0" x2="180" y2="600" gradientUnits="userSpaceOnUse">
<stop stop-color="#ffeabf"/>
<stop offset="0.58" stop-color="#bfa046"/>
<stop offset="1" stop-color="#ffe993"/>
</linearGradient>
</defs>
</svg>
<!-- RIGHT SVG -->
<svg class="circuit-svg circuit-right" viewBox="0 0 180 600" fill="none" xmlns="http://www.w3.org/2000/svg">
<g stroke="url(#gold1r)" stroke-width="3.7">
<polyline points="172,60 28,315 168,555" />
<polyline points="151,90 44,315 151,530" />
<polyline points="142,170 82,315 142,435"/>
<line x1="137" y1="240" x2="112" y2="315"/>
<line x1="137" y1="385" x2="112" y2="315"/>
<circle cx="112" cy="315" r="9" fill="url(#gold1r)" class="glow-pulse"/>
</g>
<g stroke="url(#gold2r)" stroke-width="2">
<polyline points="23,133 48,176 33,295"/>
<polyline points="60,590 54,547 62,402"/>
<line x1="42" y1="323" x2="49" y2="313"/>
<line x1="49" y1="279" x2="49" y2="270"/>
<line x1="60" y1="530" x2="120" y2="590"/>
<ellipse cx="23" cy="133" rx="4" ry="4" fill="url(#gold1r)" opacity="0.85"/>
<ellipse cx="42" cy="323" rx="3" ry="3" fill="url(#gold1r)" opacity="0.77"/>
</g>
<g>
<circle cx="151" cy="530" r="2" fill="#fff7df"/>
<circle cx="54" cy="547" r="1.8" fill="#ffe7b0"/>
<circle cx="120" cy="590" r="2.5" fill="#ffefb7"/>
</g>
<defs>
<linearGradient id="gold1r" x1="0" y1="0" x2="200" y2="600" gradientUnits="userSpaceOnUse">
<stop stop-color="#ffefb7"/>
<stop offset="0.21" stop-color="#f3c761"/>
<stop offset="0.66" stop-color="#bfa046"/>
<stop offset="1" stop-color="#ffe993"/>
</linearGradient>
<linearGradient id="gold2r" x1="0" y1="0" x2="180" y2="600" gradientUnits="userSpaceOnUse">
<stop stop-color="#ffeabf"/>
<stop offset="0.67" stop-color="#bfa046"/>
<stop offset="1" stop-color="#ffe993"/>
</linearGradient>
</defs>
</svg>
<!-- CENTRAL IC NODE -->
<svg class="centerpiece" width="120" height="120" viewBox="0 0 90 90">
<circle cx="45" cy="45" r="43" fill="url(#centerglow)" opacity="0.38"/>
<circle cx="45" cy="45" r="27" fill="url(#centerglow)" opacity="0.54"/>
<circle cx="45" cy="45" r="14" fill="url(#centerglow)" class="glow-pulse"/>
<rect x="28" y="28" width="34" height="34" rx="7" fill="#fff7dfdd" stroke="url(#gold1c)" stroke-width="3"/>
<rect x="33" y="19" width="4" height="10" rx="2" fill="url(#gold2c)" />
<rect x="53" y="19" width="4" height="10" rx="2" fill="url(#gold2c)" />
<rect x="19" y="33" width="10" height="4" rx="2" fill="url(#gold2c)" />
<rect x="61" y="33" width="10" height="4" rx="2" fill="url(#gold2c)" />
<rect x="33" y="62" width="4" height="10" rx="2" fill="url(#gold2c)" />
<rect x="53" y="62" width="4" height="10" rx="2" fill="url(#gold2c)" />
<rect x="62" y="53" width="10" height="4" rx="2" fill="url(#gold2c)" />
<rect x="19" y="53" width="10" height="4" rx="2" fill="url(#gold2c)" />
<defs>
<radialGradient id="centerglow" cx="0.5" cy="0.5" r="0.75" fx="0.5" fy="0.5">
<stop offset="0%" stop-color="#fffbe1"/>
<stop offset="80%" stop-color="#ffe993"/>
<stop offset="100%" stop-color="#bfa046" />
</radialGradient>
<linearGradient id="gold1c" x1="10" y1="10" x2="90" y2="90">
<stop stop-color="#ffefb7"/>
<stop offset="0.38" stop-color="#f3c761"/>
<stop offset="0.79" stop-color="#bfa046"/>
<stop offset="1" stop-color="#ffe993"/>
</linearGradient>
<linearGradient id="gold2c" x1="0" y1="0" x2="90" y2="90">
<stop stop-color="#ffeabf"/>
<stop offset="0.79" stop-color="#bfa046"/>
<stop offset="1" stop-color="#ffe993"/>
</linearGradient>
</defs>
</svg>
</div>
</body>
</html>
Common questions about this free HTML CSS SVG circuit board animation project.
Yes — 100% free under Creative Commons Attribution 4.0. No sign-up, no payment, no watermarks. Click Download Project above and use it in any personal or commercial project with attribution to Coodeverse.
Zero JavaScript. Every animation — glow pulse, sweep light effect, IC node — is powered entirely by CSS @keyframes and inline SVG. Ultra-fast, lightweight, and compatible with any HTML page, React, Vue, Next.js, or static site generator.
Download and extract the ZIP. Copy the .circuit-bg div with both SVG elements into your HTML. Copy the CSS rules into your stylesheet. No npm, no build step — done in under 2 minutes.
Yes. Edit the stop-color values in the SVG gradient definitions. For blue circuits use #4da6ff / #1e5fa0. For neon green use #00ff88 / #00a355. Animation duration is in @keyframes glow (2.4s) and @keyframes sweep (4.8s).
Perfect for tech company hero sections, AI and machine learning landing pages, cybersecurity websites, fintech products, electronics portfolios, certificate or award designs, premium product pages, and app loading screens. The luxury gold aesthetic suits innovation-focused brands especially well.
Right-click the downloaded ZIP → Properties → check "Unblock" at the bottom (if shown) → Apply → OK. Extract the ZIP. This removes the Windows security flag on internet-downloaded files so your browser runs the HTML page correctly.
Browse all free projects at coodeverse.com/projects — Cosmos Star Animation, Particle Fireworks, Epic Animated Delete, Holographic Login, Neon Toggle Switch, Red Bull Landing Page, and dozens more. All 100% free with complete source code.