// best viewed in Chrome or Firefox desktop :) 

//- check out mario here --> https://codepen.io/louflan/pen/BaoJpwX
//- and luigi here --> https://codepen.io/louflan/pen/RwWOWbp
.yoshi
	.eye-r
		.eye-ball-r
	.eye-l
		.eye-ball-l
	.face
	.jaw
	.lip
	.mouth
	.nose
		.nostril
	.shadow
	.back
View Compiled
* {
	box-sizing: border-box;
}

:root {
	--size: 100;
	--unit: calc((var(--size) / 890) * 1vmin);
}

$lightGreen: rgba(117, 244, 97, 1);
$darkGreen: rgba(52, 156, 32, 1);
$eye: radial-gradient(circle at 50% 15%, white 6%, transparent 11%),
	radial-gradient(
		ellipse,
		rgb(62, 72, 223) 10%,
		rgba(20, 28, 136, 1) 31%,
		rgba(11, 11, 11, 1) 60%,
		rgba(78, 103, 128, 1) 63%,
		rgba(0, 0, 0, 1) 68%
	);

@mixin pseudo($h, $w) {
	content: "";
	position: absolute;
	height: #{$h + "%"};
	width: #{$w + "%"};
}

body {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: courier;
	text-align: center;
	font-size: calc(15 * var(--unit));
}

.yoshi {
	height: calc(816 * var(--unit));
	width: calc(890 * var(--unit));
	position: fixed;
	z-index: 1;
	overflow: hidden;
	filter: blur(0.5px);

	* {
		position: absolute;
	}

	%eye {
		width: 21%;
		height: 32%;
		background: $lightGreen;
		border-radius: 78% 96% 60% 0% / 78% 80% 100% 0%;
		transform: rotate(5deg);
	}

	.eye-ball-l {
		width: 60%;
		height: 100%;
		background: radial-gradient(
			circle at 50% 0%,
			white 40%,
			rgb(185, 185, 185) 80%
		);
		border-radius: 50% / 50%;
		transform: rotate(19deg);
		z-index: 10;
		right: 59%;
		top: 11%;
		box-shadow: calc(-1 * var(--unit)) 0 calc(3 * var(--unit)) rgb(216, 216, 216);

		&::after {
			@include pseudo(47, 55);
			right: 20%;
			top: 25%;
			border-radius: 50%;
			background: $eye;
		}
	}

	.eye-l {
		@extend %eye;
		right: 25.5%;
		top: 7%;
		z-index: -1;
		background: radial-gradient(
			ellipse at 23% 34%,
			$darkGreen 23%,
			$lightGreen 30%,
			black
		);
	}

	.eye-r {
		@extend %eye;
		right: 17%;
		top: 10%;
		background: linear-gradient(-260deg, transparent 40%, rgb(19, 94, 4)),
			radial-gradient(ellipse at 25% 34%, $darkGreen 23%, $lightGreen 30%);

		&::after {
			@include pseudo(40, 70);
			background: rgba(25, 128, 25, 0.685);
			bottom: -20%;
			left: 10%;
			filter: blur(calc(20 * var(--unit)));
		}
	}

	.eye-ball-r {
		overflow: hidden;
		background: transparent;
		border-radius: 100% 100% 60% 50% / 100% 100% 60% 50%;
		height: 88%;
		right: 52%;
		top: 12%;
		z-index: 5;
		width: 63%;
		transform: rotate(13deg);
		box-shadow: calc(2 * var(--unit)) calc(-7 * var(--unit)) calc(5 * var(--unit))
				rgba(9, 100, 6, 0.74),
			calc(8 * var(--unit)) calc(-8 * var(--unit)) calc(4 * var(--unit))
				rgba(115, 248, 110, 0.616);

		&::before {
			@include pseudo(100, 160);
			top: -7%;
			right: -40%;
			background: radial-gradient(
				circle at 50% 0%,
				white 40%,
				rgb(185, 185, 185) 80%
			);
			border-radius: 0% 0% 100% 90% / 0 0 100% 90%;
			box-shadow: 0 calc(10 * var(--unit)) calc(5 * var(--unit)) $lightGreen;
		}

		&::after {
			@include pseudo(47, 55);
			right: -4%;
			top: 33%;
			border-radius: 50%;
			background: $eye;
		}
	}

	.face {
		width: 22%;
		height: 30%;
		background: linear-gradient(100deg, $lightGreen 40%, rgb(35, 97, 31));
		z-index: -1;
		right: 21.5%;
		top: 31%;
		border-radius: 30%;

		&::before {
			@include pseudo(47, 130);
			right: 20%;
			bottom: -73%;
			border-radius: 50%;
			background: rgb(134, 134, 134);
			z-index: 5;
		}
	}

	.jaw {
		width: 28%;
		height: 36%;
		background: radial-gradient(circle at 60% 10%, white, rgb(134, 134, 134) 80%);
		z-index: 5;
		right: 20%;
		top: 46%;
		border-radius: 50%;
	}

	.lip {
		width: 25%;
		height: 36%;
		overflow: hidden;
		background: linear-gradient(90deg, rgb(180, 180, 180), rgb(133, 132, 132));
		z-index: 2;
		left: 33%;
		top: 51%;
		border-radius: 0% 0% 94% 37% / 0% 0% 70% 70%;
		transform: rotate(30deg);

		&::after {
			@include pseudo(95, 60);
			right: 30%;
			bottom: -27%;
			transform: rotate(60deg);
			border-radius: 50%;
			background: radial-gradient(
				ellipse at 55% 51%,
				rgba(250, 249, 249, 0.719) 30%,
				rgba(155, 154, 154, 0.075) 60%
			);
			z-index: 5;
		}
	}

	.mouth {
		width: 17%;
		height: 25%;
		left: 36%;
		top: 55%;
		background: rgb(48, 15, 15);
		z-index: 4;
		transform: rotate(10deg);
		border-radius: 0% 0% 100% 10% / 0% 0% 100% 10%;
		overflow: hidden;

		&::after {
			@include pseudo(50, 110);
			transform: rotate(-40deg);
			right: -18%;
			bottom: 5%;
			border-radius: 50%;
			background: linear-gradient(90deg, rgb(131, 26, 26), rgb(65, 21, 21));
			z-index: 5;
		}
	}

	.nose {
		left: 5%;
		top: 10%;
		width: 54%;
		height: 59%;
		background: radial-gradient(
				circle at 20% 20%,
				transparent 20%,
				rgba(33, 119, 33, 0.295) 75%,
				$lightGreen
			),
			radial-gradient(
				circle at 30% 10%,
				$lightGreen 31%,
				$darkGreen 85%,
				rgba(117, 244, 97, 1) 100%
			);
		border-radius: 50%;
		z-index: 7;

		.nostril {
			width: 8%;
			height: 3%;
			top: 10%;
			left: 27%;
			background: linear-gradient(180deg, green, rgb(17, 31, 3));
			box-shadow: calc(3 * var(--unit)) calc(-2 * var(--unit))
				calc(3 * var(--unit)) rgba(255, 255, 255, 0.61);
			border-radius: 50%;
			transform: rotate(-40deg);

			&::after {
				@include pseudo(100, 100);
				right: -40%;
				bottom: -220%;
				background: inherit;
				box-shadow: inherit;
				border-radius: inherit;
				transform: rotate(10deg);
			}
		}
	}

	.shadow {
		width: 15%;
		height: 45%;
		bottom: 19%;
		left: 49%;
		background: rgba(99, 98, 98, 0.178);
		filter: blur(calc(11 * var(--unit)));
		z-index: 5;
		transform: rotate(-10deg);
	}

	.back {
		width: 20%;
		height: 17%;
		background: linear-gradient(90deg, rgb(126, 25, 7) 70%, rgb(231, 78, 22));
		right: 15%;
		bottom: 29%;
		border-radius: 50%;
		z-index: -10;

		&::before {
			@include pseudo(110, 100);
			top: -125%;
			left: 0%;
			background: inherit;
			border-radius: inherit;
		}

		&::after {
			@include pseudo(65, 70);
			bottom: -80%;
			left: -15%;
			background: inherit;
			border-radius: inherit;
		}
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.