Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Fork of Fork of Smiley Face Part 6

✓ Published0🌍 Public
Ssukram3000
Last edited Mar 29, 2023
Created on Mar 29, 2023

A grid of 100 identical yellow smiley faces fills the viewport, each rendered as a small SVG via React components. The code draws a yellow circle with a black stroke, two black eyes, and an arc-based mouth using `d3.arc`. Each face is positioned by a `FaceContainer` that translates the SVG group to the center of a 100 by 100 viewBox. The React app maps over `range(100)` from d3 to create the repeating layout, with all styling and geometry hard-coded.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Smiley face Part 1 - Done

A grid of six-by-three identical smiley faces, each rendered as a small yellow circle with two eyes and a curved mouth, fills the screen. The visualization shows how React components compose reusable SVG shapes, with each face built from `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents. The code imports `arc` from d3.v7 to generate the mouth path, while `range` from d3 creates the array of faces. Rendering uses React 18 with SVG, and each face's eye radius is randomized, producing subtle variation across the repeated pattern.

Ppuru001
94% match
Loading thumbnail…

Fork of Smiley Face Part IV

A grid of fifty identical yellow smiley faces renders in SVG, each face built from React components that compose a circular background, two eyes, and a curved mouth. The visualization uses D3's `arc` generator to construct the mouth path, while React manages the component hierarchy through props for positioning and sizing. D3's `range` utility generates the array of faces mapped into the React application, showing how D3 and React can work together to create repetitive generative art.

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

Fork of Smily face pt2

A grid of identical yellow smiley faces renders as SVG through React. Each face is composed of separate components for the head, eyes, nose, and mouth, with the mouth drawn using a d3.arc path. The code uses React and d3.v6, mapping over an array created by d3.range to generate repeated Face elements. The rendering relies on an SVG container that translates each face to the center, with randomized eye radii producing subtle variations across the grid.

RRohinton Kazak
93% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Let's Make a Face Part VI

A grid of small, yellow smiley faces, each with a randomly sized pair of eyes, is rendered in an SVG canvas. The faces are generated by mapping over an array of six multiplied by three, creating eighteen face instances. The visualization employs React components, including a `Face`, `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth drawn using d3’s `arc` function. The code relies on both React and D3 v7, using the `range` function to produce the grid layout.

Zzhangwbhi
93% match
Loading thumbnail…

Fork of Smiley Face Part V

This example renders a grid of identical smiley faces, each composed of a yellow circle with black stroke, two eyes, and a mouth drawn using an SVG path. The faces are generated by mapping over a range of numbers, with each face created through modular React components that accept props for positioning and sizing. The code uses React fragments, the D3 arc generator to compute the mouth shape, and ES6 module imports to split components across files, with the final SVG output handled by a central container component.

DDanielMa
93% 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
92% 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
92% match