<div class="cartoon" role="img" aria-labelledby="desc">
  <div id="desc">Polygonal drawing of a woman</div>
  <div class="face-1"></div>
  <div class="face-2"></div>
  <div class="face-3"></div>
  <div class="shirt"></div>
  <div class="shirt-clear"></div>
  <div class="shirt-dark"></div>
  <div class="shirt-dark-2"></div>
  <div class="lip-bottom"></div>
  <div class="lip-bottom-dark"></div>
  <div class="lip-bottom-light"></div>
  <div class="lip-top"></div>
  <div class="lip-top-dark"></div>
  <div class="lip-top-light"></div>
  <div class="chin-line"></div>
  <div class="cheek-2"></div>
  <div class="cheek-dark"></div>
  <div class="cheek-light"></div>
  <div class="eye-1-top"></div>
  <div class="eye-1-back"></div>
  <div class="eye-1-eyelid"></div>
  <div class="eye-1-eyebrow"></div>
  <div class="eye-cheek"></div>
  <div class="eye-2-top"></div>
  <div class="eye-2-lid"></div>
  <div class="eye-2-eyebrow"></div>
  <div class="hair-1"></div>
  <div class="hair-2"></div>
  <div class="hair-line"></div>
  <div class="shadow-nose"></div>
  <div class="shadow-ear"></div>
  <div class="nose-1"></div>
  <div class="nose-2"></div>
  <div class="hair-back"></div>
</div>
html, body {
  background: #889eff;
}

#desc {
  height: 0;
  width: 0;
  overflow: hidden;
  left: -1000in;
}

.cartoon {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 95vmin;
  height: 95vmin;
}

.cartoon div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.face-1 {
  background: #dc9178;
  clip-path: polygon(46.80% 76.10%,39.20% 27.00%,44.50% 14.30%,61.00% 10.90%,72.60% 19.00%,74.50% 27.10%,74.00% 38.30%,73.80% 42.30%,73.40% 46.30%,71.60% 52.90%,69.80% 56.40%,66.90% 61.10%,64.50% 63.50%,64.00% 68.70%,65.80% 70.20%,70.30% 80.40%);
}

.shirt-clear {
  background: #00237a;
  clip-path: polygon(-0.40% 103.60%,1.00% 93.00%,2.80% 91.40%,5.80% 87.20%,9.40% 84.80%,8.20% 89.20%,8.60% 92.60%,10.20% 89.2%,12.40% 96.8%,12.4% 108.8%,24.8% 102.8%,22.2% 96.20%,29.8% 100.6%,29.4% 113.6%,4.00% 112.8%);
}

.shirt-dark {
  background: #2e2334;
  clip-path: polygon(103.60% 98.00%,98.80% 92.00%,97.20% 87.00%,95.40% 83.20%,93.00% 81.80%,94.40% 85.00%,94.40% 90.20%,94.20% 97.00%,94.00% 101.0%,90.60% 101.8%,90.60% 97.20%,89.40% 90.80%,87.20% 85.60%,87.00% 92.40%,87.00% 114.0%);
}

.shirt-dark-2 {
  background: #2e2334;
  clip-path: polygon(65.10% 69.55%,64.55% 70.95%,63.95% 72.45%,64.90% 73.95%,61.50% 76.30%,62.30% 77.90%,65.40% 77.40%,67.85% 75.80%,69.90% 76.55%,70.55% 73.15%,69.55% 72.55%,67.50% 71.75%,67.05% 71.30%,66.00% 69.45%);
}

.lip-bottom-light {
  background: rgba(255,255,255,0.33);
  clip-path: polygon(61.60% 56.05%,63.55% 56.20%,62.40% 57.45%,61.30% 57.25%,61.25% 56.80%);
}

.shadow-ear {
  background: rgba(0,0,0,0.2);
  clip-path: polygon(34.00% 35.00%,32.20% 35.20%,32.20% 29.80%,32.60% 21.80%,39.00% 11.40%,44.00% 9.80%,38.00% 16.60%,42.60% 16.20%,38.80% 22.80%,43.20% 19.00%,44.60% 14.80%,49.80% 14.80%,43.60% 20.80%,38.60% 26.20%,36.80% 28.60%,39.40% 28.60%,38.40% 35.00%,38.80% 47.80%,37.00% 44.60%,37.00% 40.60%,34.20% 43.80%,33.00% 42.60%,34.60% 40.60%,35.20% 37.60%);
}

.shadow-nose {
  background: rgba(0,0,0,0.1);
  clip-path: polygon(54.10% 47.20%,56.10% 45.40%,59.40% 45.10%,61.60% 45.90%,59.00% 44.70%,54.70% 45.00%,48.40% 47.60%,48.70% 50.10%,53.20% 48.20%);
}

.hair-line {
  background: #945164;
  opacity: 0.5;
  clip-path: polygon(50.60% 14.40%,46.80% 23.20%,44.60% 32.70%,44.00% 44.20%,45.40% 49.60%,48.20% 56.80%,50.00% 59.40%,46.30% 54.20%,43.80% 47.10%,43.20% 38.40%,44.00% 29.60%,45.70% 20.40%,48.90% 15.90%);
}

.cheek-light {
  background: rgba(255,255,255,0.2);
  clip-path: polygon(66.10% 43.30%,68.35% 46.05%,67.90% 48.45%,63.30% 50.40%,64.55% 51.60%,67.25% 52.55%,69.65% 46.90%,71.90% 42.65%,70.65% 42.05%,67.80% 43.25%);
}

.cheek-dark {
  background: rgba(0,0,0,0.1);
  clip-path: polygon(60.20% 64.20%,64.25% 60.15%,67.50% 53.85%,69.90% 49.40%,65.10% 46.05%,64.70% 47.55%,65.80% 50.40%,67.10% 51.90%,64.00% 55.20%,61.45% 58.40%,55.85% 59.65%,58.85% 60.55%,62.70% 60.35%);
}

.lip-bottom-dark {
  background: #2856e3;
  clip-path: polygon(52.90% 55.10%,57.70% 54.70%,56.00% 56.30%,56.80% 57.90%,54.50% 57.30%);
}

.lip-bottom {
  background: #b557b0;
  clip-path: polygon(52.80% 55.90%,57.70% 54.60%,63.50% 55.80%,62.80% 57.30%,61.10% 58.00%,58.50% 58.40%,55.20% 57.60%);
}

.chin-line {
  background: rgba(0,0,0,0.75);
  clip-path: polygon(45.10% 60.50%,54.20% 65.40%,58.80% 65.80%,64.20% 64.20%,58.50% 66.30%,56.20% 66.50%,53.60% 66.40%,47.30% 62.90%);
}

.eye-1-back {
  background: #ad8495;
  clip-path: polygon(64.20% 37.48%,67.53% 37.52%,70.60% 36.95%,68.98% 36.10%,64.95% 36.70%);
}

.eye-1-top {
  background: #945164;
  clip-path: polygon(64.00% 37.50%,65.58% 38.50%,68.23% 38.58%,70.73% 37.33%,71.95% 36.98%,72.15% 35.75%,70.98% 34.20%,70.20% 35.00%,65.10% 36.38%);
}

.eye-1-eyelid {
  background: #2d2136;
  clip-path: polygon(63.30% 37.00%,65.10% 35.70%,68.50% 35.00%,70.20% 35.20%,71.20% 36.50%,71.00% 37.40%,69.40% 36.70%,68.40% 36.70%,68.20% 37.50%,67.30% 37.60%,66.60% 37.60%,65.20% 37.00%,64.10% 37.80%);
}

.lip-top-light {
  background: #b0533f;
  clip-path: polygon(61.90% 55.30%,63.80% 54.60%,64.30% 56.00%,63.10% 56.00%);
}

.lip-top-dark {
  background: #ba6174;
  clip-path: polygon(58.90% 53.20%,59.20% 55.60%,61.70% 55.80%,64.30% 55.30%,62.80% 53.30%,60.70% 53.10%);
}

.lip-top {
  background: #8258a8;
  clip-path: polygon(52.70% 55.20%,55.60% 53.10%,57.70% 52.90%,59.10% 53.30%,61.70% 53.20%,63.10% 53.70%,64.50% 55.90%,63.20% 56.20%,59.80% 55.60%,58.60% 55.90%,55.70% 55.20%);
}

.eye-2-top {
  background: #ae8597;
  clip-path: polygon(45.90% 36.70%,49.90% 37.20%,53.20% 36.10%,50.10% 35.10%,47.40% 35.80%);
}

.cheek-2 {
  background: #97678d;
  clip-path: polygon(49.40% 50.40%,50.40% 50.80%,52.80% 48.10%,50.90% 46.90%);
}

.eye-cheek {
  background: #97678d;
  clip-path: polygon(56.00% 32.20%,49.40% 31.80%,49.40% 35.60%,50.20% 37.90%,46.30% 41.20%,50.10% 45.90%,54.30% 37.70%,51.90% 37.30%,53.70% 35.30%,55.40% 35.20%);
}

.eye-1-eyebrow {
  background: #6a3d4a;
  clip-path: polygon(62.70% 33.10%,66.40% 32.40%,70.20% 32.20%,72.30% 32.80%,70.90% 30.40%,65.50% 30.70%,63.30% 31.30%);
}

.eye-2-lid {
  background: #0b3584;
  clip-path: polygon(44.10% 36.10%,48.60% 34.40%,51.10% 34.60%,53.70% 35.90%,52.70% 36.50%,51.50% 36.10%,51.40% 36.90%,50.50% 37.40%,49.50% 37.40%,48.60% 37.30%,47.80% 36.30%,45.50% 36.80%);
}

.eye-2-eyebrow {
  background: #0b3584;
  clip-path: polygon(43.30% 33.00%,47.90% 32.00%,55.10% 33.00%,56.10% 31.90%,52.30% 30.90%,47.50% 30.50%,44.20% 31.70%);
}

.hair-2 {
  background: #16173c;
  clip-path: polygon(31.60% 35.30%,33.60% 35.30%,34.60% 37.90%,35.70% 38.20%,38.30% 37.50%,38.30% 33.90%,40.80% 29.70%,39.60% 25.50%,44.50% 20.00%,51.30% 15.80%,52.70% 13.90%,51.40% 10.60%,53.60% 10.90%,53.20% 12.90%,55.10% 14.30%,62.60% 14.30%,57.10% 9.80%,54.80% 6.90%,52.40% 5.90%,47.90% 6.00%,42.80% 7.50%,39.70% 10.20%,35.90% 15.30%,32.60% 21.00%,32.40% 25.50%,32.00% 29.40%,31.30% 32.20%);
}

.hair-1 {
  background: #352225;
  clip-path: polygon(31.60% 35.30%,34.00% 35.30%,34.00% 37.50%,35.70% 37.80%,38.60% 40.40%,38.20% 33.80%,41.00% 29.20%,40.30% 25.40%,44.80% 19.30%,53.40% 14.90%,53.40% 13.90%,59.10% 14.10%,62.60% 13.70%,67.80% 17.60%,72.00% 23.20%,73.50% 29.40%,73.50% 32.70%,72.70% 33.00%,73.70% 34.00%,73.30% 36.70%,74.00% 38.70%,76.30% 29.20%,75.20% 20.10%,73.40% 14.10%,70.40% 10.00%,64.50% 7.50%,59.40% 7.00%,56.20% 5.70%,53.00% 6.00%,49.10% 6.10%,40.50% 8.90%,35.80% 15.00%,33.20% 19.30%,31.50% 28.40%,32.00% 29.60%,31.10% 31.90%);
}

.nose-1 {
  background: #2e171a;
  clip-path: polygon(61.05% 48.00%,61.35% 48.60%,62.05% 48.65%,62.35% 47.85%,61.80% 47.55%);
}

.nose-2 {
  background: #121a36;
  clip-path: polygon(56.00% 48.10%,56.85% 47.25%,57.65% 47.65%,57.15% 48.25%,56.45% 48.10%);
}

.hair-back {
  background: #131a36;
  clip-path: polygon(39.05% 52.05%,38.50% 53.50%,39.20% 56.55%,40.20% 57.50%,40.85% 56.45%,40.55% 54.05%);
}

.shirt {
  background: #001d5b;
  clip-path: polygon(-0.50% 103.80%,1.50% 91.90%,2.60% 91.30%,6.40% 85.90%,11.10% 82.90%,23.70% 77.50%,30.10% 74.80%,31.80% 72.90%,33.70% 72.90%,35.70% 71.40%,36.90% 70.10%,38.60% 69.60%,40.80% 72.40%,45.70% 74.10%,55.40% 74.90%,61.00% 74.00%,63.70% 72.90%,64.70% 70.40%,65.20% 69.30%,67.00% 71.30%,69.30% 72.30%,71.50% 74.00%,76.10% 76.00%,89.30% 80.00%,94.70% 82.60%,96.90% 85.60%,98.90% 91.00%,100.9% 106.6%);
}

.face-2 {
  background: #b2799f;
  clip-path: polygon(46.20% 14.20%,35.30% 42.50%,36.90% 51.10%,40.60% 53.50%,46.00% 72.70%,49.20% 86.90%,56.60% 78.60%,55.60% 66.30%,59.70% 65.50%,61.70% 60.10%,58.90% 60.30%,59.80% 58.40%,59.60% 55.50%,59.40% 53.00%,61.00% 53.00%,59.50% 49.00%,61.90% 43.60%,60.20% 37.90%,60.60% 33.00%,64.20% 33.00%,62.40% 37.50%,64.80% 42.00%,68.80% 46.20%,69.90% 39.50%,69.00% 34.90%,68.40% 31.20%,64.50% 31.30%,64.90% 17.60%,57.30% 17.80%,61.90% 11.40%
);
}

.face-3 {
  background: #0073ff;
  clip-path: polygon(37.90% 71.00%,40.80% 66.40%,41.30% 59.80%,40.30% 57.10%,38.70% 52.10%,38.70% 49.10%,37.10% 49.70%,35.10% 48.60%,32.70% 44.30%,31.80% 39.80%,32.10% 35.20%,38.90% 16.00%,48.90% 15.10%,54.00% 23.60%,52.00% 27.40%,54.00% 31.40%,58.60% 33.80%,59.70% 40.60%,58.30% 45.10%,59.90% 46.70%,57.10% 52.80%,56.20% 56.40%,57.60% 58.60%,54.40% 60.40%,56.40% 62.40%,56.50% 66.30%,53.20% 66.20%,52.90% 70.70%,50.60% 78.20%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.