Skip to main content
SimilarExport ZIP
100%

Smilepage saved

✓ Published1🌍 Public
SStefan Apostol
Last edited Dec 18, 2022
Created on Dec 18, 2022
Forked from Hello VizHub

A grid of sixteen identical smiling yellow faces, rendered as circles with black outlines, eyes, and an arc-shaped mouth, repeats across the screen. Built with React components and D3’s `d3.arc` for the mouth path, the faces are generated using `range` and mapped into SVG elements via `FaceContainer`.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smile face

A grid of eighteen smiling faces, each rendered as a yellow circle with black stroke, eyes, and a curved mouth, appears on a plain background. The faces vary slightly in stroke width and eye radius due to random values. Built with React components, the visualization uses D3’s `arc` generator to create the mouth path and `range` to generate the face count, all drawn as SVG elements.

AAkram Gassem
90% match
Loading thumbnail…

Smiley Face

A grid of 16 identical smiley faces renders across the screen, each composed of SVG circles for the yellow background and black eyes, plus an arc-generated mouth. The code uses React components to structure the face, with D3’s `arc` API shaping the mouth path. A CSV fetch attempts to load named CSS colors, though the result is only logged. The faces are positioned via SVG translation, with each face sized at 166 by 166 pixels.

Ww.fukuyama@gmail.com
90% match
Loading thumbnail…

Smiley face part 1

A grid of 24 smiley faces, each rendered with a yellow circular background, black-outlined stroke, two eyes, and an arc-shaped mouth. The faces are generated by mapping over an array from the `d3.range` function, with random eye radii producing slight variations. Built with React components and D3’s `arc` generator, the SVG is transformed with a 30-degree rotation in `FaceContainer`, using `d3.v6` and React 17.

MMarcin Stepniak
89% match
Loading thumbnail…

Smile face

A grid of 18 identical smiley faces is rendered, each composed of a yellow circle with a black outline, two black eyes, and a curved mouth formed by a D3 arc path. The faces are generated procedurally using React components that compose the visual elements. The SVG output is centered within a fixed 160 by 160 pixel canvas, and the code leverages the D3 library’s `arc` function to create the mouth path and a `range` function to generate the array of repeated faces.

Jjay-chitsakdanon
89% match
Loading thumbnail…

Smile Face Part Three

A grid of eighteen smiling faces fills the screen, each rendered as a yellow SVG circle with black strokes, two eyes, and an arc-shaped mouth. The faces vary slightly in stroke width, eye position and radius, and mouth dimensions due to random values. Built with React and D3 v5, the example uses the `arc()` generator from D3 to create mouth paths, while reusable React components manage the face, eyes, background, and SVG container.

RRichard Burd
89% match
Loading thumbnail…

Smiley Face

A grid of fifteen yellow smiley faces, rendered with React and SVG, uses the D3 arc API to draw each mouth. The faces are generated from a single `Face` component, which composes separate `BackgroundCircle`, `Eyes`, and `Mouth` components. Each face is identically parameterized with fixed offsets and radii, and the array from D3's `range` function replicates the component across the canvas. The SVG output is translated to center each face, using D3's `arc` for the mouth path.

Sstackedchips
89% match
Loading thumbnail…

Smile Part I

A grid of sixteen identical smiley faces, each rendered as a yellow circle with white eyes, black pupils, and a curved mouth, forms a playful pattern. The code builds each face using React components and SVG primitives, with the `arc()` generator from D3 to draw the mouth path. Randomized eye and mouth dimensions slightly vary each face, while the `FaceContainer` component translates the drawing to the center of its viewport.

LLisa Wagner
89% match
Loading thumbnail…

Smile 1

A grid of 18 smiley faces, each rendered as a yellow circle with black strokes, eyes, and an arc-based mouth. The faces vary randomly in eye radius due to `Math.random()`, creating subtle differences across the repeated components. Built with React and D3 v7, the visualization uses reusable components like `Face`, `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth path generated by `d3.arc()`. Each face is drawn into an SVG via a `FaceContainer` that centers a `<g>` element using a transform.

KKIRRAN P L
89% match