<h2>❶</h2>
<div class=patterns id=first></div>

.patterns {
	width: 300px; height: 300px;
	margin: auto; border: 40px white solid;
}


#first {
	background: radial-gradient(circle at 25px 9px, black 2px, transparent 2px), radial-gradient(circle at 49px 28px, black 2px, transparent 2px), radial-gradient(circle at 38px 1px, black 2px, transparent 2px), radial-gradient(circle at 20px 4px, black 2px, transparent 2px), radial-gradient(circle at 80px 4px, black 2px, transparent 2px), radial-gradient(circle at 50px 10px, black 2px, transparent 2px), radial-gradient(circle at 60px 16px, black 2px, transparent 2px), radial-gradient(circle at 70px 16px, black 2px, transparent 2px), radial-gradient(ellipse at 50px 0, red 33px, lime 33px, lime 38px, transparent 38px) white;
	background-size: 100px 50px;
	margin-bottom: 60px;
}

body { background: black; }

h2 { margin: auto; margin-top: 60px; width: 370px; text-align: right; background: yellow; padding-right: 10px;  }