Twitter logo using HTML and CSS

HTML

CSS

body {
	min-height: 100vh;
	display: grid;
	place-items: center;
}

#twitter {
	height: 400px;
	width: 534px;
	position: relative;
	overflow: hidden;
}
.bird-div {
	height: 24em;
	width: 24em;
	position: absolute;
	top: -3.125em;
	left: 0.875;
	border-radius: 50%;
	background: #00aced;
	z-index: 1;
}
.bird-div::before {
	content: "";
	position: absolute;
	height: 24em;
	width: 24em;
	top: -1.875em;
	left: -6.325em;
	display: block;
	border-radius: 50%;
	background: #fff;
	z-index: 2;
}
.bird-div::after {
	content: "";
	position: absolute;
	height: 10em;
	width: 24em;
	top: 0;
	right: 0;
	display: block;
	background: #fff;
	z-index: 3;
}
.head {
	height: 8.25em;
	width: 8.25em;
	z-index: 29;
	top: 4.25em;
	left: 16.5em;
	position: absolute;
	border-radius: 50%;
	background: #00aced;
}
ul,
li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.wing,
.beak {
	position: absolute;
}
.wing li,
.wing li::after,
.wing li::before,
.beak li,
.beak li::after,
.beak li::before {
	position: absolute;
	border-radius: 50%;
}
.wing li::after,
.wing li::before,
.beak li::after,
.beak li::before {
	content: "";
	display: block;
}
.wing .w1 {
	height: 8.75em;
	width: 8.75em;
	top: 2.675em;
	left: 7.325em;
	display: block;
	background: #00aced;
	z-index: 18;
}
.wing .w1::after {
	height: 24em;
	width: 24em;
	top: -17.25em;
	left: -2.125em;
	background: #fff;
	z-index: 18;
}
.wing .w2 {
	height: 8.75em;
	width: 8.75em;
	top: 5.625em;
	left: 7.25em;
	display: block;
	background: #00aced;
	z-index: 16;
}
.wing .w2::after {
	height: 10em;
	width: 10em;
	top: -5.125em;
	left: -3em;
	background: #fff;
	z-index: 17;
}
.wing li.w2::before {
	width: 5em;
	height: 5em;
	border-radius: 0;
	top: 3em;
	left: 7em;
	background: #00aced;
	z-index: 17;
}
.wing .w3 {
	height: 8.75em;
	width: 8.75em;
	top: 8.5em;
	left: 8.5em;
	display: block;
	background: #00aced;
	z-index: 14;
}
.wing .w3::after {
	height: 10em;
	width: 10em;
	top: -4.125em;
	left: -4em;
	background: #fff;
	z-index: 15;
}
.beak {
	top: 0;
	right: 0;
}
.beak .b2 {
	height: 3em;
	width: 8em;
	top: 3.5em;
	left: -9.75em;
	transform: rotate(-48deg);
	z-index: 25;
	background: #00aced;
}
.beak .b2::after {
	height: 8em;
	width: 20em;
	top: -3.375em;
	left: -0.125em;
	transform: rotate(18deg);
	background: #fff;
	z-index: 26;
}
.beak .b1 {
	height: 3em;
	width: 6em;
	top: 2em;
	left: -9.125em;
	transform: rotate(-60deg);
	z-index: 27;
	background: #00aced;
}
.beak .b1::after {
	height: 8em;
	width: 20em;
	top: -2.5em;
	left: -0.125em;
	transform: rotate(20deg);
	background: #fff;
	z-index: 28;
}

JS