<div class="teddy">
  <div class="right-ear"></div>
  <div class="left-ear"></div>
  <div class="head">
    <div class="right-eye"></div>
    <div class="left-eye"></div>
    <div class="mouth-area">
      <div class="right-cheek"></div>
      <div class="left-cheek"></div>
      <div class="nose">
        <div class="nose-inner"></div>
      </div>
    </div>
  </div>
  <div class="body"></div>
  <div class="right-arm">
    <div class="arm-inner"></div>
    <div class="paw"></div>
  </div>
  <div class="left-arm">
    <div class="arm-inner"></div>
    <div class="paw"></div>
  </div>
  <div class="right-leg">
    <div class="foot"></div>
  </div>
  <div class="left-leg">
    <div class="foot"></div>
  </div>
</div>
.teddy {
	font-size: calc(50vmin / 260);
	position: relative;
	margin: auto;
	width: 260em;
	height: 330em;
}
.teddy div {
	position: absolute;
}
.right-ear, .left-ear, .head, .right-eye, .left-eye, .mouth-area, .nose, .nose-inner, .right-cheek, .left-cheek, .body, .paw, .foot {
	border-radius: 50%;
}
.right-ear, .left-ear {
	background: rgb(95,60,30);
	box-shadow: 0 0 0 20em rgb(190,120,60) inset;
	width: 80em;
	height: 80em;
}
.right-ear {
	left: 30em;
}
.left-ear {
	right: 30em;
}
.head {
	background: rgb(190,120,60);
	width: 160em;
	height: 160em;
	right: 0;
	left: 0;
	margin: auto;
	z-index: 1;
}
.right-eye, .left-eye, .nose-inner {
	background: rgb(255, 255, 255);
}
.right-eye, .left-eye {
	box-shadow: 2em -2em 0 8em inset;
	top: 65em;
	width: 20em;
	height: 20em;
}
.right-eye {
	left: 45em;
}
.left-eye {
	right: 45em;
}
.mouth-area {
	background: rgb(230,160,90);
	right: 0;
	bottom: 5em;
	left: 0;
	margin: auto;
	width: 100em;
	height: 70em;
}
.nose {
	background: rgb(0,0,0);
	top: 15em;
	right: 0;
	left: 0;
	margin: auto;
	width: 40em;
	height: 30em;
}
.nose-inner {
	top: 3em;
	right: 8em;
	width: 10em;
	height: 8em;
}
.right-cheek, .left-cheek {
	bottom: 10em;
	width: 30em;
	height: 30em;
}
.right-cheek {
	box-shadow: -2em -2em 0 0 rgb(115,80,45) inset;
	left: 20em;
}
.left-cheek {
	box-shadow: 2em -2em 0 0 rgb(115,80,45) inset;
	right: 20em;
}
.body {
	background: rgb(230,160,90);
	box-shadow: 0 0 0 24em rgb(190,120,60) inset;
	margin: auto;
	right: 0;
	bottom: 22em;
	left: 0;
	width: 170em;
	height: 190em;
}
.right-arm, .left-arm {
	background: rgb(170,100,50);
	top: 130em;
	width: 70em;
	height: 60em;
}
.right-arm {
	border-radius: 70em 0 0 0 / 60em 0 0 0;
	left: 0;
}
.right-arm .arm-inner {
	border-radius: 50em 0 0 0 / 80em 0 0 0;
	box-shadow: 22em 22em 0 0 rgb(170,100,50) inset;
	left: 55em;
}
.left-arm, .left-arm .paw {
	right: 0;
}
.left-arm {
	border-radius: 0 70em 0 0 / 0 60em 0 0;
}
.left-arm .arm-inner {
	border-radius: 0 50em 0 0 / 0 80em 0 0;
	box-shadow: -22em 22em 0 0 rgb(170,100,50) inset;
	right: 55em;
}
.arm-inner {
	width: 50em;
	height: 80em;
	bottom: 0;
}
.paw {
	background: rgb(190,120,60);
	width: 80em;
	height: 60em;
	top: 30em;
}
.right-leg, .left-leg {
	background: rgb(170,100,50);
	border-radius: 45em 45em 0 0 / 70em 70em 0 0;
	bottom: 40em;
	width: 90em;
	height: 70em;
}
.right-leg  {
	left: 10em;
}
.left-leg  {
	right: 10em;
}
.foot  {
	background: rgb(230,160,90);
	box-shadow: 0 5em 0 10em rgb(190,120,60) inset;
	width: 100%;
	height: 80em;
	top: 30em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.