<div id="bear">
  <div class="ears"></div>
  <div class="ears"></div>
  <div id="head">
    <div class="eyes"></div>
    <div class="eyes"></div>
    <div id="teeth"></div>
    <div id="muzzle">
      <div id="nose"></div>
    </div>
    
  </div>
  
</div>

HTML CSSResult Skip Results Iframe
*{
  margin:0;
}

:root{
  --bg : #B6AD90;
  --face: #bb652a;
  --nose: #693414;
  --ears:#905221;
  --teeth:#fafffa;
  --eyes:#6e3613;
}

body{
  width:100%;
  height:100vh;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  background: var(--bg);
}

#head{
  background:var(--face);
  width:35vw;
  height:30vw;
  border-radius:50% 50% 35% 35%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}





#muzzle{
  background:#ffd69e;
  width:7vw;
  transform:scale(1.4);
  height:6vw;
  border-radius:4vw;
  position:absolute;
  bottom:8vw;
  z-index:2;
  display:flex;
  justify-content:center;
}

#nose{
  background:var(--nose);
  width:45%;
  height:2vw;
  border-radius:2vw;
  position:absolute;
  top:.5vw;
}

#teeth{
  background:var(--teeth);
  width:5vw;
  height:10vw;
  position:absolute;
  bottom:3vw;
  border-radius:5vw;
}

.eyes{
  width:3.25vw;
  height:3.25vw;
  background:var(--eyes);
  border-radius:50%;
  left:10vw;
  position:absolute;
  top:12vw;
}

.eyes:nth-child(2){
  right:10vw;
  left:auto;
}

.ears{
  width:10vw;
  height:8vw;
  border-radius:8vw;
  background:var(--ears);
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:rotate(50deg);
}

.ears:nth-child(2){
  transform:rotate(-50deg);
  margin-left:25vw;
}

.ears::after{
  content:'';
  background:#ffa5a0;
  width:7vw;
  height:5vw;
  position:absolute;
  border-radius:5vw;
}