//Imports import react, { Component } from 'react'; import reactDOM from 'react-dom'; import { arc } from 'd3'; //Variables const width = 960; const height = 500; const centerX = width / 2; const centerY = height / 2; const strokeWidth = 10; const eyeOffsetX = 100; const eyeOffsetY = 100; const eyeRadius = 50; const eyeColorRadius = 30; const eyePupilRadius = 20; const eyeColor = "rgba(63,136,160,0.8)"; const eyeBrowWidth = 50; const eyeBrowHeight = 10; const eyeBrowOffsetX = 120; const eyeBrowOffsetY = 170; const mouthWidth = 20; const mouthRadius = 140; const toothWidth = 45; const toothHeight = 40; const toothOffsetX = 50; const toothOffsetY = 120; const tongueOffsetX = 5; const tongueOffsetY = 40; //Components const Face = ({radius}) => ( ); const Eye = ({eyeOffsetX, eyeOffsetY}) => ( ); const EyeBrow = ({eyeBrowOffsetX, eyeBrowOffsetY}) => ( //Experiment to link to CSS and change color/stroke-width on-hover ) const mouthArc = arc() .innerRadius(0) .outerRadius(mouthRadius + mouthWidth) .startAngle(Math.PI / 2) .endAngle(Math.PI * 3/2) ; const tongueArc = arc() .innerRadius(80) .outerRadius(0) .startAngle(Math.PI / 2) .endAngle(Math.PI * 3/2) ; const Tooth = ({offsetX, offsetY}) => ( ); //SVG const App = () => ( ); const rootElement = document.getElementById('root'); ReactDOM.render(, rootElement);

Smiley Face Part 4

Noor M