*, *::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";
margin: 0;
background: #020617;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.radar-board {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.radar-frame {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
background: #0f172a;
border: 4px solid #1e293b;
box-shadow: 0 0 50px rgba(16, 185, 129, 0.2);
overflow: hidden;
}
#radar-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.radar-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background:
radial-gradient(circle, transparent 20%, rgba(16, 185, 129, 0.1) 80%),
linear-gradient(90deg, transparent 49.5%, rgba(16, 185, 129, 0.3) 49.5%, rgba(16, 185, 129, 0.3) 50.5%, transparent 50.5%),
linear-gradient(0deg, transparent 49.5%, rgba(16, 185, 129, 0.3) 49.5%, rgba(16, 185, 129, 0.3) 50.5%, transparent 50.5%);
z-index: 2;
pointer-events: none;
}
.radar-text {
color: #10b981;
margin: 0;
letter-spacing: 4px;
text-transform: uppercase;
font-weight: 600;
animation: pulse-text 2s infinite alternate;
}
@keyframes pulse-text {
0% { opacity: 0.5; }
100% { opacity: 1; text-shadow: 0 0 10px #10b981; }
}
const canvas = document.getElementById("radar-canvas");
const ctx = canvas.getContext("2d");
const size = 300;
canvas.width = size;
canvas.height = size;
let angle = 0;
const blips = new Array();
function spawnBlip() {
const blip = new Object();
const distance = Math.random() * 100 + 20;
const blipAngle = Math.random() * Math.PI * 2;
blip.x = (size / 2) + Math.cos(blipAngle) * distance;
blip.y = (size / 2) + Math.sin(blipAngle) * distance;
blip.alpha = 1;
blips.push(blip);
}
/* Spawn a blip randomly every 2 seconds safely */
setInterval(spawnBlip, 2000);
function drawRadar() {
/* Create trailing effect */
ctx.fillStyle = "rgba(15, 23, 42, 0.1)";
ctx.fillRect(0, 0, size, size);
const cx = size / 2;
const cy = size / 2;
/* Draw Sweeping Beam */
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(angle);
const gradient = ctx.createLinearGradient(0, 0, 150, 0);
gradient.addColorStop(0, "rgba(16, 185, 129, 0.8)");
gradient.addColorStop(1, "rgba(16, 185, 129, 0)");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.arc(0, 0, 150, 0, 0.2);
ctx.closePath();
ctx.fillStyle = gradient;
ctx.fill();
/* Solid Leading Line */
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(150, 0);
ctx.strokeStyle = "#10b981";
ctx.lineWidth = 2;
ctx.stroke();
ctx.restore();
/* Draw Blips */
for (let i = 0; i < blips.length; i++) {
const b = blips.at(i);
if (b.alpha > 0) {
ctx.beginPath();
ctx.arc(b.x, b.y, 4, 0, Math.PI * 2);
ctx.fillStyle = "rgba(16, 185, 129, " + b.alpha + ")";
ctx.shadowBlur = 10;
ctx.shadowColor = "#10b981";
ctx.fill();
ctx.shadowBlur = 0; /* Reset */
b.alpha -= 0.005; /* Fade out slowly */
}
}
/* Clean array cleanly */
while (blips.length > 0 && blips.at(0).alpha <= 0) {
blips.shift();
}
angle -= 0.03;
window.requestAnimationFrame(drawRadar);
}
drawRadar();
