<div role="img" aria-label="Cartoon of a tired man"></div>
div {
--skin: #fca;
--skin-shadow: #f865;
--skin-shadow-light: #fb9;
--hair: #963;
--shirt: #bdf;
--shirt-shadow: #9bd;
width: 80vmin;
height: 80vmin;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
background-image:
/* neck */
radial-gradient(closest-side, var(--skin-shadow) calc(100% - 0.75vmin), transparent 0),
linear-gradient(to right, black 0.75vmin, var(--skin) 0 calc(100% - 0.75vmin), black 0),
radial-gradient(closest-side, var(--skin) calc(100% - 0.75vmin), black 0 100%, transparent),
/* body and arms */
linear-gradient(95deg, transparent 50%, black 0 calc(50% + 0.6vmin), transparent 0),
/* linear-gradient(80deg, transparent 50%, black 0 calc(50% + 0.6vmin), transparent 0), */
conic-gradient(at 45% -20%, transparent 170deg, black 0 175deg, transparent 0),
radial-gradient(ellipse 63% 50% at 50% 105%, var(--shirt) 0 65%, transparent 0),
radial-gradient(ellipse 70% 60% at 50% 107%, var(--shirt-shadow) 0 60%, black 0 61%, transparent 0),
radial-gradient(ellipse 70% 60% at 50% 106.5%, black 0 61%, transparent 0),
/* ears */
radial-gradient(ellipse 50% 70% at 50% 100%, transparent 50%, black 0 calc(50% + 0.6vmin), transparent 0),
radial-gradient(ellipse 50% 70% at 50% 100%, transparent 50%, black 0 calc(50% + 0.6vmin), transparent 0),
radial-gradient(ellipse 50% 70%, var(--skin-shadow) 50%, black 0 calc(50% + 0.6vmin), transparent 0),
radial-gradient(ellipse 50% 70%, var(--skin-shadow) 50%, black 0 calc(50% + 0.6vmin), transparent 0),
radial-gradient(ellipse 50% 70%, var(--skin) 50%, black 0 calc(50% + 0.6vmin), transparent 0),
radial-gradient(ellipse 50% 70%, var(--skin) 50%, black 0 calc(50% + 0.6vmin), transparent 0),
/* hair back */
conic-gradient(transparent 60deg, black 0 70deg, transparent 0),
radial-gradient(closest-side, var(--hair) 99.9%, transparent 0),
radial-gradient(closest-side, var(--hair) 99.9%, transparent 0),
radial-gradient(closest-side, var(--hair) 99.9%, transparent 0),
radial-gradient(closest-side, black 99.9%, transparent 0),
radial-gradient(closest-side, black 99.9%, transparent 0),
radial-gradient(closest-side, black 99.9%, transparent 0)
;
background-size:
/* neck */
18% 14%, 18% 14%, 21% 10%,
/* body and arms */
20% 15%, 20% 18%,
100% 100%, 100% 100%, 100% 100%,
/* ears */
10% 8%, 10% 7%,
10% 8%, 10% 7%,
25% 25%, 25% 26%,
/* hair back */
7% 10%,
14% 20%, 40% 20%, 14% 22%,
14% 20%, 41.5% 21%, 14% 22%
;
background-position:
/* neck */
50% 67%, 50% 69%, 50% 76.5%,
/* body and arms */
14% 110%, 85% 110%,
0 0, 0 0, 0 0,
/* ears */
28% 45%, 71.5% 45%,
30.4% 52%, 69.5% 53%,
26% 48%, 73.5% 48%,
/* hair back */
69% 26%,
30% 33%, 53% 16.5%, 70% 33%,
29% 32.5%, 53% 15.75%, 71% 32.5%
;
background-repeat: no-repeat;
}
@property --lip {
syntax: '<percentage>';
inherits: false;
initial-value: 52%;
}
@keyframes moveMouth {
0%, 71%, 100% { --lip: 52%; }
20.5%, 50% { --lip: 37%; }
70% { --lip: 32%; }
}
div::before {
--lip: 52%;
animation: moveMouth 10s linear infinite;
content: "";
display: block;
position: absolute;
top: 23%;
left: 50%;
transform: translate(-50%, 0);
width: 36%;
height: 45%;
border: 1vmin solid black;
border-right-width: 0.75vmin;
border-left-width: 0.75vmin;
border-radius: 80% / 100% 110% 45% 45%;
box-shadow:
inset -0.75vmin -1vmin 0 0vmin var(--skin-shadow),
inset 1.25vmin -1vmin 0 -0.5vmin #fff4;
clip-path: polygon(-5% 15%, 105% 15%, 105% 110%, -5% 110%);
background-image:
/* mouth */
radial-gradient(closest-side, var(--skin) 99.9%, transparent 0),
radial-gradient(closest-side, black 90%, transparent 0),
/* nose */
radial-gradient(closest-side, var(--skin) 99.9%, transparent 0),
radial-gradient(closest-side, black 90%, transparent 0),
/* eyebrows */
radial-gradient(closest-side, var(--skin) 99.9%, transparent 0),
radial-gradient(closest-side, var(--skin) 99.9%, transparent 0),
radial-gradient(closest-side, black 90%, transparent 0),
radial-gradient(closest-side, black 90%, transparent 0),
/* hair */
radial-gradient(closest-side, var(--hair) calc(100% - 1.25vmin), black 0 100%, transparent 0),
linear-gradient(var(--hair) 14%, var(--skin) 0)
;
background-size:
/* mouth */
55% 6%, var(--lip) 6%,
/* nose */
25% 20%, 22% 20%,
/* eyebrows */
50% 18%, 50% 18%, 32% 15%, 32% 15%,
/* hair */
80% 17.5%,
100% 100%
;
background-position:
/* mouth */
50% 90%, 49% 88%,
/* nose */
50% 84.5%, 51.5% 80.5%,
/* eyebrows */
5% 45%, 95% 45%,
15% 38%, 85% 38%,
/* hair */
50% 0%,
0% 0%
;
background-repeat: no-repeat;
}
@property --eyelid {
syntax: '<percentage>';
inherits: false;
initial-value: 40%;
}
/* @keyframes blink {
0%, 8%, 100% { --init: 40%; }
4% { --init: 100%; }
} */
@keyframes blink {
0%, 90%, 94%, 100% { --eyelid: 40%; }
40% { --eyelid: 52%; }
41% { --eyelid: 38%; }
92% { --eyelid: 100%; }
}
div::after {
--eyelid: 40%;
animation: blink 5s linear infinite;
content: "";
display: block;
position: absolute;
top: 43%;
left: 50%;
transform: translate(-50%, 0);
width: 26%;
height: 12%;
background-repeat: no-repeat;
background-image:
radial-gradient(ellipse closest-side, transparent 80%, black 0 calc(80% + 0.5vmin), var(--skin) 0),
radial-gradient(ellipse closest-side, transparent 80%, black 0 calc(80% + 0.5vmin), var(--skin) 0),
linear-gradient(172deg, var(--skin-shadow-light) var(--eyelid), black 0 calc(var(--eyelid) + 0.5vmin), transparent 0),
linear-gradient(185deg, var(--skin-shadow-light) var(--eyelid), black 0 calc(var(--eyelid) + 0.5vmin), transparent 0),
radial-gradient(ellipse closest-side at 50% 55%, black 20%, white 0),
radial-gradient(ellipse closest-side at 50% 55%, black 20%, white 0);
background-size: 38% 100%;
background-position:
left top, right top;
background-repeat: no-repeat;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.