<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="github.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
:root {
--size: 50vmin;
--bg: black;
--logo: white;
}
.github {
width: var(--size);
aspect-ratio: 1;
background: var(--bg);
border-radius: 50%;
position: relative;
display: grid;
place-items: center;
}
.head {
width: 64%;
height: 48%;
background: var(--logo);
position: absolute;
top: 24%;
border-radius: 50% 49% 40% 40% / 45% 45% 45% 45%;
}
.ear {
position: absolute;
background: var(--logo);
border-radius: 0% 56% 20% 80%;
top: -2%;
width: 32%;
height: 40%;
}
ear-left:before,
ear-right:before {
content: '';
position: absolute;
background: var(--logo);
border-radius: 50%;
width: 62%;
height: 15%;
transform: rotate(4deg);
top: -4%;
}
.ear-left {
left: 4%;
transform: rotate(16deg);
}
.ear-right {
right: 4%;
transform: rotate(345deg) scaleX(-1);
}
.body {
background: var(--logo);
width: 25%;
height: 35%;
bottom: -4%;
position: absolute;
border-radius: 34%;
}
.bottom {
position: absolute;
background: var(--logo);
width: 130%;
height: 20%;
bottom: 10%;
left: -15%;
}
.body:before,
.body:after {
content: '';
position: absolute;
width: 30%;
height: 30%;
background: var(--bg);
bottom: 18%;
border-radius: 50%;
}
.body:before {
left: -32%;
transform: rotate(327deg);
z-index: 1;
}
.body:after {
border-radius: 50%;
right: -32%;
transform: rotate(33deg);
}
.tail {
border-radius: 50%;
position: absolute;
width: 22%;
height: 13%;
background: var(--logo);
bottom: 14%;
left: 21%;
}
.tail:before,
.tail:after {
content: '';
position: absolute;
border-radius: 50%;
}
.tail:before {
width: 100%;
height: 100%;
bottom: 64%;
left: 10%;
background: var(--bg);
transform: rotate(337deg);
}
.tail:after {
width: 19%;
height: 52%;
transform: rotate(327deg);
bottom: 13%;
left: 2%;
background: var(--logo);
}
.tip {
width: 36%;
height: 110%;
position: absolute;
background: var(--logo);
border-radius: 50%;
left: -25%;
top: -35%;
transform: rotate(322deg);
}
.tip:before,
.tip:after {
content: '';
position: absolute;
border-radius: 50%;
}
.tip:before {
width: 43%;
height: 41%;
background: var(--logo);
transform: rotate(325deg);
top: -9%;
left: 35%;
}
.tip:after {
width: 45%;
height: 103%;
background: var(--bg);
top: -6%;
left: -6%;
}
</script>
</head>
<body>
<div class="github">
<div class="tail">
<div class="tip"></div>
</div>
<div class="head">
<div class="ear ear-left"></div>
<div class="ear ear-right"></div>
</div>
<div class="body">
<div class="bottom"></div>
</div>
</div>
</body>
</html>