<div class="akuaku">
	<div class="feather"></div>
	<div class="feather"></div>
	<div class="feather"></div>
	<div class="feather"></div>
	<div class="body"></div>
	<div class="eyebrows"></div>
	<div class="eyebrows"></div>
	<div class="eye"></div>
	<div class="eye"></div>
	<div class="nose"></div>
	<div class="lip"></div>
	<div class="lip"></div>
	<div class="beard"></div>
	<div class="beard"></div>
</div>
$size: 2; // Chage this value (either decimal values) or resize the window to resize Aku Aku 

$colors: #008DBB, #FFBE58, #FE8101, #FF5D7A, #422202, #FE5F4C, #FDBE57, #67A858;

.akuaku {
	position: relative;
	left: .5em;
	top: 1.5em;
	.feather {
		position: absolute;
	}
	.feather {
		opacity: 0;
		&:nth-child(1) {
			transform: translateX(-6em) translateY(-6em) rotate(-20deg);
			left: -3em;
			top: -4em;
			width: 3em;
			height: 4em;
			background: nth($colors, 1);
			clip-path: polygon(100% 40%, 0 0, 100% 100%);
		}
		&:nth-child(2) {
			transform: translateX(-3em) translateY(-6em) rotate(-10deg);
			left: 0;
			top: -6em;
			width: 2em;
			height: 6em;
			background: nth($colors, 2);
			clip-path: polygon(50% 100%, 80% 0, 0 40%);
		}
		&:nth-child(3) {
			transform: translateX(2em) translateY(-3em) rotate(20deg);
			left: 1.5em;
			top: -5em;
			width: 1.5em;
			height: 5em;
			background: nth($colors, 3);
			clip-path: polygon(30% 100%, 100% 0, 0 40%);
		}
		&:nth-child(4) {
			transform: translateX(6em) translateY(-6em) rotate(20deg);
			left: 2.5em;
			top: -3em;
			width: 1em;
			height: 3em;
			background: nth($colors, 4);
			clip-path: polygon(10% 44%, 100% 0, 60% 70%, 0 100%);
		}
	}
	.body {
		opacity: 0;
		transform: translateY(1em);
		position: relative;
		left: -1em;
		margin-top: -.5em;
		top: .8em;
		width: 4em;
		height: 7em;
		background: nth($colors, 5);
		clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
	}
	.eyebrows {
		opacity: 0;
		transform: scale(1.2);
		position: absolute;
		top: 50%;
		left: -1em;
		width: 2em;
		height: 1em;
		background: nth($colors, 6);
		z-index: 1;
		& + .eyebrows {
			top: 40%;
			left: 1em;
			width: 2.25em;
		}
	}
	.eye {
		opacity: 0;
		transform: scale(1.2);
		box-sizing: border-box;
		position: absolute;
		top: 50%;
		left: -.9em;
		width: 1.8em;
		height: 1.6em;
		background: nth($colors, 7);
		border-radius: 50%;
		border: .2em solid nth($colors, 8);
		& + .eye {
			top: 40%;
			left: 1em;
			width: 2.2em;
			height: 2.2em;
			border: .4em solid nth($colors, 8);
		}
	}
	.nose {
		opacity: 0;
		position: absolute;
		bottom: .8em;
		left: .5em;
		width: 1em;
		height: 1.5em;
		background: nth($colors, 7);
		clip-path: polygon(60% 0, 0 75%, 50% 100%);
	}
	.lip {
		opacity: 0;
		position: absolute;
		bottom: -.5em;
		left: -1em;
		width: 4em;
		height: 2.5em;
		background: nth($colors, 6);
		clip-path: polygon(49% 58%, 100% 41%, 89% 100%, 50% 97%, 10% 100%, 0 40%);
		& + .lip {
			background: #fff;
			width: 3em;
			height: 1em;
			left: -.5em;
			bottom: -.15em;
		}
	}
	.beard {
		position: absolute;
		bottom: -2.2em;
		left: -.2em;
		width: 1.2em;
		height: 1.8em;
		background: nth($colors, 8);
		clip-path: polygon(72% 0, 100% 33%, 70% 100%, 50% 63%, 8% 86%, 26% 21%);
		opacity: 0;
		transform: translateX(-2em) translateY(3em) rotate(20deg);
		& + .beard {
			left: .8em;
			transform: translateX(2em) translateY(3em) rotate(-20deg);
			clip-path: polygon(47% 0, 85% 27%, 62% 73%, 50% 100%, 34% 73%, 13% 30%);
		}
	}
}

.feather {
	animation: feather .25s ease-in-out forwards;
	&:nth-child(1) {
		animation-delay: .5s;
	}
	&:nth-child(2) {
		animation-delay: .75s;
	}
	&:nth-child(3) {
		animation-delay: .85s;
	}
	&:nth-child(4) {
		animation-delay: 1s;
	}
}
.body {
	animation: feather .25s ease-in-out forwards;
	animation-delay: 1.15s;
}
.eyebrows {
	animation: eyes .25s ease-in-out forwards, eyebrow1 10s ease-in-out infinite;
	animation-delay: 1.25s, 3s;
	& + .eyebrows {
		animation: eyes .25s ease-in-out forwards, eyebrow2 10s ease-in-out infinite;
		animation-delay: 1.25s, 3s;
	}
}
.eye {
	animation: eyes .25s ease-in-out forwards, eye1 10s ease-in-out infinite;
	animation-delay: 1.25s, 3s;
	& + .eye {
		animation: eyes .25s ease-in-out forwards, eye2 10s ease-in-out infinite;
		animation-delay: 1.25s, 3s;
	}
}
.nose {
	animation: nose1 .25s ease-in-out forwards, nose 10s ease-in-out infinite;
	animation-delay: 1.35s, 3s;
}
.lip {
	animation: lip .25s ease-in-out forwards, lip1 10s ease-in-out infinite;
	animation-delay: 1.45s, 3s;
	& + .lip {
		animation: lip .25s ease-in-out forwards, lip2 10s ease-in-out infinite;
		animation-delay: 1.45s, 3s;
	}
}
.beard {
	animation: beard1 .25s ease-in-out forwards;
	animation-delay: 1.55s;
	& + .beard {
		animation: beard2 .25s ease-in-out forwards;
		animation-delay: 1.65s;
	}
}

@keyframes feather {
	to {
		opacity: 1;
		transform: translateX(0) translateY(0) rotate(0);
	}
}

@keyframes body {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes eyes {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes nose1 {
	from {
		opacity: 0;
		transform: translateY(.5em);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes lip {
	from {
		opacity: 0;
		transform: scale(1.1);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes beard1 {
	to {
		opacity: 1;
		transform: translateX(0) translateY(0) rotate(10deg);
	}
}
@keyframes beard2 {
	to {
		opacity: 1;
		transform: translateX(0) translateY(0) rotate(-15deg);
	}
}

@keyframes eyebrow1 {
	5%, 40% {
		top: 44%;
	}
	42%, 80% {
		top: 50%;
	}
}
@keyframes eyebrow2 {
	5%, 40% {
		top: 48%;
	}
	42%, 65% {
		top: 40%;
	}
}

@keyframes eye1 {
	5%, 40% {
		top: 48%;
	}
	42%, 80% {
		top: 50%;
	}
}
@keyframes eye2 {
	5%, 40% {
		top: 48%;
		height: 2em;
	}
	42%, 80% {
		top: 40%;
		height: 2.2em;
	}
}

@keyframes nose {
	5%, 40% {
		transform: rotate(-13deg);
	}
	42%, 80% {
		transform: rotate(0);
	}
}

@keyframes lip1 {
	5%, 25% {
		transform: rotate(-5deg);
	}
	30%, 75% {
		transform: rotate(5deg);
	}
	77% {
		transform: rotate(0);
	}
}
@keyframes lip2 {
	2%, 5% {
		width: 3.3em;
		height: 1.3em;
		left: -.65em;
		bottom: -.2em;
	}
	5%, 25% {
		width: 3.3em;
		height: 1.3em;
		left: -.65em;
		bottom: -.2em;
		transform: rotate(-5deg);
	}
	30%, 75% {
		width: 3.3em;
		height: 1.3em;
		left: -.65em;
		bottom: -.2em;
		transform: rotate(5deg);
	}
	77% {
		width: 3em;
		height: 1em;
		left: -.5em;
		bottom: -.15em;
		transform: rotate(0);
	}
}

html {
	font-size: 10px;
	height: 100%;
}
body {
	height: 100%;
	font-size: calc(#{$size}em + 1vw);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: -webkit-radial-gradient(circle contain, #fff4cd 0%, #ffedac 100%);
}

@media all and (min-width: 600px){
	body{
		font-size: calc(#{$size}em + 1vw);
	}
}

@media all and (max-width: 599px){
	body{
		font-size: calc(#{$size}em + 3vw);
	}
}

@media all and (max-height: 400px){
	body{
		font-size: calc(#{$size}em + 3vh);
	}
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.