Fork of Smiley Face Part II

Fork of Smiley Face Part II

A grid of eighteen randomly generated smiley faces is rendered with React and D3 v7, each face varying in eye offset, radius, stroke width, and mouth curvature. The code builds faces from reusable components—BackgroundCircle, Eyes, Mouth, and FaceContainer—which compose SVG circles and an arc path. The Mouth component uses `d3.arc()` with randomized inner and outer radii and a fixed angular range, while the face positions and sizes are defined by `d3.range()` and `Math.random()`.

Jjuanmy400

Fork of Smiley Face Part VI

A grid of 18 randomized smiley faces uses React components and D3's arc generator to render each face’s mouth. The `Face` component assembles `BackgroundCircle`, `Eyes`, and `Mouth` within an SVG group, with random values for stroke width, eye offset, eye radius, mouth width, and mouth radius. D3’s `range` and `Math.random` generate the grid, while React’s component structure and ES6 modules organize the reusable face elements.

JJuan de Dios Ruiz

Fork of Smiley Face Part II

A grid of 18 randomly generated smiley faces is rendered with React and D3. Each face is composed of SVG circles and an arc-based mouth, with varying eye positions, radii, and mouth widths/curvatures per face. The D3 `arc` generator creates the mouth paths, while React components like `BackgroundCircle`, `Eyes`, and `Mouth` assemble each face within a translated SVG group.

Ggragors123@gmail.com

Fork of Smiley Face Part IV

A grid of randomized smiley faces is rendered as React components, each face generated with slightly different eye positions, mouth curvature, and stroke thickness using D3's `arc` generator for the mouth path. The `Face` component composes `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents, all rendered as SVG elements via React's JSX. D3's `range` function creates eighteen faces, and `Math.random` varies each face's visual properties, while the overall layout is fixed rather than data-driven.

Aazharahmad0

Fork of Smiley Face Part VI

A grid of eighteen randomly generated smiley faces demonstrates a modular React component architecture. Each face uses D3’s `arc` generator to draw the mouth, while SVG circles form the eyes and background. The `Face`, `Eyes`, `Mouth`, and `BackgroundCircle` components accept randomized properties like stroke width, eye radius, and mouth dimensions, which vary per instance. React renders the SVG elements through a `FaceContainer`, and the `range` function from D3 generates the array of faces.

Ccynobill

Fork of Smiley Face Part Iv

A grid of eighteen smiley faces is rendered, each with randomized eye radii while sharing identical positioning, stroke, and mouth parameters. The example demonstrates component composition in React, where `Face`, `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer` are assembled as reusable JSX components. D3’s `arc` generator creates the mouth path, while ReactDOM renders the SVG elements. Data originates from a `range(18)` array, and each face is generated with a `Math.random()` call for the eye size, producing subtle visual variation across the uniform grid.

Aadamacass

Fork of Smiley Face Part II

A grid of fifty randomly generated smiley faces rendered with React components and SVG. Each face uses the `d3.arc()` API to create its mouth, while the background circle, eyes, and mouth are composed from reusable React components (`BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`). The faces vary randomly in eye radius via `Math.random()`, producing subtle visual differences across the grid. The SVG viewport is fixed at 100 by 100 pixels per face, with the entire layout generated programmatically using D3's `range()` function.

Ssteelerfan107

Fork of Smiley Face Pt. II

A grid of randomly generated yellow smiley faces appears, each rendered as an SVG component, showing variation in eye size, eye offset, mouth radius, and stroke width. Built with React and D3, the `Face` component composes smaller components like `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth using D3’s `arc` generator to create a half-circle path. The `index.js` file maps over an array of 18 faces, applying randomized parameters to each instance.

TTanmay Bishnoi