.radar{
  width:170px;
  height:170px;
  border-radius:999px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at center, rgba(212,17,17,.18) 0%, rgba(212,17,17,.10) 45%, rgba(212,17,17,.04) 70%, rgba(212,17,17,0) 100%),
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.65));
  border: 2px solid rgba(212,17,17,.22);
}

.radar__ring{
  position:absolute; inset:16px;
  border-radius:999px;
  border:1px solid rgba(212,17,17,.18);
}
.radar__ring.r2{ inset:36px; opacity:.9; }
.radar__ring.r3{ inset:56px; opacity:.85; }

.radar__sweep{
  position:absolute;
  width:50%;
  height:50%;
  top:50%;
  left:50%;
  transform-origin: 0% 0%;
  background: linear-gradient(90deg, rgba(212,17,17,.0) 0%, rgba(212,17,17,.35) 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  animation: sweep 2.2s linear infinite;
}

@keyframes sweep{
  0%{ transform: rotate(0deg) translate(-0%, -0%); }
  100%{ transform: rotate(360deg) translate(-0%, -0%); }
}

.radar__dot{
  position:absolute;
  width:8px; height:8px;
  border-radius:999px;
  background: rgba(212,17,17,.85);
  box-shadow: 0 0 14px rgba(212,17,17,.45);
  animation: ping 2.8s infinite;
}
.radar__dot.d1{ top:42px; left:112px; animation-delay:.1s;}
.radar__dot.d2{ top:110px; left:60px; animation-delay:.6s;}
.radar__dot.d3{ top:78px; left:78px; animation-delay:1.1s;}

@keyframes ping{
  0%, 20%{ transform: scale(.7); opacity:.35; }
  35%{ transform: scale(1); opacity:1; }
  70%, 100%{ transform: scale(.7); opacity:.25; }
}