body
.mario
.hat
.logo
span
span
span
span
.peak
.face
#overlay
.brow
span
.brow-right
span
.chin
.nose
span
span
span
span
span
span
.tash
.mouth
span
.eye
span
span
span
.eye-right
span
span
span
#hair-left
#hair-right
#ear-left
span
span
#ear-right
span
span
* {
box-sizing: border-box;
}
:root {
--size: 150;
--unit: calc((var(--size) / 383) * 1vmin);
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.mario {
height: calc(383 * var(--unit));
width: calc(250 * var(--unit));
position: fixed;
top: 15%;
* {
position: absolute;
}
.hat {
height: 26%;
width: 52%;
background: rgb(255, 129, 133);
background: linear-gradient(
90deg,
rgba(255, 129, 133, 1) 0%,
rgba(252, 28, 35, 1) 17%,
rgba(205, 29, 34, 1) 100%
);
top: 0%;
left: 24%;
border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%;
z-index: 4;
.logo {
width: 34%;
height: 38%;
background: linear-gradient(180deg, white 60%, rgb(117, 117, 117) 100%);
left: 33%;
top: 12%;
border-radius: 50%;
box-shadow: inset 1px 1px 5px rgb(117, 117, 117);
border: 2px solid rgb(204, 204, 204);
span:nth-of-type(1) {
width: 45%;
height: 65%;
background: rgba(205, 29, 34, 1);
left: 11%;
top: 10%;
z-index: 10;
transform: rotate(30deg);
clip-path: polygon(25% 100%, 20% 10%, 40% 20%, 65% 100%);
-webkit-clip-path: polygon(25% 100%, 20% 10%, 40% 20%, 65% 100%);
}
span:nth-of-type(2) {
width: 45%;
height: 65%;
background: rgba(205, 29, 34, 1);
left: 30%;
top: 0%;
z-index: 10;
transform: rotate(-30deg);
clip-path: polygon(25% 80%, 15% 20%, 34% 5%, 54% 67%);
-webkit-clip-path: polygon(29% 80%, 12% 24%, 33% 5%, 59% 70%);
}
span:nth-of-type(3) {
width: 45%;
height: 65%;
background: rgba(205, 29, 34, 1);
left: 35%;
top: 0%;
z-index: 10;
transform: rotate(30deg);
clip-path: polygon(60% 85%, 30% 75%, 49% 11%, 74% 30%);
-webkit-clip-path: polygon(60% 85%, 30% 72%, 50% 13%, 74% 30%);
}
span:nth-of-type(4) {
width: 45%;
height: 65%;
background: rgba(205, 29, 34, 1);
right: 6%;
top: 10%;
z-index: 10;
transform: rotate(-30deg);
clip-path: polygon(70% 95%, 30% 100%, 50% 30%, 75% 5%);
-webkit-clip-path: polygon(70% 95%, 30% 100%, 50% 30%, 72% 5%);
}
}
.peak {
height: 38%;
width: 86%;
top: 43%;
left: 7%;
background: linear-gradient(
90deg,
rgb(248, 94, 99) 2%,
rgb(189, 23, 29) 10%,
rgba(205, 29, 34, 1) 100%
);
border-top: solid 5px rgb(255, 85, 85);
border-radius: 50% 50% 0% 0%/ 100% 100% 0% 0%;
}
}
.face {
width: 38%;
height: 27%;
background: rgb(179, 121, 99);
background: linear-gradient(
276deg,
rgba(179, 121, 99, 1) 25%,
rgba(251, 188, 164, 1) 54%,
rgba(255, 212, 195, 1) 80%
);
left: 31%;
top: 14.5%;
border-radius: 50% 50% 50% 50% / 22% 22% 70% 70%;
z-index: 5;
overflow: hidden;
box-shadow: inset 0px 2px 2px rgb(134, 91, 73);
#overlay {
width: 100%;
height: 20%;
background: rgba(48, 37, 33, 0.2);
filter: blur(1px);
// opacity: .3;
top: 0%;
z-index: 20;
}
.brow {
width: 26%;
height: 18%;
left: 12%;
top: 0%;
background: rgb(15, 6, 19);
border-radius: 32% 80% 0% 0% / 100% 100% 0% 0%;
span:nth-of-type(1) {
width: 94%;
height: 76%;
border-radius: 50%;
left: 3%;
top: 70%;
background: rgb(179, 121, 99);
background: linear-gradient(
276deg,
rgba(251, 188, 164, 1) 54%,
rgba(255, 212, 195, 1) 80%
);
}
}
.brow-right {
width: 26%;
height: 18%;
right: 12%;
top: 0%;
background: rgb(15, 6, 19);
border-radius: 32% 80% 0% 0% / 100% 100% 0% 0%;
transform: scaleX(-1);
span:nth-of-type(1) {
width: 94%;
height: 76%;
border-radius: 50%;
right: 3%;
top: 70%;
background: rgb(179, 121, 99);
background: linear-gradient(
-276deg,
rgba(179, 121, 99, 1) 86%,
rgb(233, 173, 150) 100%
);
}
}
}
.chin {
width: 42%;
height: 20%;
background: rgb(179, 121, 99);
background: linear-gradient(
276deg,
rgba(179, 121, 99, 1) 25%,
rgba(251, 188, 164, 1) 54%,
rgba(255, 212, 195, 1) 80%
);
top: 21%;
left: 29%;
border-radius: 100% 100% 100% 100%;
z-index: 5;
.nose {
width: 45%;
height: 50%;
top: 14%;
left: 28%;
border: calc(var(--unit) * 0.3) rgb(248, 198, 178) solid;
background: rgb(179, 121, 99);
background: radial-gradient(
circle at 32% 22%,
rgba(255, 212, 195, 1) 1%,
rgba(251, 188, 164, 1) 54%,
rgb(179, 121, 99) 80%
);
border-radius: 50%;
.tash {
width: 170%;
height: 100%;
top: -38%;
left: -35%;
background: rgb(179, 121, 99);
background: linear-gradient(
276deg,
rgba(179, 121, 99, 1) 25%,
rgba(251, 188, 164, 1) 54%,
rgba(255, 212, 195, 1) 80%
);
z-index: -2;
border-radius: 50%;
}
span:nth-of-type(1) {
width: 49%;
height: 78%;
border-radius: 50%;
left: -38%;
top: 11%;
transform: rotate(50deg);
background: linear-gradient(
0deg,
rgb(15, 6, 19) 3%,
rgb(44, 26, 29) 25%,
rgb(15, 6, 19) 100%
);
z-index: -10;
}
span:nth-of-type(2) {
width: 49%;
height: 78%;
border-radius: 50%;
left: -18%;
top: 33%;
transform: rotate(30deg);
background: linear-gradient(
5deg,
rgb(15, 6, 19) 18%,
rgb(44, 26, 29) 29%,
rgb(15, 6, 19) 90%
);
z-index: -10;
}
span:nth-of-type(3) {
width: 49%;
height: 78%;
border-radius: 50%;
left: 10%;
top: 42%;
transform: rotate(0deg);
background: linear-gradient(
0deg,
rgb(15, 6, 19) 18%,
rgb(44, 26, 29) 35%,
rgb(15, 6, 19) 90%
);
z-index: -10;
}
span:nth-of-type(4) {
width: 49%;
height: 78%;
border-radius: 50%;
left: 40%;
top: 42%;
transform: rotate(0deg);
background: rgb(15, 6, 19);
z-index: -10;
}
span:nth-of-type(5) {
width: 40%;
height: 70%;
border-radius: 50%;
right: -13%;
top: 40%;
transform: rotate(-30deg);
background: linear-gradient(
0deg,
rgb(15, 6, 19) 48%,
rgb(44, 26, 29) 80%,
rgb(15, 6, 19) 50%
);
z-index: -10;
}
span:nth-of-type(6) {
width: 49%;
height: 78%;
border-radius: 50%;
right: -38%;
top: 11%;
transform: rotate(-50deg);
background: radial-gradient(
circle at 100% 0%,
rgb(15, 6, 19) 18%,
rgb(44, 26, 29) 25%,
rgb(15, 6, 19) 90%
);
z-index: -11;
}
}
.mouth {
width: 40%;
height: 30%;
top: 47%;
left: 30%;
border-radius: 0% 0% 35% 35%;
border-bottom: 2px rgb(143, 85, 64) solid;
filter: blur(0.4px);
z-index: -11;
span:nth-of-type(1) {
width: 80%;
height: 56%;
border-radius: 0% 0% 35% 35%;
left: 10%;
top: 80%;
border-bottom: 2px rgba(136, 93, 77, 0.3) solid;
filter: blur(1px);
}
}
.eye {
width: 22%;
height: 42%;
border-radius: 50%;
left: 20%;
top: -10%;
background: linear-gradient(0deg, white 87%, rgb(117, 117, 117) 100%);
z-index: -1;
overflow: hidden;
box-shadow: -1px -1px 2px rgb(143, 85, 64), 1px 2px 2px rgb(143, 85, 64);
span:nth-of-type(1) {
width: 79%;
height: 76%;
border-radius: 50%;
left: 25%;
top: 13%;
border: calc(var(--unit) * 0.5) rgb(78, 78, 190) solid;
background: radial-gradient(
circle at 70% 60%,
rgba(46, 206, 255, 1) 50%,
rgba(79, 54, 255, 1) 80%
);
}
span:nth-of-type(2) {
width: 45%;
height: 46%;
border-radius: 50%;
left: 45%;
top: 33%;
background: radial-gradient(
circle at 60% 70%,
rgb(19, 8, 102) 20%,
black 30%
);
}
span:nth-of-type(3) {
width: 12%;
height: 10%;
border-radius: 50%;
left: 62%;
top: 36%;
background: white;
filter: blur(1px);
}
}
.eye-right {
width: 22%;
height: 42%;
border-radius: 50%;
top: -10%;
background: linear-gradient(0deg, white 87%, rgb(117, 117, 117) 100%);
z-index: -1;
overflow: hidden;
right: 20%;
transform: scaleX(-1);
box-shadow: -1px -1px 2px rgb(143, 85, 64), 1px 2px 2px rgb(143, 85, 64);
span:nth-of-type(1) {
width: 79%;
height: 76%;
border-radius: 50%;
left: 25%;
top: 13%;
border: calc(var(--unit) * 0.5) rgb(78, 78, 190) solid;
background: radial-gradient(
circle at 70% 60%,
rgba(46, 206, 255, 1) 50%,
rgba(79, 54, 255, 1) 80%
);
}
span:nth-of-type(2) {
width: 45%;
height: 46%;
border-radius: 50%;
left: 45%;
top: 33%;
background: radial-gradient(
circle at 60% 70%,
rgb(19, 8, 102) 20%,
black 30%
);
}
span:nth-of-type(3) {
width: 12%;
height: 10%;
border-radius: 50%;
left: 62%;
top: 36%;
background: white;
filter: blur(1px);
}
}
}
%hair {
height: 10%;
width: 4%;
background: rgb(128, 47, 43);
background: linear-gradient(
90deg,
rgba(128, 47, 43, 1) 0%,
rgba(85, 16, 12, 1) 48%,
rgba(35, 7, 5, 1) 86%
);
z-index: 4;
top: 19%;
border-radius: 80% 0% 0% 50% / 80% 10% 0% 20%;
}
#hair-left {
@extend %hair;
left: 28%;
}
#hair-right {
@extend %hair;
right: 28%;
transform: scaleX(-1);
}
%ear {
height: 11%;
width: 7%;
background: rgb(179, 121, 99);
top: 22%;
z-index: -1;
border-radius: 50% 0% 0% 100% / 22% 0% 0% 62%;
}
#ear-left {
@extend %ear;
left: 23%;
background: linear-gradient(
276deg,
rgba(179, 121, 99, 1) 25%,
rgba(251, 188, 164, 1) 54%,
rgba(255, 212, 195, 1) 80%
);
span:nth-of-type(1) {
width: 65%;
height: 56%;
border-radius: 50% 100% 0% 100%;
left: 20%;
top: 17%;
background: linear-gradient(
-150deg,
rgba(179, 121, 99, 1) 25%,
rgba(251, 188, 164, 1) 54%,
rgba(255, 212, 195, 0.1) 80%
);
border-left: 2px rgba(143, 85, 64, 0.2) solid;
filter: blur(0.4px);
}
span:nth-of-type(2) {
width: 35%;
height: 36%;
border-radius: 50% 100% 0% 100%;
left: 50%;
top: 37%;
background: linear-gradient(
-150deg,
rgba(179, 121, 99, 1) 25%,
rgba(251, 188, 164, 1) 54%,
rgba(255, 212, 195, 0.1) 80%
);
border-top: 2px rgba(143, 85, 64, 0.4) solid;
border-left: 2px rgba(143, 85, 64, 0.4) solid;
filter: blur(0.4px);
}
}
#ear-right {
@extend %ear;
right: 23%;
transform: scaleX(-1);
background: linear-gradient(
-276deg,
rgba(179, 121, 99, 1) 25%,
rgb(216, 157, 134) 54%
);
span:nth-of-type(1) {
width: 65%;
height: 56%;
border-radius: 50% 100% 0% 100%;
left: 20%;
top: 17%;
background: linear-gradient(
-150deg,
rgba(179, 121, 99, 1) 25%,
rgba(251, 188, 164, 1) 54%,
rgba(255, 212, 195, 0.1) 80%
);
border-left: 2px rgba(143, 85, 64, 0.2) solid;
filter: blur(0.4px);
}
span:nth-of-type(2) {
width: 35%;
height: 36%;
border-radius: 50% 100% 0% 100%;
left: 50%;
top: 37%;
background: linear-gradient(
-150deg,
rgba(179, 121, 99, 1) 25%,
rgba(251, 188, 164, 1) 54%,
rgba(255, 212, 195, 0.1) 80%
);
border-top: 2px rgba(143, 85, 64, 0.4) solid;
border-left: 2px rgba(143, 85, 64, 0.4) solid;
filter: blur(0.4px);
}
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.