//mostly html 
              <circle cx="450" 
              cx={centerx} 
              cy={centery}
           //   cy="250" 
            //  r="245"
            //  fill="yellow"
            //  stroke="black"
             // stroke-width="10">
     // </circle>
     
      <circle cx={centerx-eyeoffsetx} 
           cy={centery-eyeoffsety} 
           r={eyeradius}
            />
  
   <circle cx={centerx+eyeoffsetx} 
           cy={centery-eyeoffsety} 
           r={eyeradius}
            />
            
//mostly jsx

import React from 'react';
 import ReactDOM from 'react-dom';
 import {arc} from 'd3';


const width=900;
const height=500;
const centerx=width/2;
const centery=height/2;
const strokewidth=20;
const eyeoffsetx=125;
const eyeoffsety=100;
const eyeradius=40;
const mouthwidth=20;
const mouthradius=140;

const moutharc = d3.arc()
    .innerRadius(mouthradius)
    .outerRadius(mouthradius+mouthwidth)
    .startAngle(Math.PI/2)
    .endAngle(Math.PI * 3/2);

const App = () => (
<svg width={width} height={height}>
  <g transform={`translate(${centerx},${centery})`}>
      <circle  
              r={centery - strokewidth / 2}
              fill="yellow"
              stroke="black"
              stroke-width={strokewidth}
           />
  <circle cx={-eyeoffsetx} 
           cy={-eyeoffsety} 
           r={eyeradius}
            />
  
   <circle cx={eyeoffsetx} 
           cy={-eyeoffsety} 
           r={eyeradius}
            />
     <path d={moutharc()}/>
  </g>
    </svg>
);
const rootElement= document.getElementById('root');
ReactDOM.render(<App />, rootElement);

