body {
	margin: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at center, silver, black);
}

.radar {
	font-size: 32px;
	width: calc(8em + 1.5em);
	height: calc(8em + 1.5em);
	--vertical-line: linear-gradient(
			90deg,
			transparent 49.75%,
			darkgreen 49.75%,
			darkgreen 50.25%,
			transparent 50.25%);
	--horizontal-line: linear-gradient(
			transparent 49.75%,
			darkgreen 49.75%,
			darkgreen 50.25%,
			transparent 50.25%);
	--concentric-circles: repeating-radial-gradient(
			transparent 0,
			transparent 0.95em,
			darkgreen 0.95em,
			darkgreen 1em);
	background: 
		var(--vertical-line),
		var(--horizontal-line),
		var(--concentric-circles),
		linear-gradient(black, black);
	position: relative;
	border-radius: 50%;
}

.radar::before {
	content: '';
	position: absolute;
	width: calc(8em / 2);
	height: calc(8em /2);
	background: linear-gradient(
		45deg,
		hsla(0, 0%, 0%, 0) 50%,
		hsla(120, 100%, 38%, 1) 100%);
	border-radius: 100% 0 0 0;
	top: calc(1.5em / 2);
	left: calc(1.5em / 2);
	transform-origin: right bottom;
	animation: scanning 5s linear infinite;
}

@keyframes scanning {
	to {
		transform: rotate(1turn);
	}
}