<div class="twitter-logo">
<div class="head">
<div class="beak">
</div>
</div>
<div class="body">
</div>
<div class="feathers">
<div class="feather-1">
</div>
<div class="feather-2">
</div>
<div class="feather-3">
</div>
</div>
<div class="tail">
</div>
</div>
:root {
--logo-color: #1C9CEA;
--background: #F5F5F5;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--background);
}
.twitter-logo {
margin: 0 auto;
width: fit-content;
width: -moz-fit-content;
position: relative;
}
.head {
width: 50px;
height: 50px;
background-color: var(--logo-color);
border-radius: 50%;
position: relative;
z-index: 3;
}
.beak {
width: 20px;
height: 15px;
background-color: var(--logo-color);
position: absolute;
right: -2px;
transform: rotate(-30deg);
}
.beak:after {
content: '';
position: absolute;
right: -1px;
top: 0;
border-top: 7px solid transparent;
border-bottom: 8px solid transparent;
border-left: 9px solid transparent;
border-right: 9px solid var(--background);
}
.body {
background-color: var(--logo-color);
width: 50px;
height: 60px;
position: absolute;
top: 28px;
border-radius: 0 0 50px 0;
border-color: none;
z-index: 3;
}
.body:after {
content: '';
background-color: var(--logo-color);
width: 50px;
height: 55px;
position: absolute;
top: 13px;
border-bottom-right-radius: 100% 60px;
border-color: none;
z-index: 3;
}
.feather-1 {
width: 50px;
height: 30px;
position: absolute;
background-color: var(--logo-color);
top: 15px;
left: -45px;
z-index: 2;
transform: rotate(15deg);
border-radius: 0 0 0 20px;
}
.feather-1:after {
content: '';
background-color: var(--background);
position: absolute;
width: 70px;
height: 60px;
border-bottom-left-radius: 100% 60px;
top: -48px;
left: -28px;
}
.feather-2 {
width: 50px;
height: 20px;
position: absolute;
background-color: var(--logo-color);
top: 46px;
left: -40px;
z-index: 2;
transform: rotate(10deg);
border-radius: 0 0 0 20px;
}
.feather-3 {
width: 50px;
height: 20px;
position: absolute;
background-color: var(--logo-color);
top: 60px;
left: -30px;
z-index: 2;
transform: rotate(-10deg);
border-radius: 0 0 0 20px;
}
.tail {
background-color: var(--logo-color);
width: 90px;
height: 38px;
position: absolute;
left: -48px;
border-bottom-left-radius: 100% 60px;
border-bottom-right-radius: 100% 60px;
z-index: 1;
bottom: -46px;
}
.tail:after {
content: '';
background-color: var(--background);
position: absolute;
width: 56px;
height: 56px;
border-radius: 50%;
top: -30px;
left: -5px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.