CSS
body {
height: 100vh;
width: 100vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #111;
}
.volkswagen {
height: 500px;
width: 500px;
background-color: #3266bc;
border-radius: 50%;
position: absolute;
-webkit-transform: translateX(-250px) translateY(-250px);
transform: translateX(-250px) translateY(-250px);
left: 50%;
top: 50%;
}
.volkswagen .second-circle {
width: 450px;
height: 450px;
background-color: #fff;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-225px) translateY(-225px);
transform: translateX(-225px) translateY(-225px);
}
.volkswagen .second-circle .third-circle {
position: absolute;
width: 380px;
height: 380px;
background-color: #3266bc;
border-radius: 50%;
left: 50%;
top: 50%;
-webkit-transform: translateX(-190px) translateY(-190px);
transform: translateX(-190px) translateY(-190px);
}
.volkswagen .second-circle .third-circle::before {
content: " ";
position: absolute;
height: 200px;
width: 40px;
background-color: #fff;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
left: 120px;
}
.volkswagen .second-circle .third-circle::after {
content: " ";
position: absolute;
height: 200px;
width: 40px;
background-color: #fff;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
right: 120px;
}
.volkswagen .second-circle .third-circle .line-1 {
position: absolute;
width: 68px;
height: 20px;
background-color: #fff;
left: 156px;
top: 182px;
}
.volkswagen .second-circle .third-circle .line-2 {
position: absolute;
width: 40px;
height: 330px;
background-color: #fff;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
right: 50px;
top: 70px;
}
.volkswagen .second-circle .third-circle .line-3 {
position: absolute;
width: 40px;
height: 330px;
background-color: #fff;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
left: 50px;
top: 70px;
}
.volkswagen .second-circle .third-circle .line-3::before {
content: " ";
position: absolute;
width: 40px;
height: 150px;
background-color: #fff;
left: 50px;
bottom: 0px;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
.volkswagen .second-circle .third-circle .line-3::after {
content: " ";
position: absolute;
width: 40px;
height: 150px;
background-color: #fff;
left: 131px;
bottom: -30px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.volkswagen .second-circle .third-circle .line-4 {
position: absolute;
width: 72px;
height: 15px;
background-color: #fff;
left: 155px;
bottom: 140px;
}
