Export Code
Connected
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { arc } from 'd3';

const width = 960;
const height = 500;
const centerX = width / 2;
const centerY = height / 2;
const strokeWidth = 20;
const eyeOffsetX = 90;
const eyeOffsetY = 100;
const eyeRadius = 40;
const mouthWidth = 20;
const mouthRadius = 140;

const mouthArc = 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

Smiley Face Part III

Curran Kelleher

Last edited Apr 26, 2020
Created on Jan 21, 2020

Smiley face implementation with React & D3.

MIT Licensed