Skip to main content
SimilarExport ZIP
100%

Fork of Smiley Face Part II

✓ Published2🌍 Public
MMohammed Banani | MbDev
Last edited May 3, 2022
Created on May 3, 2022

Nineteen SVG smiley faces display in a grid, each with a randomly generated pastel background, offset eye positions, and a mouth drawn as a D3 arc path. The React components `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` compose the structure, while `d3.range` generates the count of faces and `d3.arc` creates the curved mouth geometry. Each face’s fill color results from a random hexadecimal value computed in the component code.

AI-generated description

Smiley face implementation with React + D3.

MIT Licensed

Similar vizzes

Loading thumbnail…

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
96% match
Loading thumbnail…

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
96% match
Loading thumbnail…

Fork of Smiley Face Part II new

A grid of eighteen randomly generated smiley faces appears, each rendered with distinct proportions and stroke weights. The faces are built using React components that compose SVG circles for the background and eyes, and a D3-generated arc path for the mouth. The `d3.arc` API creates the curved mouth shape, while the `d3.range` function generates the count of faces. Each face positions its eyes and mouth at randomized offsets and radii, producing a varied, playful collection.

Ssxtnxy
95% match
Loading thumbnail…

Fork of Smiley face part VI

A grid of eighteen cartoon smiley faces scrolls vertically, each rendered with randomized facial features. The example demonstrates reusable React components—`FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`—composed to build the SVG output. The `Mouth` component uses D3’s `arc` generator to create a smile path, while `index.js` generates the array of faces using `d3.range`, applying random values for stroke width, eye offsets, and mouth dimensions.

11tang
95% match
Loading thumbnail…

Fork of Smiley Face Part II

A grid of fifteen randomly generated smiley faces renders as a React component tree, with each face composed of SVG circles and a D3 arc path for the mouth. The `Face` component composes `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents within a `FaceContainer` that applies a translation transform. D3’s `range` generates the array for the map, while `Math.random` varies eye offset, eye radius, mouth width, and mouth radius per face, producing subtle differences across the repeating pattern.

Bblueyjuice
95% match
Loading thumbnail…

Fork of Smiley Face Part II

A grid of small, randomized smiley faces is rendered as SVGs using React components. Each face is composed of separate React components for the yellow background circle, eyes, and a mouth drawn with a d3.arc path. The `d3.range` function generates 18 instances, each with randomized stroke widths, eye offsets and radii, and mouth dimensions, producing a playful array of varied expressions.

Nnayak-sarvesh12
95% match
Loading thumbnail…

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
95% match
Loading thumbnail…

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
95% match