Skip to main content
SimilarExport ZIP
100%

Smiley Face (Part 2) - Assignment -> React.js

✓ Published0🌍 Public
NNoor M
Last edited Feb 8, 2020
Created on Feb 8, 2020

A yellow smiley face with black outlines is rendered as an SVG graphic, centered in a 960x500 viewport. The face consists of three circles: a large head and two smaller eyes, all positioned using fixed pixel coordinates. The example demonstrates declarative SVG drawing in React.js, where geometric properties like coordinates, radii, and stroke widths are passed as JSX attributes. The code uses React 16.7 and ReactDOM to mount the component, with no interaction or animation, serving as a static visualization of basic shape composition.

AI-generated description

Smiley Face - Part 2- ReactJS Authored by : Noor

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face (Part 3) - Assignment -> D3.js

This example shows a yellow smiley face drawn with SVG primitives: a yellow circle for the head, black circles for the eyes and pupils, and a red arc for the mouth. Rendered with React, it uses D3.js’s `arc` generator to construct the mouth path, specifying inner and outer radii, a corner radius, and angular start and end points. The face is centered within a 960×500 SVG viewport using explicit pixel offsets for the eyes and mouth. The code sets stroke widths in pixels but does not animate or respond to interaction.

NNoor M
93% match
Loading thumbnail…

Smiley Face (Part 4) - Assignment -> React Components

This example shows a yellow smiley face rendered as an SVG using React components, with each facial feature—background circle, eyes, mouth, and teeth—defined as reusable functional components. The mouth is drawn with a D3 arc generator configured with custom inner and outer radii, angles, corner radius, and padding. D3 v5 and React 16.7 are loaded via CDN, and ReactDOM renders the composed `<App />` component into a root div. The face includes two dark pupils, a red outlined mouth, and four white rectangular teeth positioned at varying offsets.

RRussell Watson
93% match
Loading thumbnail…

Smiley Face Part 2

This example renders a simple yellow smiley face using two static black circles for eyes and a larger yellow circle for the head, all drawn as SVG elements with explicit coordinates and stroke styling. The React setup loads ReactDOM from a CDN, though the visualization itself relies solely on raw SVG markup rather than React components or data-binding logic. The face is centered in a 960 by 500 viewport, with each element’s position hardcoded in the JSX-like syntax. No animations, interactions, or external data sources are involved.

Cconorflood96
93% match
Loading thumbnail…

Smiley Face Part I

This example uses React and D3 to render a simple SVG smiley face. The React component computes coordinates for a yellow circle face, two black eyes, and a mouth using constant variables for width, height, and offsets. The SVG output is drawn with a yellow fill, black stroke, and a fixed stroke width. The code uses the ReactDOM `render` method to mount the component into the HTML root element, with D3 loaded but not directly used in the visible logic.

CCaptKathure
93% match
Loading thumbnail…

Smiley Face Part 2

A yellow smiley face is drawn with React and rendered as SVG. It shows a large yellow circle with a black outline, plus two smaller black circles for eyes, all centered on a 960 by 500 canvas. The React code defines these shapes using JSX and constant variables for positioning and sizing. The face is rendered into a root div using ReactDOM.render, with the SVG elements directly described in the component.

AAman Singh
93% match
Loading thumbnail…

Smiley Face Part 1

A React-rendered SVG smiley face displays a yellow circle with a black outline, two black eyes, and a curved mouth. The layout centers the face in a 960 by 500 pixel viewport, using fixed offsets for eye placement and an arc generator from d3.v7 to shape the smile. The code relies on React 18 and D3’s `arc()` API, with all positions computed as constants before rendering. The face is drawn entirely from primitive SVG shapes, with no external data source, and the mouth’s stroke width and radius are defined numerically.

Jjoneftali
93% match
Loading thumbnail…

Smiley Face Part II

This example shows a static yellow smiley face with two black eyes and a curved mouth, rendered as an SVG graphic. The face is built by drawing a large yellow circle with a black stroke, two smaller circles for the eyes, and an arc for the smile, all positioned within a 960×500 viewport. The code combines React for the user interface component structure and D3 v5 for SVG element creation, using basic circle and path SVG primitives. The project loads React 16.9, ReactDOM, and D3 5.11 via CDN, with the face geometry defined manually in JavaScript rather than derived from data.

KKarenNg
93% match
Loading thumbnail…

Smiley Face Part-3 (Assignment)

This example shows a yellow smiley face drawn with SVG shapes, including two eyes and an arc-shaped mouth, all centered within a fixed 960×500 viewport. The face is built using React for component rendering and D3’s `arc` helper from the `d3-shape` package to generate the mouth’s path. Circle elements handle the head and eyes, while a group element with a `transform` attribute positions everything at the center. The mouth’s inner and outer radii, along with start and end angles, are configured through method chaining on the `arc` constructor.

IIlgar Akalın
92% match