Fork of Smiley Face Pt. II

100%

Fork of Smiley Face Pt. II

✓ Published0🌍 Public

Last edited Jan 16, 2022

Created on Jan 16, 2022

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

96% match

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of randomly generated smiley faces, each rendered as a standalone SVG component with a yellow circular face, black stroke, two eyes, and an arched mouth. The faces vary in stroke width, eye offset, eye radius, and mouth dimensions, creating a playful, chaotic collection. Built with React components that compose `BackgroundCircle`, `Eyes`, and `Mouth` inside a `FaceContainer`, the example uses D3’s `arc` API to generate the mouth path and `range` to produce 18 faces. Rendering relies on React’s virtual DOM and SVG output.

QQasim Nazir

96% match

Loading thumbnail…

Fork of Fork of Smiley Face Part I

A grid of eighteen yellow smiley faces in a React and SVG composition, each generated with randomized eye sizes using `Math.random()`. The faces are assembled from modular React components—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—that render SVG elements. The mouth uses `d3.arc` to create a half-circle path, while the background circle and eyes are plain SVG circles. Each face is independently styled with fixed dimensions and offsets, producing a uniform yet subtly varied pattern across the display.

Vvigneswaran009

95% match

Loading thumbnail…

Fork of Smiley Face Part III

A grid of randomly generated smiley faces, each rendered as an SVG circle with a yellow fill and black stroke, demonstrates component reuse and procedural variation. The React components compose a background circle, eyes, and a mouth built with D3's `arc` generator. Using `range(6*3)` from D3, the app maps 18 array elements to `Face` components, each with randomized properties like `eyeOffsetX`, `eyeRadius`, and `mouthWidth`. The visualization relies on React 16.9 for DOM management, D3 v5 for shape generation, and SVG rendering within a fixed 160×160 viewport.

Iionut-g

95% match

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of randomized smiley faces renders in SVG via React components, each face built from a yellow circle, two eyes, and a d3.arc-generated mouth path. The faces vary in stroke width, eye offset, eye radius, mouth radius, and mouth width using Math.random() values. A FaceContainer wraps the SVG group with translate transforms, while d3.range generates the 18-face array. D3 v5 and React 16.9 manage the component hierarchy and shape generation.

Kkkw-21

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 V

A grid of eighteen yellow smiley faces is rendered with React and SVG, each face using randomized eye radii while sharing fixed dimensions and offsets. The code splits UI components into separate ES6 modules, including `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`. Each face is built with SVG circles and a d3 arc path for the mouth, composed inside a translated `<g>` element. React fragments group the eyes, and the `range` function from d3 generates the array of face instances.

Wweny1109

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

95% match