Fork of Smiley Face

100%

Fork of Smiley Face

✓ Published0🌍 Public

Last edited Jun 19, 2021

Created on Jun 12, 2021

A grid of React-rendered smiley faces fills the viewport, each face randomly varied in stroke width, eye placement, eye radius, and mouth curvature. The code composes reusable SVG components (`FaceContainer`, `BackgroundCircle`, `Eyes`, `Mouth`) and uses `d3.arc` to define the mouth path. Each face is independently generated using `Math.random` within `d3.range`, yielding a playful, non-identical set of expressions.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Smiley Face Part VI

A grid of randomly generated smiley faces fills the viewport, each face varying in stroke width, eye position, eye radius, mouth width, and mouth radius. The visualization uses React components to compose the face from separate `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` elements, with the `Mouth` built using `d3.arc()`. Each face is rendered as an SVG via a `FaceContainer`, and the grid is created by mapping over an array from `d3.range()`.

Wworkrit

96% match

Loading thumbnail…

Fork of Smiley Face Part V

A grid of smiling faces fills the screen, each with randomized eye size, eye spacing, and mouth radius. The visualization demonstrates modular React component composition, splitting the face into separate `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer` files using ES6 modules. It renders SVG via React and uses D3’s `arc` generator for the mouth path. Each face applies slight random variation to its features, creating a playful, varied array.

SSven

96% match

Loading thumbnail…

Fork of Smiley Face

A grid of randomly generated smiley faces fills the screen, each face varying in stroke width, eye placement, eye radius, mouth width, and mouth radius. Built with React and D3 v7, each face is composed of SVG circles for the background and eyes, while the mouth uses D3’s `arc` generator to create a curved path. The faces are rendered through reusable React components (`BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`) and positioned via a central `<g>` transform, with parameters passed as props for each instance.

SShubham Pathak

96% match

Loading thumbnail…

Fork of Smiley Face final

A grid of eighteen randomly generated smiley faces, each rendered as an SVG with a yellow circular background, black eyes, and an arc-shaped mouth. The React components (`Face`, `BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`) compose the visualization, while d3’s `range` and `arc` APIs generate the layout and mouth path. Random `Math.random` values vary stroke width, eye placement, and mouth dimensions per face.

GGimmi45

96% match

Loading thumbnail…

Fork of Fork of Smiley Face Part 5

A grid of 18 randomly generated smiley faces fills the viewport, each rendered as a scalable vector graphic with a light blue background circle, black-outlined eyes, and a mouth shaped by an arc generator. The code builds each face from reusable React components, including `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`, and uses D3's `arc` API to compute the mouth path. Each face randomizes its eye radius and fill color using `Math.random` within the `App` component, while all faces share fixed dimensions and offsets.

MMohammed Banani | MbDev

96% match

Loading thumbnail…

Fork of Smiley Face Part V

A grid of procedurally generated smiley faces, each with randomized stroke width, eye offset, eye radius, and mouth dimensions, renders inside a React app. The code separates components into ES6 modules, including a reusable `Face` composed of `BackgroundCircle`, `Eyes`, and `Mouth`. D3’s `arc` API defines the mouth’s path, while the `range` function generates the array of faces. The SVG output is nested within a shared `FaceContainer`, demonstrating modular React composition with fragments and props.

FFloorNummer

96% match

Loading thumbnail…

Fork of Fork of Smiley Face PT 2

This visualization displays a grid of randomly generated smiley faces rendered as SVG elements in React. Each face uses D3’s `arc` API to draw a mouth, with variations in stroke width, eye position, eye radius, and mouth dimensions produced by successive calls to `Math.random`. The `FaceContainer` component sets the SVG coordinate system, while the `BackgroundCircle`, `Eyes`, and `Mouth` components are composed per instance. React renders each face independently, creating a mosaic of slightly different expressions.

Ccajunatr

95% match

Loading thumbnail…

Fork of Smiley Face Part III

A grid of eighteen smiley faces, each with randomized facial features, fills the view. Built with React and D3 v5, the example composes SVG circles for the face and eyes, while the mouth uses an `arc` generator to create a path. Each face is rendered via the `Face` component, which applies random values for stroke width, eye offsets, radii, and mouth dimensions, producing a playful collection of variations.

Bbhavani44

95% match