<div class="head-wrapper">
<div class="head | absolute">
<div class="mark a | absolute"></div>
<div class="mark b | absolute"></div>
<div class="mark c | absolute"></div>
<div class="mark d | absolute"></div>
<div class="mark e | absolute"></div>
<div class="mark f | absolute"></div>
<div class="mark g | absolute"></div>
<div class="mark h | absolute"></div>
<div class="mark i | absolute"></div>
<div class="jaws | absolute">
<div class="whisker a | absolute"></div>
<div class="whisker b | absolute"></div>
<div class="whisker c | absolute"></div>
<div class="whisker d | absolute"></div>
<div class="whisker e | absolute"></div>
<div class="whisker f | absolute"></div>
<div class="mouth">
<div class="left | absolute"></div>
<div class="right | absolute"></div>
<div class="center a | absolute"></div>
<div class="center b | absolute"></div>
<div class="center c | absolute"></div>
<div class="center d | absolute"></div>
</div>
</div>
<div class="nose | absolute"></div>
</div>
<div class="ear left | absolute wobble-hor-bottom">
<div class="inner-ear | absolute"></div>
</div>
<div class="ear right | absolute wobble-hor-bottom">
<div class="inner-ear | absolute"></div>
</div>
<div class="eye left | absolute"></div>
<div class="eye right | absolute"></div>
</div>
body {
display:grid;
justify-content:center;
align-items:center;
}
.head-wrapper {
width: 358.5px;
height: 313px;
position:relative;
}
.head-wrapper:has(:active),
.head-wrapper:has(:hover) {
--eye-size-scale: 0.3;
--mouth-rotation: 1deg;
--mouth-scaling: 1.03;
--ear-animation: wobble-hor-bottom 0.8s both;
}
.head {
background: #fcaa51;
left: 34px;
right: 39px;
top: 8px;
bottom: 0;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-right-radius: 115px 115px;
border-bottom-left-radius: 115px 115px;
overflow: hidden;
}
.ear {
background: #fcaa51;
width: 67px;
height: 80px;
border-radius: 50%;
}
.ear.left {
left: 6px;
top: -4px;
rotate: -60deg;
}
.ear.right {
right: 6px;
top: -4px;
rotate: 60deg;
}
.inner-ear {
background: #fed1d4;
left: 12px;
top: 20px;
right: 15px;
bottom: 12px;
border-radius: 50%;
}
.ear.right .inner-ear {
left: 15px;
right: 12px;
}
.eye {
background: #574137;
width: 19px;
height: 27px;
top: 138px;
border-radius: 50%;
transform: scaleY(var(--eye-size-scale, 1));
transition: all 150ms;
}
.eye.left {
left: 101px;
}
.eye.right {
right: 107px;
}
.mark {
background: #b15b00;
width: 50px;
height: 400px;
border-radius: 50%;
border-top-left-radius: 49% 48%;
border-top-right-radius: 48% 49%;
transform-origin: center top;
}
.mark.a {
rotate: 70deg;
top: 212px;
left: 31px;
}
.mark.b {
rotate: 80deg;
top: 180px;
left: 31px;
width: 45px;
}
.mark.c {
rotate: 90deg;
top: 151px;
left: 28px;
}
.mark.d {
rotate: 177deg;
top: 76px;
left: 84px;
}
.mark.e {
rotate: 180deg;
top: 76px;
left: 125px;
}
.mark.f {
rotate: 185deg;
top: 76px;
left: 165px;
width: 45px;
}
.mark.g {
rotate: 264deg;
top: 145px;
left: 210px;
width: 45px;
}
.mark.h {
rotate: 270deg;
top: 180px;
left: 208px;
}
.mark.i {
rotate: 285deg;
top: 205px;
left: 212px;
}
.jaws {
background: #fbe3cb;
left: 78px;
right: 72px;
bottom: 16px;
top: 184px;
border-top-left-radius: 50px 60px;
border-top-right-radius: 50px 60px;
border-bottom-right-radius: 60px 45px;
border-bottom-left-radius: 55px 45px;
transform: scaleX(var(--mouth-scaling));
transition: scale 150ms;
}
.nose {
background: #584237;
left: 121px;
right: 121px;
bottom: 103px;
top: 172px;
border-radius: 50%;
}
.whisker {
--color: #ffffff;
width: 40px;
height: 5px;
border: solid 3px var(--color);
border-color: var(--color) transparent transparent transparent;
border-radius: 50% / 5px 5px 0 0;
}
.whisker.a {
rotate: 3deg;
left: -15px;
top: 43px;
}
.whisker.b {
rotate: -5deg;
left: -15px;
top: 58px;
}
.whisker.c {
rotate: -25deg;
left: -10px;
top: 73px;
}
.whisker.d {
rotate: 23deg;
right: -15px;
top: 70px;
}
.whisker.e {
rotate: 7deg;
right: -17px;
top: 55px;
}
.whisker.f {
rotate: -7deg;
right: -17px;
top: 43px;
}
.mouth .left,
.mouth .right {
--color: #574137;
border-left: 5px solid var(--color);
border-bottom: 5px solid var(--color);
border-right: 5px solid var(--color);
border-radius: 0px 0px 150px 100px;
width: 13px;
height: 7px;
}
.mouth .left {
left: 46px;
bottom: 30px;
rotate: -25deg;
}
.mouth .right {
right: 50.8px;
bottom: 30px;
rotate: 25deg;
transform: scaleX(-1);
}
.mouth .center {
top: 0;
left: 62px;
height: 50px;
width: 4px;
background: #574137;
}
.mouth .center.b {
top: 0;
left: 65px;
height: 50px;
width: 4px;
}
.mouth .center.c {
top: 30px;
left: 61.5px;
height: 32px;
width: 6px;
transform-origin: left center;
rotate: 2deg;
}
.mouth .center.d {
top: 30px;
left: 65px;
height: 32px;
width: 4px;
transform-origin: right center;
rotate: -2deg;
}
/* HELPER */
.absolute {
position: absolute;
}
.wobble-hor-bottom {
animation: var(--ear-animation);
}
/* ----------------------------------------------
* Generated by Animista on 2024-3-23 1:59:55
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation wobble-hor-bottom
* ----------------------------------------
*/
@keyframes wobble-hor-bottom {
0%,
100% {
transform: translateX(0%);
transform-origin: 50% 50%;
}
15% {
transform: translateX(-15px) rotate(-3deg);
}
30% {
transform: translateX(10px) rotate(3deg);
}
45% {
transform: translateX(-10px) rotate(-2.6deg);
}
60% {
transform: translateX(4px) rotate(1.4deg);
}
75% {
transform: translateX(-2px) rotate(-0.8deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.