<div class="hud-container">
<div class="hud-wrapper">
<svg class="hud-svg" viewBox="0 0 200 200">
<circle class="hud-track" cx="100" cy="100" r="90"></circle>
<circle class="hud-progress outer-ring" id="ring-1" cx="100" cy="100" r="90"></circle>
<circle class="hud-track" cx="100" cy="100" r="70"></circle>
<circle class="hud-progress middle-ring" id="ring-2" cx="100" cy="100" r="70"></circle>
<circle class="hud-track" cx="100" cy="100" r="50"></circle>
<circle class="hud-progress inner-ring" id="ring-3" cx="100" cy="100" r="50"></circle>
</svg>
<div class="hud-data">
<span class="hud-value" id="hud-val">87%</span>
<span class="hud-label">SYSTEM</span>
</div>
</div>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #020617;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.hud-container {
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle, rgba(15, 23, 42, 1) 0%, rgba(2, 6, 23, 1) 100%);
border-radius: 50%;
box-shadow: 0 0 50px rgba(59, 130, 246, 0.2), inset 0 0 30px rgba(59, 130, 246, 0.1);
}
.hud-wrapper {
position: relative;
width: 200px;
height: 200px;
}
.hud-svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.hud-track {
fill: none;
stroke: rgba(51, 65, 85, 0.5);
stroke-width: 4;
}
.hud-progress {
fill: none;
stroke-linecap: round;
transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.outer-ring {
stroke: #3b82f6;
stroke-width: 6;
stroke-dasharray: 565.48;
stroke-dashoffset: 565.48;
filter: drop-shadow(0 0 8px #3b82f6);
}
.middle-ring {
stroke: #10b981;
stroke-width: 5;
stroke-dasharray: 439.82;
stroke-dashoffset: 439.82;
filter: drop-shadow(0 0 6px #10b981);
}
.inner-ring {
stroke: #ec4899;
stroke-width: 4;
stroke-dasharray: 314.15;
stroke-dashoffset: 314.15;
filter: drop-shadow(0 0 4px #ec4899);
}
.hud-data {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hud-value {
color: #ffffff;
font-size: 2.5rem;
font-weight: 800;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
letter-spacing: 1px;
}
.hud-label {
color: #3b82f6;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 4px;
margin-top: 4px;
}
const ring1 = document.getElementById("ring-1");
const ring2 = document.getElementById("ring-2");
const ring3 = document.getElementById("ring-3");
const hudVal = document.getElementById("hud-val");
// Circumferences of the rings
const c1 = 565.48;
const c2 = 439.82;
const c3 = 314.15;
function updateHUD() {
const v1 = Math.floor(Math.random() * 40) + 60; // 60-100
const v2 = Math.floor(Math.random() * 50) + 30; // 30-80
const v3 = Math.floor(Math.random() * 60) + 20; // 20-80
ring1.style.strokeDashoffset = c1 - (v1 / 100) * c1;
ring2.style.strokeDashoffset = c2 - (v2 / 100) * c2;
ring3.style.strokeDashoffset = c3 - (v3 / 100) * c3;
hudVal.innerText = v1 + "%";
}
setTimeout(updateHUD, 100);
setInterval(updateHUD, 3000);
