Création du logo GitHub avec CSS

<!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>
OHIOLee