Skip to content

Instantly share code, notes, and snippets.

@dskvr
Created March 28, 2025 15:34
Show Gist options
  • Save dskvr/e1d4340e7cfbc7eeb915a1b194d84c59 to your computer and use it in GitHub Desktop.
Save dskvr/e1d4340e7cfbc7eeb915a1b194d84c59 to your computer and use it in GitHub Desktop.
Radar CSS
<div class="radar"></div>
.radar {
position: relative;
width: 50px;
height: 50px;
border: 2px solid #0f0;
border-radius: 50%;
background:
repeating-radial-gradient(circle at center,
transparent 0%,
transparent 4%,
rgba(0, 255, 0, 0.2) 4.5%,
transparent 10%
),
radial-gradient(circle at center,
#002400 0%,
#000000 80%
);
overflow: hidden;
}
.radar::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border-radius: 50%;
background: conic-gradient(
transparent 90%,
rgba(0, 255, 0, 0.6) 100%
);
transform-origin: 50% 50%;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
to { transform: rotate(360deg); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment