Fork of Smiley

100%

Fork of Smiley

✓ Published0🌍 Public

Last edited Nov 3, 2022

Created on Nov 3, 2022

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.

AI-generated description

Half way toward the smiley face

MIT Licensed

Similar vizzes

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

95% match

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

95% match

Loading thumbnail…

Fork of Smiley Face Part I

A grid of eighteen randomly generated smiley faces fills the viewport, each rendered as yellow circles with black strokes, eyes, and a curved mouth. The faces vary in stroke width, eye placement, eye radius, and mouth dimensions due to randomized prop values passed to the `Face` component. Built with React and SVG, the visualization uses reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth path created using `d3.arc` from d3.v7.

MMoise

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

94% match

Loading thumbnail…

Fork of Smiley face part 1

A grid of eighteen smiley faces, each rendered as an SVG circle with eyes, a nose, and an arc-shaped mouth. The code uses React components to compose the face parts and D3's `arc` generator to draw the mouth path. Random values for eye offset, eye radius, and mouth dimensions create slight variations between faces, while all share a fixed background circle, stroke width, and color scheme. The faces are generated via `range` and mapped in the App component.

Kkatebacon32

94% match

Loading thumbnail…

Fork of Smiley Face Part V

A grid of eighteen smiley faces, each rendered as a separate React component, shows randomized eye radii and mouth sizes. The faces are composed of SVG circles and an arc-generated mouth path, with the `d3.arc` API computing the curved mouth shape. Each face uses React fragments to group its eyes, and the entire grid is generated by mapping over an array from `d3.range` within a React application.

JJasmine Ye Han

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

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

94% match