<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 600 400" enable-background="new 0 0 600 400" xml:space="preserve">
  
  <circle id="head" cx="300" cy="191" r="124.3"/>

  <path id="nose" d="M280.3,174.8  c0,42.9,7.2,52.1,9.7,39.3c5.6,15.3,16.9,15.8,19.4-0.5c4.6,7.2,10.7,8.2,10.2-36.3"/>

  <g id="eyes">
        <path d="M255,196.7
        c0,10.9-5.1,19.7-11.5,19.7s-11.5-8.8-11.5-19.7"/>
        <path d="M367.9,196.7
        c0,10.9-5.1,19.7-11.5,19.7c-6.3,0-11.5-8.8-11.5-19.7"/>
  </g>
  
  <path id="mouth" d="M258.3,235c2.6,20.7,20.3,36.7,41.7,36.7c21.4,0,39-16,41.7-36.7H258.3z"/>

  <g id="teeth">
        <path d="M278.9,235c1,11,2.3,17.7,3.8,17.7s2.8-6.7,3.8-17.7H278.9z"/>
        <path d="M313.5,235c1,11,2.3,17.7,3.8,17.7s2.8-6.7,3.8-17.7H313.5z"/>
  </g>
</svg>
body {
  margin: 0;
  padding: 0;
  background-color: black;
}

svg {
  background-color: cornflowerblue;
  background-size: contain;
  background-repeat: no-repeat;
}

#head {
  //fill: #b6c9d7;
  fill: none;
  stroke-linecap: round;
}

#nose {
  fill: white;
  stroke-width: 3;
  stroke-linecap: mitter;
  transform-origin: 50% 50%;
  transform: translate(0px, -100px) scale(1);
}

#eyes path {
  fill: white;
  stroke-linecap: mitter;
  transform-origin: 50% 50%;
}

#teeth path {
  fill: none;
}

#mouth {
  fill: white;
}
var head = document.getElementById("head");
head.setAttribute("r", "70");
var mouth = document.getElementById("mouth");
mouth.setAttribute("transform", "scale(0.6) translate(200,20)");
var eyes = document.getElementById("eyes");
console.log(eyes);
eyes.childNodes[1].setAttribute("transform","translate(20, -72)");
eyes.childNodes[3].setAttribute("transform","translate(-20, -72)")

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.