<div class="cartoon" role="image" aria-describedby="desc">
  <div id="desc">Cartoon of a pirate holding a sword</div>
  <div class="shadow"></div>
  <div class="peg"></div>
  <div class="foot"></div>
  <div class="toes"></div>
  <div class="ankle"></div>
  <div class="leg leg-1"></div>
  <div class="leg leg-2"></div>
  <div class="waist"></div>
  <div class="arm-2"></div>
  <div class="tie"></div>
  <div class="body"></div>
  <div class="neck"></div>
  <div class="ear-1"></div>
  <div class="head-2"></div>
  <div class="head-1"></div>
  <div class="eye eye-1"></div>
  <div class="eye eye-2"></div>
  <div class="nose"></div>
  <div class="mouth"></div>
  <div class="ear-2"></div>
  <div class="arm-1"></div>
  <div class="hand hand-1"></div>
  <div class="hand hand-2"></div>
  <div class="handle"></div>
  <div class="blade"></div>
  <div class="hook"></div>
  <div class="eyebrow eyebrow-1"></div>
  <div class="eyebrow eyebrow-2"></div>
</div>

html, body {
  overflow: hidden;  
}

#desc {
  position: absolute;
  left: -10000in;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cartoon {
  width: 80vmin;
  height: 80vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 4rem #beeeef)
}

.cartoon * {
  position: absolute;
  box-sizing: border-box;
}

:root {
  --skin: #fca;
  --line: #222;
  --red: #d00;
  color: --line;
}

.head-1 {
  width: 25%;
  height: 15%;
  border-radius: 35% 0 40% 70%;
  background: var(--skin);
  box-shadow: 
    -1vmin 0.1vmin 0 -0.25vmin, 
    0 0.7vmin 0 -0.2vmin,
    inset -1vmin -0.5vmin #f001;
  top: 20%;
  left: 30%;
  transform: rotate(-10deg);
}

.head-2 {
  width: 24%;
  height: 25%;
  background: var(--skin);
  border-radius: 45%;
  top: 10%;
  left: 32.5%;
  box-shadow: -0.25vmin -0.5vmin 0 0.25vmin, 0.25vmin 0, inset -0.25vmin 0, inset -2vmin 4vmin 0 -2.25vmin var(--red), inset -2vmin 4vmin 0 -1.85vmin, inset -3vmin 0 #f001;
}

.nose {
  width: 6%;
  height: 5%;
  border-radius: 50%;
  box-shadow: -1vmin -0.5vmin 0 -0.25vmin;
  transform: rotate(10deg);
  top: 23%;
  left: 38%;
  background: var(--skin);
}

.ear-1 {
  width: 6%;
  height: 8%;
  background: var(--skin);
  border-radius: 50%;
  box-shadow: -0.25vmin 0 0 0.25vmin;
  top: 18%;
  left: 30%;
}

.eye {
  width: 6%;
  height: 7%;
  background: white;
  border-radius: 100% / 100% 120% 40% 40%;
  box-shadow: 0.25vmin 0 0 0.25vmin, -0.125vmin -0.125vmin 0 0.25vmin;
  overflow: hidden;
}

.eye::before {
  content: "";
  display: block;
  position: absolute;
  width: 5vmin;
  height: 5vmin;
  background: var(--line);
  border-radius: 50%;
  top: 20%;
  left: 22%;
}

.eye-1 {
  top: 16.5%;
  left: 33.5%;
}

.eye-2 {
  top: 16.75%;
  left: 43%;
  transform: rotate(3deg) scale(1.1);
}

.mouth {
  width: 12%;
  height: 4%;
  background: var(--line);
  border-radius: 1vmin 2vmin 50% 60%;
  top: 28%;
  left: 35%;
  background-image:
    linear-gradient(var(--line) 20%, transparent 0),
    repeating-linear-gradient(to right, transparent 0 5%, white 0 25%),
    radial-gradient(at 70% 200%, var(--red) 50%, transparent 0);
  background-size: 87% 50%, 87% 50%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 65% 0%;
  box-shadow: inset -0.5vmin 0, inset 0 0 0 0.25vmin;
}

.ear-2 {
  width: 8%;
  height: 10%;
  background: var(--skin);
  border-radius: 50%;
  box-shadow: 
    0.6vmin -0.125vmin 0 0.4vmin,
    0.125vmin -0.75vmin 0 -0.25vmin;
  top: 18.5%;
  left: 52.5%;
  transform: rotate(15deg);
}

.ear-2::before {
  content: "";
  display: block;
  position: absolute;
  width: 2vmin;
  height: 2vmin;
  border: 0.35vmin solid;
  border-right: 0.75vmin solid;
  border-left:0.125vmin solid transparent;
  border-radius: 50%;
  box-shadow:
    inset -0.75vmin 0 #f001,
    0.5vmin -0.75vmin 0 0.25vmin #f001;
  top: 50%;
  left: 25%;
}

.ear-2::after {
  content: "";
  display: block;
  position: absolute;
  width: 2vmin;
  height: 2vmin;
  border: 0.35vmin solid gold;
  border-bottom: 0.75vmin solid gold;
  border-top:0.125vmin solid transparent;
  border-radius: 50%;
  top: 90%;
  left: 50%;
  filter: drop-shadow(0.45vmin 0.25vmin) drop-shadow(-0.25vmin 0.25vmin) drop-shadow(0 -0.25vmin);
}

.body {
  width: 20%;
  height: 32%;
  background-image: 
    radial-gradient(at 105% 0%, var(--skin) 24%, transparent 0),
    radial-gradient(at 105% 0%, var(--line) 26%, transparent 0),
    repeating-radial-gradient(circle at 50% -20%, white 0 15%, #369 15.5% 30%, white 30.5%);
  border-radius: 100% / 120% 120% 10% 15%;
  box-shadow: 0 0 0 0.5vmin, -0.25vmin 0.25vmin 0 0.25vmin, inset -0.75vmin -0.5vmin #0001;
  top: 34%;
  left: 34%;
  transform: rotate(3deg);
}

.tie {
  width: 10vmin;
  height: 5vmin;
  background: var(--red);
  border: 0.5vmin solid;
  border-radius: 0 100%;
  box-shadow: 0.25vmin 0.125vmin;
  transform: rotate(50deg);
  top: 30%;
  left: 52%;
}

.tie::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--red);
  border: 0.5vmin solid;
  border-radius: 0 100%;
  box-shadow: 0.25vmin 0.125vmin;
  transform-origin: top left;
  transform: rotate(-24deg);
}

.neck {
  width: 6%;
  height: 8%;
  border-radius: 50%;
  background: var(--skin);
  border: 0.5vmin solid;
  box-shadow: inset 1vmin 7vmin 0 -4vmin #f001, 0 0.25vmin;
  transform: rotate(30deg);
  top: 32%;
  left: 41%;
}

.arm-1 {
  width: 3vmin;
  height: 25vmin;
  background: var(--skin);
  border-left: 0.6vmin solid;
  border-right: 0.6vmin solid;
  transform-origin: 50% 0%;
  transform: rotate(-45deg) skewY(-50deg);
  top: 38.8%;
  left:48%;
  background-image: linear-gradient(88deg, #f001 40%, transparent 0)
}

.hand {
  width: 8.5vmin;
  height: 7.5vmin;
  border-radius: 50%;
  background: var(--skin);
  box-shadow: 0.25vmin 0 0 0.5vmin;
}

.hand-1 {
  top: 58%;
  left: 68%;
}

.hand-2 {
  top: 10%;
  left: 17%;
  background-image:
    radial-gradient(circle at 70% -50%, lightgray 80%, var(--line) 0 83%, transparent 0)
}

.hand-2::before {
  content: "";
  display: block;
  position: absolute;
  width: 20%;
  height: 20%;
  background: var(--skin);
  top: 90%;
  left: 22%;
  border-radius: 50%;
}

.blade {
  height: 47%;
  width: 5%;
  border-radius: 0% 90% 20% 0%;
  background: lightgray;
  border: 0.5vmin solid;
  box-shadow: 0.25vmin 0;
  transform-origin: 50% 100%;
  transform: rotate(30deg);
  background-image: linear-gradient(to right, #fff4 35%, transparent 0);
  top: 10%;
  left: 74.5%;
}

.handle {
  width: 15%;
  height: 15%;
  border-radius: 50%;
  background-image: 
    radial-gradient(circle at 50% 0%, brown 75%, transparent 0),
    radial-gradient(circle at 54% 0%, var(--line) 77%, transparent 0),
    radial-gradient(circle at 47% 0%, var(--line) 77%, transparent 0);
  box-shadow: inset 0.35vmin 0.5vmin,
    inset -0.5vmin 0.75vmin;
  transform: rotate(30deg);
  top: 53%;
  left: 67%;
}

.arm-2 {
  width: 30%;
  height: 30%;
  border-radius: 100%; / 80% 30% 40% 50%;
  transform: skewX(0deg);
  box-shadow: 
    inset 2vmin -4.25vmin 0 -2vmin #f001,
    inset 4.5vmin -1vmin 0 -2.1vmin var(--skin),
    inset 2vmin -4.25vmin 0 -2vmin var(--skin),
    inset 4.5vmin -1.25vmin 0 -1.5vmin,
    inset 2vmin -4.25vmin 0 -1.5vmin,
    -0.5vmin 0.75vmin
    ;
  top: 10%;
  left: 18%;
}

.hook {
  width: 15%;
  height: 15%;
  filter: drop-shadow(0 -0.5vmin) drop-shadow(0 0.5vmin) drop-shadow(0.5vmin 0vmin) drop-shadow(-0.5vmin 0vmin);
  top: 1%;
  left: 22%;
  transform: rotate(15deg);
}

.hook::before {
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 50%;
  box-shadow: inset 2vmin 0 lightgray;
  border-radius: 50%;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0% 50%);
  top: 50%;
  left: 8%;
}

.hook::after {
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 50%;
  box-shadow: inset -2vmin 1vmin lightgray, inset 0vmin 2.6vmin lightgray;
  border-radius: 50%;
  aclip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
  top: 8%;
  left: -1%;
}

.eyebrow {
  width: 10%;
  height: 10%;
  border-radius: 100% / 60%;
  box-shadow: 0 -3vmin 0 -1vmin
}

.eyebrow-1 {
  top: 15%;
  left: 30.5%;
  transform: rotate(3deg);
}

.eyebrow-2 {
  top: 15%;
  left: 42%;
  transform: rotate(-3deg);
}

.waist {
  width: 20%;
  height: 17%;
  border-radius: 50%;
  background: var(--line);
  border: 0.5vmin solid;
  box-shadow: 0 0.25vmin;
  top: 55%;
  left: 33.5%;
}

.waist::before {
  content:"";
  display: block;
  position: absolute;
  width: 35%;
  height: 35%;
  background: var(--line);
  border-radius: 50%;
  top: 75%;
  left: 60%;
}

.leg {
  filter: drop-shadow(0.5vmin 0) drop-shadow(0vmin -0.75vmin) drop-shadow(0vmin 0.75vmin) drop-shadow(-0.5vmin 0);
  box-shadow: inset 5vmin -5vmin var(--line);
  width: 22%;
  height: 25%;
}

.leg-1 {
  top: 65%;
  left: 46.5%;
  height: 28%;
  border-radius: 0 0 0 20%;
  transform: skewX(20deg) rotate(15deg);
}

.leg-2 {
  top: 63.5%;
  left: 16%;
  border-radius: 0 0 0 20%;
  transform: skewX(-20deg) rotate(90deg);
}

.peg {
  width: 5%;
  height: 14%;
  filter: drop-shadow(0 0.5vmin) drop-shadow(0.4vmin 0) drop-shadow(-0.4vmin 0);
  transform: rotate(17deg);
  left: 9%;
  top: 86%;
}

.peg::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: brown;
  clip-path: polygon(0% 0%, 100% 0%, 54% 100%, 46% 100%);
}

.ankle {
  width: 12%;
  height: 5%;
  background: var(--skin);
  border-radius: 10vmin;
  border: 0.5vmin solid;
  box-shadow: 0.25vmin 0.125vmin;
  transform: rotate(12deg);
  top: 90%;
  left: 68%;
}

.ankle::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 95%;
  background: var(--skin);
  top:0;
  left: 20%;
}

.foot {
  width: 10%;
  height: 9%;
  background: var(--skin);
  border: 0.5vmin solid;
  border-radius: 100% / 130% 150% 20% 20%;
  bottom: 0;
  left: 75%;
  transform: rotate(-4deg);
}

.toes {
  width: 5%;
  height: 2.5%;
  border-radius: 100% / 120% 120% 0 0;
  background: var(--skin);
  border: 0.5vmin solid;
  bottom: -0.5%;
  left: 72%;
  box-shadow: 
    3vmin 0.25vmin 0 -0.75vmin var(--skin),
    3vmin 0.25vmin 0 -0.25vmin,
    5.5vmin 0.25vmin 0 -0.75vmin var(--skin),
    5.5vmin 0.25vmin 0 -0.25vmin,
    7.5vmin 0.25vmin 0 -0.75vmin var(--skin),
    7.5vmin 0.25vmin 0 -0.25vmin;
}

.shadow {
  width: 100%;
  height: 5%;
  border-radius: 50%;
  background: #0001;
  bottom: -2.5%;
}