<div class="space-label">
	<div class="top">
		<div class="ring"></div>
		<div class="ring"></div>
		<div class="ring"></div>
	</div>
	<div class="text">space</div>
	<div class="bottom">
		<div class="ring"></div>
		<div class="ring"></div>
		<div class="ring"></div>
	</div>
</div>
$circleWidth: 170px;
body,
html {
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/279756/bg-space.jpg);
	background-size: cover;
	height: 100%;
	width: 100%;
	&:before {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.2);
	}
}

* {
	box-sizing: border-box;
}

.space-label {
	width: ($circleWidth)*2;
	margin: 0 auto;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	.top,
	.bottom {
		height: 60px;
		overflow: hidden;
		position: relative;
		width: $circleWidth;
		margin: 0 auto;
		.ring {
			border-radius: 100%;
			position: absolute;
			width: $circleWidth;
			height: $circleWidth;
			border: 3px solid #fff;
			border-width: 8px;
			&:nth-child(2) {
				border-width: 4px;
				width: ($circleWidth)-16;
			}
			&:nth-child(3) {
				border-width: 2px;
				width: ($circleWidth)-31;
				&:after {
					content: '';
					width: 18px;
					position: absolute;
					border-top: 1px solid #fff;
					left: 50%;
					margin-left: -9px;
				}
				&:before {
					content: '';
					width: 32px;
					position: absolute;
					border-top: 1px solid #fff;
					margin-left: -16px;
					left: 50%;
				}
			}
		}
	}
	.top {
		.ring {
			&:nth-child(1) {
				top: 0;
				left: 0;
			}
			&:nth-child(2) {
				top: 10px;
				left: 8px;
			}
			&:nth-child(3) {
				top: 20px;
				left: 16px;
				&:after {
					top: 17px;
				}
				&:before {
					top: 22px;
				}
			}
		}
	}
	.bottom {
		.ring {
			&:nth-child(1) {
				bottom: 0;
				left: 0;
			}
			&:nth-child(2) {
				bottom: 10px;
				left: 8px;
			}
			&:nth-child(3) {
				bottom: 20px;
				left: 16px;
				&:after {
					bottom: 17px;
				}
				&:before {
					bottom: 22px;
				}
			}
		}
	}
	.text {
		text-align: center;
		text-transform: uppercase;
		font-family: 'Raleway', sans-serif;
		font-size: 42px;
		font-weight: 900;
		color: #fff;
		height: 55px;
		vertical-align: middle;
		display: table-cell;
		width: ($circleWidth)*2;
		position: relative;
		left: 7px;
		letter-spacing: 14px;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.