Skip to main content
SimilarExport ZIP
100%

Fork of Smiley Face w/ React

✓ Published0🌍 Public
SSatyam Sundaram
Last edited May 12, 2021
Created on May 12, 2021

This React-based visualization displays an array of randomized smiley faces, generated using SVG primitives and D3.js. Each face consists of a yellow circle, two eyes with white highlights, a mouth arc created with D3's `arc()` generator, and a pair of white rectangles for teeth, all uniquely parameterized by random values for size and position. The gallery showcases React components composing individual SVG elements, with the `Emoji` component importing sub-parts like `Face`, `Eye`, `Mouth`, and `Teeth`, while rendering 18 instances via a `range()` map.

AI-generated description

smiley face and eyes with React.

MIT Licensed

Similar vizzes

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

Fork of Smiley Face Part VI

This visualization shows a grid of eighteen procedurally generated smiley faces arranged in six columns and three rows. Each face is drawn as yellow SVG circles with black outlines, featuring randomized eye positions, eye radii, mouth sizes, and stroke widths. The example demonstrates how React components like `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` compose reusable elements, while D3’s `range` and `arc` APIs generate the face data and the smile-shaped mouth path. All rendering is done in SVG through a React-DOM container, with parameters derived from `Math.random()` at runtime.

Ssmeiyin
94% match
Loading thumbnail…

Fork of Smiley Face Part II

The visualization is a grid of 18 smiley faces, each rendered with a yellow circular background, two black eyes, and a curved mouth. Each face is a self-contained React component that composes smaller React components for the background, eyes, and mouth. The code uses the D3.js `arc` API to generate the mouth shape and React to build the SVG structure. The faces vary randomly in eye size, creating a subtle field of similar but slightly different expressions.

FFlorian Maas
94% 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
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 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
94% match
Loading thumbnail…

Fork of Smiley

This gallery example renders a grid of eighteen randomly parameterized smiling faces. Each face is built from React components that compose an SVG scene, with a yellow background circle, black eyes, and an arc-based mouth. The mouth shape uses the d3 `arc()` generator with randomized inner and outer radii and a fixed angular span. React’s `range()` from d3 generates the array that maps to each face, with random offsets for eye position and mouth width controlling individual variations.

WWaqSid99
94% match