CSS Radar - an animated radar built entirely with CSS

dabblet.css

/**
 * CSS Radar - an animated radar built entirely with CSS
 */

html{
	background:
		radial-gradient(black 15%, transparent 16%) 0 0,
		radial-gradient(black 15%, transparent 16%) 8px 8px,
		radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
		radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
	background-color:#282828;
	background-size:16px 16px;
	min-height: 100%;
}

.screen {
    position: absolute;
    top: 5%;
    left: 5%;
	width: 90%;
	height: 90%;
	border: 2px solid #333;
	border-radius: 50px;
	background: 
		linear-gradient(green 2px, transparent 2px),
		linear-gradient(90deg, green 2px, transparent 2px),
		linear-gradient(rgba(0,255,0,.3) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,255,0,.3) 1px, transparent 1px),
		rgba(0, 0, 0, .5);
	background-size:50% 50% , 50%  50% , 10% 10%, 10% 10%;
	background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

.grid {
    top: 0;
    left: 0;
	width: 100%;
	height: 100%;
	background: 
		radial-gradient(circle, rgba(50, 0, 0, .5) 0, transparent 50%),
		radial-gradient(farthest-side circle, transparent 1%, green 5%, transparent 0),
		radial-gradient(farthest-side circle, transparent 11%, green 15%, transparent 0),
		radial-gradient(farthest-side circle, transparent 21%, green 25%, transparent 0),
		radial-gradient(farthest-side circle, transparent 31%, green 35%, transparent 0),
		radial-gradient(farthest-side circle, transparent 41%, green 45%, transparent 0),
		radial-gradient(farthest-side circle, transparent 51%, green 55%, transparent 0);
	background-size: 100%;
}

@keyframes clockwise {
 	from { transform: rotate(0deg); }
 	to { transform: rotate(360deg); }
}

@keyframes blip {
	from { opacity: 1; }
	/*70% { opacity: .3; }*/
	to { opacity: .1; }
}

.radar, .blip {
	animation-duration: 6s;
	animation-iteration-count: infinite;
}

.radar {
	width: 10%;
	min-height: 100%;
	animation-name: clockwise;
	animation-timing-function: linear;
	transform-origin: right bottom;
	background: linear-gradient(70deg, transparent 50%, green), transparent;
	position: absolute;
	top: -50%;
	left: 40%;
}

.blip {
	display: block;
	position: absolute;
	animation-name: blip;
	animation-timing-function: ease-out;
	color: red;
	font-size: 2em;
}

.blip:after {
	content: "✈";
}

#id1 {
	left: 51%;
	top: 28%;
	animation-delay: .2s;
	transform: rotate(120deg);

}

#id2 {
	left: 55%;
	top: 50%;
	animation-delay: 1.7s;
	transform: rotate(310deg);
}

#id3 {
	left: 48%;
	top: 78%;
	animation-delay: 3.1s;
	transform: rotate(320deg);
}

#id4 {
	left: 46%;
	top: 98%;
	animation-delay: 3.2s;
	transform: rotate(310deg);
}

dabblet.html

<div class="screen">
<div class="grid">
	<div class="radar"></div>
	<span class="blip" id="id1"></span>
	<span class="blip" id="id2"></span>
	<span class="blip" id="id3"></span>
	<span class="blip" id="id4"></span>
</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}