Smiley Face SVG assignment

Smiley Face Pt 1-2 Assignment

A stylized smiley face rendered in SVG using React and D3’s `arc` generator for the mouth, with two animated circles for eyes that pulse via `<animate>` elements. The face fills a dark grey circle with a black stroke, while the left eye is overlaid with a darkkhaki geometric pattern defined in SVG `<pattern>` and `<path>` elements. D3 v6 computes the mouth’s inner and outer arcs, and React handles the component structure and JSX state. The example uses fixed pixel dimensions and coordinates, with no external data source.

Bbonbonwee

Smiley Face Assignment

This example renders a cartoon smiley face using React and D3 version 7, with SVG elements for the head, ears, eyes, mouth, nose, and a vertical line. The face is drawn with circles, an ellipse, a line, and a path generated by the `arc` function from D3, which creates the curved mouth by specifying inner and outer radii along with start and end angles. All shapes are centered within an SVG canvas of 960 by 500 pixels, with positions calculated relative to the center coordinates and fixed offsets for the eyes and ears. The code uses React’s `StrictMode` and `ReactDOM.render` to mount the component, and styling is applied through SVG attributes like `fill` and `stroke-width`.

PPaul B

Smiley Face Assignment (D3)

This example uses React 17 and D3 v6 to draw a smiley face in an SVG. The face is constructed from a yellow circle for the head, two eye arcs created with `d3.arc`, a mouth arc, and a horizontal line for the teeth, all positioned around the center of the 960x500 viewport. The code defines each shape with D3’s `arc` API, using inner and outer radii and start/end angles, then renders them as SVG paths within a transformed group. The data is hardcoded in the JavaScript, with styling applied via SVG attributes.

EElvira Nassirova

Smiley with React

A smiling face is drawn entirely with SVG shapes in a React component, with a yellow circle for the face, black circles for the eyes, and a curved arc for the mouth. The code uses React 16.13.1 with ReactDOM to render the component into the DOM, while the `arc` function from D3 v6 generates the mouth path. D3’s `arc` is configured with inner and outer radii, and start and end angles to create a simple smile. The visualization demonstrates a straightforward integration of D3 shape generators within a React rendering pipeline.

AAlex Slobodyansky

Smiley Face

A classic smiley face rendered as an SVG in React, using D3’s `arc()` generator to draw the mouth as a curved path. The face consists of three `circle` elements for the head and eyes, with a yellow fill and black stroke, all centered via a translation transform. D3 v5 provides the arc geometry, while React 18 manages the component’s declarative SVG output, with hardcoded dimensions and positions defining the layout.

AAbbiefied

Smiley Face III Assignment

This example renders a large smiley face as an SVG using React components for the face, eyes, and pupils, with D3’s `arc` generator defining the cheek curves. The face is centered within a 960×500 canvas, featuring a green-tinted head, red and green pupils, and two rows of white rectangular teeth created with `rect` elements. All visual properties—such as eye radius, tooth dimensions, and stroke widths—are set as constants, and the layout relies on explicit `translate` transformations to position each part relative to the center. The code combines React’s declarative JSX with D3’s utility functions for shape generation.

MMohamed Nehad Shalabi

Smiley Face

A yellow smiley face rendered as an SVG in React, with circular eyes and a curved mouth drawn using an arc path. The code imports the `arc` function from d3 and defines the face geometry with fixed dimensions, including a stroked outer circle and offset eye circles. The React component returns the SVG, and the rendering is handled by d3.v7 within a React 16.7 application.

FForrest Hosten

PPedro Edyvan Hernández García

Smiley face with React

A yellow smiley face rendered in SVG via React uses D3's `arc` generator to create the mouth path. The face, eyes, and mouth are drawn as circle and path elements within a translated group, with the arc’s inner and outer radii and angles fixed. React 17 manages the component structure, while D3 v7 provides the geometric calculations. The static composition is centered on a 980 by 500 canvas.