<!-- 
  Original pen by @Jon Kantner 
  https://codepen.io/jkantner/pen/eZPooe
-->
<div class="radar"></div>

:root{
	--gn: rgb(0,192,0);
	--gnT: rgba(0,192,0,0);
	--dgn: rgb(0,48,0);
	--gy: rgb(128,128,128);
	--gyT: rgba(128,128,128,0);
	--bk: rgb(0,0,0);
	--bkT: rgba(0,0,0,0);
}
body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

.radar {
  background:
     // lighting
			radial-gradient(100% 100%, var(--bkT), var(--bk) 9.9em,var(--bkT) 10em),
    
   // lines
			linear-gradient(var(--gnT) 9.8em, var(--gn) 9.8em, var(--gn) 10.2em, var(--gnT) 10.2em),
			linear-gradient(45deg,var(--gnT) 13.94em, var(--gn) 13.98em, var(--gn) 14.3em, var(--gnT) 14.34em),
			linear-gradient(90deg,var(--gnT) 9.8em, var(--gn) 9.8em, var(--gn) 10.2em, var(--gnT) 10.2em),
			linear-gradient(-45deg,var(--gnT) 13.94em, var(--gn) 13.98em, var(--gn) 14.3em, var(--gnT) 14.34em),
    
// rings
    repeating-radial-gradient(var(--dgn), var(--dgn) 2.96em, var(--gn) 3em, var(--gn) 3.26em, var(--dgn) 3.3em);
  
  background-repeat: no-repeat;
  border-radius: 50%;
  font-size: 10px;
  
  width: 20em;
  height: 20em;
  
  position: relative;
  
  &:before {
    animation: scan 5s linear infinite;
    background: 
      radial-gradient(var(--gyT) 9.20em, var(--gy) 9.25em, var(--gy) 10em, var(--gyT) 10.05em),
      linear-gradient(45deg, var(--gnT) 6em, var(--gn)) 0 0 / 50% 50%;
    
	  background-repeat: no-repeat;
		border-radius: 50%;
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
}

  
}

@keyframes scan {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(1turn);
		}
	}