HUD Rings Background
A sci-fi heads-up display: dashed, dotted and broken rings turn at different speeds and directions around a pulsing core, over faint crosshairs. Every ring is a bordered circle that only rotates.
Also known as: sci fi hud background css, rotating circles background, tech circle animation.
HTML
<div class="bgx-hud-rings" aria-hidden="true"> <span class="bgx-hud-rings-ring" style="--d: 5em; --t: 9s; --b: dashed"></span> <span class="bgx-hud-rings-ring bgx-hud-rings-arcs" style="--d: 8em; --t: 6s; --dir: reverse"></span> <span class="bgx-hud-rings-ring" style="--d: 11.5em; --t: 24s; --b: dotted"></span> <span class="bgx-hud-rings-ring bgx-hud-rings-arcs" style="--d: 15em; --t: 14s"></span> <span class="bgx-hud-rings-ring bgx-hud-rings-ticks" style="--d: 19em; --t: 40s; --dir: reverse"></span> <span class="bgx-hud-rings-core"></span> </div>
CSS
.bgx-hud-rings {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background:
linear-gradient(90deg, transparent calc(50% - 0.5px), color-mix(in srgb, var(--c) 18%, transparent) 0 calc(50% + 0.5px), transparent 0),
linear-gradient(transparent calc(50% - 0.5px), color-mix(in srgb, var(--c) 18%, transparent) 0 calc(50% + 0.5px), transparent 0),
radial-gradient(circle, color-mix(in srgb, var(--c) 18%, #05070c), color-mix(in srgb, var(--c) 5%, #030407) 70%);
}
.bgx-hud-rings-ring,
.bgx-hud-rings-core {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
}
.bgx-hud-rings-ring {
width: var(--d);
height: var(--d);
margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
border: 0.12em var(--b, solid) color-mix(in srgb, var(--c) 55%, transparent);
animation: bgx-hud-rings-turn var(--t) linear infinite var(--dir, normal);
}
.bgx-hud-rings .bgx-hud-rings-arcs {
border-width: 0.2em;
border-color: var(--c) transparent color-mix(in srgb, var(--c) 60%, #fff) transparent;
}
.bgx-hud-rings .bgx-hud-rings-ticks {
border: 0;
background: repeating-conic-gradient(color-mix(in srgb, var(--c) 45%, transparent) 0 1deg, transparent 1deg 6deg);
-webkit-mask: radial-gradient(closest-side, transparent calc(100% - 0.6em), #000 calc(100% - 0.55em));
mask: radial-gradient(closest-side, transparent calc(100% - 0.6em), #000 calc(100% - 0.55em));
}
.bgx-hud-rings-core {
width: 1em;
height: 1em;
margin: -0.5em 0 0 -0.5em;
background: color-mix(in srgb, var(--c) 50%, #fff);
box-shadow: 0 0 1em var(--c);
animation: bgx-hud-rings-pulse 2s ease-in-out infinite;
}
@keyframes bgx-hud-rings-turn {
to { transform: rotate(1turn); }
}
@keyframes bgx-hud-rings-pulse {
0%, 100% { transform: scale(0.7); opacity: 0.7; }
50% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-hud-rings, .bgx-hud-rings *, .bgx-hud-rings::before, .bgx-hud-rings::after, .bgx-hud-rings *::before, .bgx-hud-rings *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<div class="absolute inset-0 flex items-center justify-center overflow-hidden bg-slate-950"> <span class="absolute h-20 w-20 animate-spin rounded-full border-2 border-dashed border-blue-500/50 [animation-duration:9s]"></span> <span class="absolute h-32 w-32 animate-spin rounded-full border-[3px] border-blue-500 border-l-transparent border-r-transparent [animation-direction:reverse] [animation-duration:6s]"></span> <span class="absolute h-44 w-44 animate-spin rounded-full border-2 border-dotted border-blue-500/50 [animation-duration:24s]"></span> <span class="absolute h-60 w-60 animate-spin rounded-full border-[3px] border-blue-400 border-l-transparent border-r-transparent [animation-duration:14s]"></span> <span class="absolute h-4 w-4 animate-pulse rounded-full bg-blue-300 shadow-[0_0_16px_#3b82f6]"></span> </div>
Customizing this snippet
- Color: set
--bgx-coloron the element or a parent. Currently previewing#3b82f6. - Pattern scale: set
--bgx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.