html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
i {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 170px;
	padding: 85px 0;
	border-radius: 88% 0;
	position: relative;
	text-align: center;
	transform: rotate(46deg);
	border: 2px solid #2d2d2d;
	transition: all .4s ease;
	transform-origin: top top;
	overflow: hidden;
	backface-visibility: hidden;
	&:after {
		content: '';
		background: #ffffff;
		padding: 185px;
		position: absolute;
		top: -304px;
		left: -310px;
		transform: rotate(224deg);
		transition: all 1.5s ease;
		z-index: 1;
		animation: blinking 2.8s ease-out infinite;
	}
	&:before {
		content: '';
		transition: all .5s ease;
		position: absolute;
		left: 44px;
		top: 45px;
		padding: 40px;
		border: 1px solid #49befe;
		background-image: radial-gradient(circle, #000000, #000000 23%, #000000 25%, #000000 26%, #333333 25%, #222222 80%);
		z-index: 1;
		border-radius: 100%;
	}
}

@keyframes blinking {
	0% {
		top: -374px;
		left: -280px;
	}
	5% {
		top: -180px;
		left: -190px;
	}
	10% {
		top: -274px;
		left: -280px;
	}
	100% {
		top: -1374px;
		left: -280px;
	}
}