Skip to main content
SimilarExport ZIP
100%

Smiley Face | Tweak your face | Yee Han

✓ Published1🌍 Public
YYee Han
Last edited Jan 30, 2021
Created on Dec 21, 2020
Forked from Hello HTML

Six randomized smiley faces render in an SVG canvas with React, each composed of nested components for the face, eyes, and mouth. The face uses a colored circle with fixed stroke width, while the mouth is drawn with d3’s `arc` generator using randomized radii. Eyes are positioned via offset coordinates and randomized eye radius. All faces share the same center point, creating overlapping circles with varied fills and mouth widths, demonstrating reusable component composition and d3 arc creation within a React rendering pipeline.

AI-generated description

Half way towards a smiley face | Yee Han

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part IV - VI | Yee Han

A grid of randomly generated smiley faces demonstrates how React components and D3 utilities can be composed for data-driven SVG rendering. Each face is a distinct combination of prop values—stroke width, eye offset and radius, and mouth width and radius—drawn using React functional components with JSX. The code uses `d3.arc` to generate the mouth path, while `d3.range` creates the 18 faces. The faces are rendered inside an SVG container via a `FaceContainer` component that applies a translation transform, showing the interplay between React’s declarative structure and D3’s geometric functions.

YYee Han
92% match
Loading thumbnail…

Smiley Face Part VI

A grid of randomly generated smiley faces renders in SVG using React components and D3. Each face varies in stroke width, eye size and position, and mouth dimensions, created through reusable React components like BackgroundCircle, Eyes, and Mouth. The Mouth component uses d3.arc to draw a smile path with configurable inner and outer radii. The App maps over a range of 18 indexes, generating each face with random property values.

CCurran Kelleher
92% match
Loading thumbnail…

Smiley Face Part VI

A grid of randomly generated smiley faces uses React components to compose SVG circles and arcs, with D3’s `arc` generator shaping each mouth. The `Face`, `Eyes`, `Mouth`, and `BackgroundCircle` modules accept randomized props for stroke width, eye offset, and mouth radius, producing varied expressions. Each face is rendered in its own SVG via `FaceContainer`, and D3’s `range` creates 18 faces. The code takes full advantage of React’s component model and ES6 modules.

Bbakstorage00001
92% match
Loading thumbnail…

Smiley Face Part 1

A grid of eighteen randomized smiley faces is rendered as SVG in React, each face composed of a yellow circle, two black eyes, and an arc-shaped mouth. The code uses React components like `Face`, `BackgroundCircle`, `Eyes`, and `Mouth`, with `FaceContainer` providing an SVG group. D3’s `arc` generator builds the mouth path, while `range` from D3 creates the array of faces. Random values for stroke width, eye offsets, eye radius, and mouth dimensions generate visual variation across the grid.

AALI Akbar SABZI
91% match
Loading thumbnail…

Smiley Face Part VI

Eighteen randomly generated smiley faces are arranged in a grid, each with varied stroke widths, eye offsets, eye radii, and mouth dimensions. The visualization demonstrates a modular React component architecture, using ES6 modules to compose a face from separate `BackgroundCircle`, `Eyes`, and `Mouth` components. The mouth is drawn using `d3.arc`, while `d3.range` generates the array of faces, all rendered as SVG within a React container.

SSunny
91% match
Loading thumbnail…

Smile Face with React and ES6

Eight randomly generated smiley faces render in a grid using React components and SVG. Each face, composed of a yellow background circle, black eyes, and a D3-generated arc mouth, receives randomized eye radius and mouth width values via JavaScript’s `Math.random`. The code imports React and ReactDOM for component rendering, and D3’s `arc` and `range` utilities to construct the mouth path and iterate over eight faces. A `FaceContainer` component manages SVG dimensions and centering transformations.

Ttenghaoman
91% match
Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces renders in React, each with randomized eye positions, eye radii, mouth widths, and stroke thicknesses. The faces are generated using D3 v7’s `arc()` generator for the mouth and SVG circles for the eyes and background. All components are React function components, with the overall layout using D3’s `range()` to create the array of faces. The SVG output is centered via a translation group.

DDrew Dudley
91% match
Loading thumbnail…

Smiley face with react comp part 6

A grid of 18 randomly generated smiley faces is rendered as SVG using React components. Each face reuses the same modular structure—BackgroundCircle, Eyes, Mouth, and FaceContainer—to assemble a yellow circle with eyes and an arc-based mouth, while randomized stroke widths, eye radii, mouth widths, and mouth radii create subtle variation across the grid. The faces are positioned with the d3.range function to generate the array count, and the mouth path is drawn using the d3.arc API with a half-circle angular range.

Ssurikmeetr
91% match