Skip to main content
SimilarExport ZIP
100%

Fork of smiley miana

✓ Published0🌍 Public
Mmarianamartins87
Last edited Mar 17, 2021
Created on Mar 4, 2021
Forked from HTML Starter

A grid of eighteen smiley faces, each rendered as SVG, uses randomized parameters to vary eye size, eye offset, mouth width, and mouth radius. Built with React components in D3 v6, the visualization employs `d3.arc` to generate mouth paths and `d3.range` to create the array of faces. Each face receives its own random values per render, resulting in a playful, non-interactive composition of distinct expressions.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley Face Part V

A grid of 18 randomly generated smiley faces is rendered with React and D3, each face varying in eye position, radius, mouth size, and stroke width. The visualization demonstrates splitting React components into separate ES6 modules, using fragments for the eyes, and leveraging D3’s `arc` generator to create the mouth path. Each face is drawn as an SVG within a shared container, with randomized parameters computed via `Math.random()` and `d3.range`.

Aantanta28
93% match
Loading thumbnail…

Fork of Smiley Faces Parte VI

A grid of eighteen randomly generated smiley faces fills the screen, each face differing in eye placement, eye size, mouth radius, and stroke thickness. The visualization uses React components to compose each SVG face, with ReactDOM rendering the array produced by d3.range and Math.random() supplying the variation. D3’s arc generator creates the mouth paths within each rendered SVG.

OOscar Muindi
93% match
Loading thumbnail…

Fork of Smiley Face Part III

A grid of eighteen smiley faces rendered with React and D3 v5 shows a playful variation in facial features. Each face, composed of SVG circles and a D3 arc path for the mouth, uses randomized eye radius, mouth width, and mouth radius values to create unique expressions within a fixed layout. The React components structure the SVG, while D3’s `arc()` API generates the mouth shape.

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

Fork of Smiley face part VI

A grid of eighteen randomly generated smiley faces fills the screen, each with unique eye positions, radii, and mouth thickness. The faces are composed of SVG circles and paths built with React components, while the mouth uses the d3.arc() function to create a curved shape. Visual variation comes from the d3.range() function iterating to produce the grid, with each face receiving random property values. The rendering relies on ReactDOM to mount the components into an SVG container.

HHollyClarke19
92% match
Loading thumbnail…

Fork of Smiley Face Part V

A grid of eighteen smiley faces, each with randomly varied stroke width, eye offset, eye radius, and mouth dimensions, is rendered in SVG. The faces are drawn using D3’s arc generator for the mouth and React with ES6 modules, with each face composed from separate component files. The random parameters are generated inline using Math.random, and the layout is produced by mapping over a D3 range sequence.

Ssmsk2980
92% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Smiley face part VI

A grid of 18 randomized smiley faces renders with React components, each face varying in stroke width, eye offset, eye radius, mouth width, and mouth radius. The faces are drawn as SVG circles and arcs, using D3’s `arc()` generator for the mouth paths and `range()` from D3 to create the array of faces. Each face is composed of separate React components like `BackgroundCircle`, `Eyes`, and `Mouth`, assembled within an SVG container that centers coordinates. The visualization demonstrates how parametric variations of simple geometric shapes produce diverse facial expressions.

NNordes Ménard-Lamarre
92% match