Fork of Smiley Face

100%

Fork of Smiley Face

✓ Published0🌍 Public

Last edited Nov 30, 2021

Created on Nov 30, 2021

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley Face

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.

Ttotallynormalpeep

96% match

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of randomly generated smiley faces fills the screen, each face varying in stroke width, eye position and size, and mouth radius. Built with React components and D3, the example uses a modular structure where `FaceContainer` renders the SVG, while `BackgroundCircle`, `Eyes`, and `Mouth` define reusable parts. D3’s `arc` generator creates the mouth path, and the `range` function from D3 generates the 18-face array.

JJosipa Puljko

95% match

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

95% match

Loading thumbnail…

Fork of Smiley face part 1

A grid of eighteen cartoon smiley faces, each with randomized facial features, renders in React using SVG elements composed from modular components. The visualization demonstrates reusable component architecture by composing `BackgroundCircle`, `Eyes`, and `Mouth` within a `FaceContainer` that handles centering via a translated `<g>` element. The `Mouth` component uses a d3 `arc()` generator with specified start and end angles to create a smile, while `range` from d3 generates the repeated faces. Each face varies randomly in stroke width, eye offset, eye radius, and mouth width, producing a playful, generative pattern.

Ddjfeld01

95% match

Loading thumbnail…

Fork of Smiley

A grid of fifteen small smiley faces, each with randomly generated eye and mouth sizes, fills the screen. The faces are rendered as SVG circles with yellow backgrounds and black outlines, composed through reusable React components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`. The `Mouth` component uses `d3.arc` to create a curved path, while the `App` component maps over a `d3.range` array to generate the varied faces.

AAyush Tiwari

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

95% match

Loading thumbnail…

Fork of Smiley Face Part III

This visualization displays a grid of eighteen randomly generated smiley faces, each with slightly varying eye positions, radii, stroke widths, and mouth dimensions. Built with React and D3 v5, the faces are composed from modular components like BackgroundCircle, Eyes, and Mouth, with the mouth drawn using the d3.arc path generator. The code maps over a range array to render each face as an SVG group, using React to orchestrate the reusable face components and D3 for shape generation.

Nnonbots

94% 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

94% match