html,
body,
.circle {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: black;
}

.circle {
	--inner-radius: 2em;
	width: calc(var(--inner-radius) * 2);
	height: calc(var(--inner-radius) * 2);
	background-color: lime;
	border-radius: 50%;
	box-shadow: 0 0 0 calc(var(--inner-radius) - 0.4em) black,
				0 0 0 var(--inner-radius) lime;
	position: relative;
}

.circle::before,
.circle::after {
	content: '';
	position: absolute;
	width: calc(var(--inner-radius) * 2 * 2);
	height: calc(var(--inner-radius) * 2 * 2);
	border: 2px solid lime;
	border-radius: 50%;
	animation: pulse 2s ease-out infinite;
}

.circle::after {
	animation-delay: 1s;
}

@keyframes pulse {
	from {
		transform: scale(1);
		filter: opacity(0.9);
	}

	to {
		transform: scale(2);
		filter: opacity(0);
	}
}