<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 {
    position: relative;
    margin: auto;
    width: 260px;
    height: 330px;
}
.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 20px rgb(190,120,60) inset;
    width: 80px;
    height: 80px;
}
.right-ear {
    left: 30px;
}
.left-ear {
    right: 30px;
}
.head {
    background: rgb(190,120,60);
    width: 160px;
    height: 160px;
    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: 2px -2px 0 8px inset;
    top: 65px;
    width: 20px;
    height: 20px;
}
.right-eye {
    left: 45px;
}
.left-eye {
    right: 45px;
}
.mouth-area {
    background: rgb(230,160,90);
    right: 0;
    bottom: 5px;
    left: 0;
    margin: auto;
    width: 100px;
    height: 70px;
}
.nose {
    background: rgb(0,0,0);
    top: 15px;
    right: 0;
    left: 0;
    margin: auto;
    width: 40px;
    height: 30px;
}
.nose-inner {
    top: 3px;
    right: 8px;
    width: 10px;
    height: 8px;
}
.right-cheek, .left-cheek {
    bottom: 10px;
    width: 30px;
    height: 30px;
}
.right-cheek {
    box-shadow: -2px -2px 0 0 rgb(115,80,45) inset;
    left: 20px;
}
.left-cheek {
    box-shadow: 2px -2px 0 0 rgb(115,80,45) inset;
    right: 20px;
}
.body {
    background: rgb(230,160,90);
    box-shadow: 0 0 0 24px rgb(190,120,60) inset;
    margin: auto;
    right: 0;
    bottom: 22px;
    left: 0;
    width: 170px;
    height: 190px;
}
.right-arm, .left-arm {
    background: rgb(170,100,50);
    top: 130px;
    width: 70px;
    height: 60px;
}
.right-arm {
    border-radius: 70px 0 0 0 / 60px 0 0 0;
    left: 0;
}
.right-arm .arm-inner {
    border-radius: 50px 0 0 0 / 80px 0 0 0;
    box-shadow: 22px 22px 0 0 rgb(170,100,50) inset;
    left: 55px;
}
.left-arm, .left-arm .paw {
    right: 0;
}
.left-arm {
    border-radius: 0 70px 0 0 / 0 60px 0 0;
}
.left-arm .arm-inner {
    border-radius: 0 50px 0 0 / 0 80px 0 0;
    box-shadow: -22px 22px 0 0 rgb(170,100,50) inset;
    right: 55px;
}
.arm-inner {
    width: 50px;
    height: 80px;
    bottom: 0;
}
.paw {
    background: rgb(190,120,60);
    width: 80px;
    height: 60px;
    top: 30px;
}
.right-leg, .left-leg {
    background: rgb(170,100,50);
    border-radius: 45px 45px 0 0 / 70px 70px 0 0;
    bottom: 40px;
    width: 90px;
    height: 70px;
}
.right-leg  {
    left: 10px;
}
.left-leg  {
    right: 10px;
}
.foot  {
    background: rgb(230,160,90);
    box-shadow: 0 5px 0 10px rgb(190,120,60) inset;
    width: 100%;
    height: 80px;
    top: 30px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.