FCC-Course-Smiley

100%

FCC-Course-Smiley

✓ Published1🌍 Public

Last edited Feb 6, 2022

Created on Feb 5, 2022

A grid of fifteen smiley faces, each uniquely styled, fills the screen. The faces are composed of SVG circles, with features like eyes, cheeks, and hair rendered through varied stroke dash arrays and offsets. Built with React, the app maps over a d3.range array to render each Face component, and uses d3.arc to draw the mouth. Randomized eye radii ensure each face has a distinct appearance.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

FCC: Smiley w/ React components

A grid of eighteen randomly generated smiley faces, each built from React components and rendered as SVG, demonstrates how to compose and reuse visual elements programmatically. The `Face` component assembles a yellow `BackgroundCircle`, two `Eyes` circles, and a `Mouth` path created with the `d3.arc()` API for a curved smile. Each face’s dimensions—stroke width, eye offset and radius, and mouth properties—are randomized via `Math.random()` within the `App` component, producing unique variations across the grid while maintaining consistent facial structure. The example uses React’s `StrictMode` and `ReactDOM.render` to manage the SVG output, with D3 v6 providing the arc geometry for the mouth.

AAnup Mantri

91% match

Loading thumbnail…

Smiley Face

A grid of 18 randomly generated smiley faces is rendered as React components, each with slightly varied eye positions, mouth size, and stroke width. The faces are drawn using SVG circles and an arc path, with the mouth path computed via d3’s `arc` generator. The `FaceContainer` translates the SVG group to the center of each 160x160 viewport, and the code uses React 18 and d3.v7 to map over a range of indices, producing the array of faces.

Eeco2nomy

90% match

Loading thumbnail…

Smiley Face

A grid of 16 identical smiley faces renders across the screen, each composed of SVG circles for the yellow background and black eyes, plus an arc-generated mouth. The code uses React components to structure the face, with D3’s `arc` API shaping the mouth path. A CSV fetch attempts to load named CSS colors, though the result is only logged. The faces are positioned via SVG translation, with each face sized at 166 by 166 pixels.

Ww.fukuyama@gmail.com

90% match

Loading thumbnail…

Smiley Face

A grid of randomized smiley faces fills the screen, each face built from a yellow circle, two eyes, and a curved mouth. The React components render SVG elements, while the d3 `arc` generator creates the mouth path. The `range` function from d3 generates the face count, and each face receives random properties for stroke width, eye offset, eye radius, and mouth dimensions.

CCarlos

90% match

Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces renders in React, each with randomized eye positions, eye radii, mouth widths, and stroke thicknesses. The faces are generated using D3 v7’s `arc()` generator for the mouth and SVG circles for the eyes and background. All components are React function components, with the overall layout using D3’s `range()` to create the array of faces. The SVG output is centered via a translation group.

DDrew Dudley

89% match

Loading thumbnail…

Smiley Face 1

A grid of eighteen randomly generated smiley faces fills the viewport, each face rendered through React components that assemble SVG circles for the head and eyes and a D3 arc path for the mouth. The `d3.arc()` API generates the mouth shape, while `Math.random()` varies each face’s stroke width, eye offset and radius, and mouth dimensions, resulting in a playful, diverse array of expressions. The SVG is composed in `FaceContainer`, which centers all elements via a translation group.

Kkizley

89% match

Loading thumbnail…

Smiley Face

A grid of 18 smiley faces renders in React with SVG, each face generated with randomized eye offsets, eye radii, and mouth dimensions. The face components compose reusable subcomponents—BackgroundCircle, Eyes, Mouth, and FaceContainer—to build the layered SVG structure. D3's arc generator creates the curved mouth path, while the spread of faces shows how varying parameters produce distinct expressions. The rendering uses ReactDOM to mount the app and d3.range to generate the face array.

JJBayne07

89% match

Loading thumbnail…

smiley face

A grid of randomly generated smiley faces fills the screen, each rendered as a yellow circle with black strokes, two eyes, and a curved mouth. The code creates 18 variations using React components and D3's `arc` generator for the mouth paths, with randomized dimensions for stroke width, eye position, eye radius, and mouth parameters. The SVG faces are generated in a React app from the `range` utility in D3, with each face re-rendered with different random values.

Kknpoblete

89% match