cssでtwitterの鳥を書く方法

みなさんもエンジニアなら一度はtwitterの鳥をcssで書いてみたいと思ったことがありますよね。挫折してしまってできなかった同士のためにコードの一例を挙げておきます。

html

<div class=bird>
    <div class="beak1">
        <div class="beak1-element1"></div>
        <div class="beak1-element2"></div>
    </div>
    <div class="beak2">
        <div class="beak2-element1"></div>
        <div class="beak2-element2"></div>
    </div>
    <div class="body">
        <div class="body-element1"></div>
        <div class="body-element2"></div>
    </div>
    <div class="head">
        <div class="head-element"></div>
    </div>
    <div class="wing1">
        <div class="wing1-element1"></div>
        <div class="wing1-element2"></div>
    </div>
    <div class="wing2">
        <div class="wing2-element1"></div>
        <div class="wing2-element2"></div>
    </div>
    <div class="wing3">
        <div class="wing3-element1"></div>
        <div class="wing3-element2"></div>
    </div>
</div>

css

.bird {
    margin: 0px auto;
    position: relative;
    height: 10vh;
    width: 10vh;
    background-color: white;
    overflow: hidden;
}
.beak1 {
    position: absolute;
    top: -4.1vh;
    left: 7.4vh;
    height: 10vh;
    width: 10vh;
    border-radius: 50%;
    background-color: transparent;
    overflow: hidden;
}
.beak1-element1 {
    position: absolute;
    background-color: rgb(25, 165, 247);
    height: 300%;
    width: 300%;
    top: -200%;
    left: -230%;
    border-radius: 50%;
}
.beak1-element2 {
    position: absolute;
    background-color: white;
    height: 320%;
    width: 320%;
    top: -251%;
    left: -180%;
    border-radius: 50%;
}
.beak2 {
    position: absolute;
    top: -4.7vh;
    left: 7.3vh;
    height: 10vh;
    width: 10vh;
    border-radius: 50%;
    background-color: transparent;
    overflow: hidden;
}
.beak2-element1 {
    position: absolute;
    background-color: rgb(25, 165, 247);
    height: 300%;
    width: 300%;
    top: -200%;
    left: -229%;
    border-radius: 50%;
}
.beak2-element2 {
    position: absolute;
    background-color: white;
    height: 320%;
    width: 320%;
    top: -251%;
    left: -179%;
    border-radius: 50%;
}
.body {
    position: absolute;
    top: 3vh;
    left: 0vh;
    height: 10vh;
    width: 10vh;
    background-color: transparent;
    overflow: hidden;
}
.body-element1 {
    position: absolute;
    background-color: rgb(25, 165, 247);
    height: 85%;
    width: 85%;
    top: -35%;
    left: -3%;
    border-radius: 50%;
}
.body-element2 {
    position: absolute;
    background-color: white;
    height: 100%;
    width: 100%;
    top: -50%;
    left: -50%;
    border-radius: 50%;
}
.head {
    position: absolute;
    top: -7vh;
    left: 0vh;
    height: 10vh;
    width: 10vh;
    background-color: transparent;
    overflow: hidden;
}
.head-element {
    position: absolute;
    background-color: rgb(25, 165, 247);
    height: 31.8%;
    width: 31.8%;
    top: 85%;
    left: 50%;
    border-radius: 50%;
}
.wing1 {
    position: absolute;
    top: -2vh;
    left: -5vh;
    height: 10vh;
    width: 10vh;
    border-radius: 50%;
    background-color: transparent;
    overflow: hidden;
}
.wing1-element1 {
    position: absolute;
    background-color: rgb(25, 165, 247);
    height: 40%;
    width: 60%;
    top: 50%;
    left: 65%;
    border-radius: 50%;
}
.wing1-element2 {
    position: absolute;
    background-color: white;
    height: 300%;
    width: 300%;
    top: -220%;
    left: -85%;
    border-radius: 50%;
}
.wing2 {
    position: absolute;
    top: -2vh;
    left: -5vh;
    height: 10vh;
    width: 10vh;
    background-color: transparent;
    border-radius: 50%;
    overflow: hidden;
}
.wing2-element1 {
    position: absolute;
    background-color: rgb(25, 165, 247);
    height: 40%;
    width: 40%;
    top: 41%;
    left: 64%;
    border-radius: 50%;
}
.wing2-element2 {
    position: absolute;
    background-color: white;
    height: 300%;
    width: 300%;
    top: -233%;
    left: -87%;
    border-radius: 50%;
}
.wing3 {
    position: absolute;
    top: -2vh;
    left: -5vh;
    height: 10vh;
    width: 10vh;
    background-color: transparent;
    border-radius: 50%;
    overflow: hidden;
}
.wing3-element1 {
    position: absolute;
    background-color: rgb(25, 165, 247);
    height: 42%;
    width: 50%;
    top: 30%;
    left: 63%;
    border-radius: 50%;
}
.wing3-element2 {
    position: absolute;
    background-color: white;
    height: 30%;
    width: 60%;
    top: 25%;
    left: 63%;
    border-radius: 50%;
}