<div class="nintendo-switch">
	<h1>NINTENDO<strong>SWITCH</strong></h1>
</div>
body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background: #e60012;
}
.nintendo-switch {
	position: relative;
	top: -3.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 260px;
	padding-top: 200px;
}
.nintendo-switch::before,
.nintendo-switch::after {
	position: absolute;
	content: "";
	display: block;
	height: 200px;
}
.nintendo-switch::before {
	top: 0;
	right: 50%;
	width: 97px;
	border-radius: 50px 0 0 50px;
	box-shadow: 0 0 0 16px #fff inset;
	background: radial-gradient(#fff 70%, transparent 70%) center 41px / 38px 38px no-repeat;
	margin-right: 10px;
	animation: left .4s 1s ease-in-out 1 both;
}
.nintendo-switch::after {
	top: -50%;
	left: 50%;
	width: 84px;
	border-radius: 0 50px 50px 0;
	background: radial-gradient(#e60012 70%, transparent 70%) center 90px / 38px 38px no-repeat, #fff;
	margin-left: 10px;
	animation: right .4s 1s ease-in-out 1 both;
}
@keyframes left {
	0 { top: 0; }
	80% { top: 10%; }
	100% { top: 0; }
}
@keyframes right {
	0 { top: -50%; }
	80% { top: 10%; }
	100% { top: 0; }
}
h1 {
	position: absolute;
	bottom: -3.5em;
	font: 600 30px / 1 'Montserrat', sans-serif;
	letter-spacing: .4em;
	color: #fff;
	margin: 0;
}
h1 strong {
	display: block;
	font-size: 1.8em;
	letter-spacing: .1em;
}
h1::after {
	position: absolute;
	right: -.3em;
	bottom: .6em;
	content: "TM";
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Montserrat:400,600&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.