<div class="cartoon hb" id="dipper" role="img" aria-labelled-by="desc">
  <span id="desc">Cartoon of Dipper Pines, from Gravity Falls, done in HTML and CSS</span>
  
  <div class="hair-back b hb ha"></div>
  <div class="hair-clean"></div>
  <div class="visor b"></div>
  <div class="arm-back b"></div>
  <div class="jacket-back b"></div>
  <div class="body b"></div>
  <div class="fore-arm b r ha"></div>
  <div class="neck b r"></div>
  <div class="face b"></div>
  <div class="forehead b"></div>
  <div class="eye b r"></div>
  <div class="nose"></div>
  <div class="eye b r"></div>
  <div class="ear b"></div>
  <div class="smile r b"></div>
  <div class="eyebrow r b"></div>
  <div class="eyebrow r b"></div>
  <div class="hair-sideburns r b hb ha"></div>
  <div class="hair-front r b hb ha"></div>
  <div class="hat-circle b r"></div>
  <div class="hat-top-2 hb ha"></div>
  <div class="hat-top-1 hb ha"></div>
  <div class="pine"></div>
  <div class="hat-bottom r b ha"></div>
  <div class="jacket b ha hb"></div>
  <div class="arm b"></div>
  
  <div class="name">Dipper<br/>Pines</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');

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

.cartoon div {
  position: absolute;
  box-sizing: border-box;
  aopacity: 0.5;
}

.cartoon span#desc {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  left: -1000in;
}

.b {
  border: 0.4vmin solid black;
}

.r {
  border-radius: 100%;
}

.hb::before,
.ha::after {
  content: "";
  display: block;
  position: absolute;
}

/****/
.cartoon {
  --skin: #ffcfb5;
  --nose: #ffb294;
  --shirt: #de654a;
  --jacket: #21344a;
  --pants: #637674;
  --shoes: #191d21;
  --hat: #4179a4;
  --hat-dark: #22455a;
  --hair: #7c4629;
}

.eye {
  width: 7.5vmin;
  height: 7.5vmin;
  top: 28.75%;
  left: 52%;
  border-width: 0.32vmin;
  background: black;
  box-shadow: inset -0.4vmin -0.5vmin 0 2.9vmin white;
}

.eye ~ .eye {
  top: 28.66%;
  left: 44.15%;
  box-shadow: inset 0.25vmin -0.25vmin 0 2.9vmin white;
}

.ear {
  width: 8%;
  height: 11%;
  border-radius: 100% 100% 0 100% / 100% 90% 20% 100%;
  transform: rotate(-25deg);
  top: 33%;
  left: 32%;
  clip-path: polygon(0% 0%, 100% 0%, 65% 100%, 0% 100%);
  background: var(--skin);
}

.nose {
  width: 6%;
  height: 4.5%;
  border: 0.4vmin solid;
  border-radius: 40% 4vmin 100% 100% / 100%;
  border-left-color: #ffcfb5;
  transform: rotate(-19deg);
  top: 34.75%;
  left: 52%;
  background: #ffb294;
}

.face {
  width: 23%;
  height: 30.5%;
  border-radius: 100% 140% 100% 130% / 120% 150% 80% 120%;
  transform: rotate(-38deg);
  top: 22.5%;
  left: 38%;
  background: var(--skin);
  background: linear-gradient(135deg, var(--hair) 15%, var(--skin) 0);
  border-top-color: transparent;
}

.smile {
  width: 7%;
  height: 3%;
  border-color: transparent;
  border-bottom-color: black;
  top: 37.5%;
  left: 49.25%;
  transform: rotate(15deg);
}

.eyebrow {
  width: 6%;
  height: 3%;
  border-color: transparent;
  border-bottom-color: black;
  transform: rotate(198deg);
  top: 25.5%;
  left: 55%;
}

.eyebrow + .eyebrow {
  top: 25%;
  left: 46%;
  transform: rotate(178deg);
}

.forehead {
  width: 20%;
  height: 10%;
  border-color: transparent;
  border-right-color: black;
  border-radius: 20% / 100%;
  transform: rotate(10deg);
  top: 21%;
  left: 42%;
  background: var(--skin);
  clip-path: polygon(0% 50%, 30% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.visor {
  width: 19%;
  height: 13.5%;
  border-radius: 0% 100% 120% 100%;
  transform: rotate(-45deg) skewY(10deg);
  top: 13%;
  left: 54.5%;
  background: var(--hat-dark)
}

.hat-bottom {
  width: 45%;
  height: 8%;
  transform: rotate(-29.5deg);
  top: 20%;
  left: 25.5%;
  border-color: transparent;
  border-top-color: black;
  overflow: hidden;
}

.hat-bottom::after {
  width: 100%;
  height: 200%;
  border: 0.4vmin solid;
  border-radius: 4vmin;
  transform: rotate(-10deg);
  top: -180%;
  left: 25%;
  background: var(--hat);
}

.hair-front {
  width: 16%;
  height: 5%;
  border-color: transparent;
  border-top-color: black;
  transform: rotate(5deg);
  top: 22.5%;
  left: 47%;
  box-shadow: -2vmin -4vmin 0 3vmin var(--hair);
  clip-path: polygon(0% 0%, 80% -200%, 200% -200%, 200% 100%, 67% 100%);
}

.hair-front::before {
  width: 80%;
  height: 70%;
  border-radius: 100%;
  border: 0.4vmin solid;
  transform: rotate(1deg);
  top: -210%;
  left: 44%;
  background: var(--hair);
  clip-path: polygon(35% 0%, 100% 0%, 100% 100%, 35% 100%);
}

.hair-front::after {
  width: 70%;
  height: 150%;
  border: 0.4vmin solid;
  border-radius: 100% 130% 90% 0;
  transform: rotate(25deg);
  top: -160%;
  left: 55%;
  background: var(--hair);
  clip-path: polygon(10% 40%, 67% 0%, 100% 0%, 100% 100%, 67% 100%);
}

.hair-sideburns {
  width: 1.5%;
  height: 10%;
  border-color: transparent;
  border-left-color: black;
  top: 28%;
  left: 40%;
  box-shadow: -1vmin -2vmin 0 1.5vmin var(--hair);
  clip-path: polygon(50% -20%, -400% -20%, -400% 150%, 50% 150%);
}

.hair-sideburns::before {
  width: 1.9vmin;
  border-radius: 100%/ 0 0 2vmin 2vmin ;
  height: 2.5vmin;
  border: 0.4vmin solid;
  border-right-width: 0.4vmin;
  bottom: -15%;
  left: -1.75vmin;
  box-sizing: border-box;
  border-top-color: transparent;
  transform: rotate(-4deg);
  box-shadow: inset 0 0 0 4vmin var(--hair);
}

.hair-sideburns::after {
  width: 2vmin;
  height: 3vmin;
  border: 0.4vmin solid;
  border-radius: 50%;
  border-top-color: transparent;
  transform: rotate(20deg);
  left: -3.5vmin;
  top: 40%;
  background: var(--hair);
  clip-path: polygon(0% 10%, 100% 85%, 100% 120%, 0% 120%);
}

.jacket {
  width: 10%;
  height: 23%;
  border-radius: 2vmin;
  transform: rotate(-7deg);
  top: 46%;
  left: 43%;
  border-color: transparent;
  border-right-color: black;
  box-shadow: inset -3vmin 0 var(--jacket);
}

.jacket::before {
  width: 12vmin;
  height: 6.5vmin;
  border-radius: 130% 50% 50% 130% / 100%;;
  border: 0.4vmin solid;
  transform: rotate(20deg);
  left: -45%;
  top: -6%;
  clip-path: polygon(0% 0%, 72% 0%, 80% 100%, 0% 100%);
  background: var(--jacket);
}

.jacket::after {
  width: 9.75vmin;
  height: 17vmin;
  border-radius: 2vmin 2vmin 2vmin 5vmin;
  border: 0.4vmin solid;
  transform: rotate(13deg);
  left: -1.5vmin;
  background: var(--jacket);
  clip-path: polygon(0% 30%, 75% 30%, 100% 92%, 100% 100%, 0% 100%);
}

.hair-back {
  width: 15%;
  height: 20%;
  border-radius: 6vmin;
  top: 28.5%;
  left: 30.5%;
  border-top-color: var(--hair);
  background: var(--hair);
  box-shadow: -0.25vmin -2vmin var(--hair);
}

.hair-back::before {
  width: 2.5vmin;
  height: 6vmin;
  border: 0.4vmin solid;
  border-radius: 50%;
  left: -24%;
  top: 40%;
  background: var(--hair);
}

.hair-back::after {
  width: 42%;
  height: 20%;
  border-radius: 50%;
  border: 0.4vmin solid;
  transform: rotate(-35deg);
  left: -37%;
  top: 19%;
  background: var(--hair)
}

.hair-clean {
  width: 5%;
  height: 10%;
  background: #f007;
  top: 33.5%;
  left: 28.75%;
  border-radius: 50%;
  background: var(--hair);
  box-shadow: 1vmin -3.5vmin var(--hair);
}

.hat-top-1 {
  width: 20%;
  height: 20%;
  transform: rotate(51deg);
  top: 10.125%;
  left: 19%;
  overflow: hidden;
}

.hat-top-1::after {
  width: 80%;
  height: 100%;
  border-radius: 100% / 60%;
  border: 0.4vmin solid black;
  transform: rotate(25deg);
  top: -64%;
  left: 73%;
  background: white;
}

.hat-top-1::before {
  width: 100%;
  width: 100%;
  height: 100%;
  border-radius: 100% / 60%;
  border: 0.4vmin solid black;
  transform: rotate(13deg);
  top: -20%;
  left: 60%;
  background: var(--hat);
  background: linear-gradient(white 30%, var(--hat) 0);
}

.hat-top-2 {
  width: 25%;
  height: 10%;
  top: 8%;
  left: 35%;
  overflow: hidden;
  clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 80% 100%, 0% 100%);
}

.hat-top-2::after {
  width: 80%;
  height: 200%;
  border: 0.4vmin solid;
  border-radius: 40% 40% 50% 50%;
  transform: rotate(-55deg);
  top: 9%;
  left: 23%;
  clip-path: polygon(62% 0%, 100% 0%, 100% 100%, 0% 100%);
  background: white;
}

.hat-top-2::before {
  width: 100%;
  height: 33%;
  border-radius: 50%;
  border: 0.4vmin solid;
  border-top-color: transparent;
  transform: rotate(-46deg);
  left: -19%;
  top: -4%;
  clip-path: polygon(15% 0%, 50% 0%, 50% 100%, 20% 100%)
}

.hat-circle {
  width: 5%;
  height: 4%;
  transform: rotate(-40deg);
  top: 14%;
  left: 36.5%;
  clip-path: polygon(0% 55%, 50% 55%, 100% 55%, 100% 0%, 0% 0%);
  background: var(--hat);
}

.pine {
  width: 5%;
  height: 7%;
  background: var(--hat);
  top: 10%;
  left: 50%;
  clip-path: polygon(0% 45%, 15% 0%, 75% 33%, 50% 33%, 100% 60%, 65% 68%, 80% 87%, 50% 94%, 40% 75%, 0% 85%, 20% 40%);
}

.arm {
  width: 16%;
  height: 4.5%;
  border-radius: 3vmin 0 3vmin 3vmin;
  transform: rotate(32deg);
  top: 54.25%;
  left: 44%;
  box-shadow: inset 4.5vmin 0 0 -1vmin var(--shirt), inset 4.5vmin 0 0 -0.7vmin black;
  background: var(--skin);
}

.neck {
  width: 6%;
  height: 7%;
  top:45.5%;
  left:52%;
  transform: rotate(-20deg);
  background: var(--skin);
}

.name {
  font-family: 'Luckiest Guy', Arial, sans-serif;
  text-align: center;
  top: 56%;
  left: 50%;
  font-size: 16vmin;
  line-height: 14vmin;
  transform: translate(-50%, 0);
  color: #b3c08b;
  text-shadow: 2px 2px #000, 0px 2px #000, -2px 2px #000, -2px 0 #000, -2px -2px #000, 0 -2px #000, 2px -2px #000, 2px 0 #000;
  filter: drop-shadow(3px 3px black);
}

.body {
  width: 12%;
  height: 22%;
  border-radius: 50% 100% 100% 100% / 100% 100% 5vmin 7vmin;
  transform: rotate(-10deg);
  top: 45.5%;
  left: 49%;
  background: var(--shirt);
}

.jacket-back {
  height: 20%;
  width: 12%;
  border-radius: 2.5vmin 100% 2.5vmin / 30%;
  transform: skewX(10deg) rotate(-10deg);
  top: 46.6%;
  left: 51%;
  background: var(--jacket);
}

.arm-back {
  width: 15%;
  height: 8%;
  border-radius: 50% 120% 60% 100%;
  top: 51%;
  left: 53%;
  background: var(--skin);
  box-shadow: inset 8vmin 1vmin 0 -2vmin var(--shirt), inset 8vmin 1vmin 0 -1.6vmin;
}

.fore-arm {
  width: 8%;
  height: 5%;
  top: 54%;
  left: 53%;
  background: var(--skin);
}

.fore-arm::after {
  width: 100%;
  height: 75%;
  border: 0.4vmin solid;
  border-radius: 0 100% 30% 50%;
  transform: rotate(-45deg);
  left: 32%;
  top: -5%;
  border-left-color: transparent;
  background: var(--skin);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.