CaraLoca

100%

✓ Published0🌍 Public

Last edited Oct 19, 2021

Created on Oct 18, 2021

This gallery example, CaraLoca, shows a grid of eighteen cartoon faces, each with the same yellow circular head, black stroke, and fixed mouth, but with randomly generated eye radii that vary from face to face. The faces are rendered as SVG elements using React components for the face, eyes, mouth, and background circle, with the d3 `arc()` function generating the mouth path. The data is not sourced from an external file; instead, a `range` from d3 creates the array that maps over to produce each face, with each eye’s radius set by `Math.random()`.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 Face

The gallery shows a grid of six by three cartoon faces, each rendered as a yellow circle with black outlines, two eyes, and a smiling mouth. Built with React components that compose SVG shapes, the faces use d3.arc to generate the mouth path and d3.range to create the repeated face instances. Randomization varies eye and mouth sizes and proportions per face, producing a playful mosaic of subtly different expressions while each face maintains consistent positioning within its own viewport.

PPedrinT

82% match

Loading thumbnail…

Hello HTML

The gallery displays a grid of 18 identical, cartoonish yellow faces with black outlines, each generated with randomized facial feature parameters. Built with React and rendered as SVG, the example uses D3’s `arc` generator to construct the mouth shape, while all other components—the background circle, eyes, and face container—are hand-coded React components. Each face’s stroke width, eye offset, eye radius, and mouth dimensions vary randomly, demonstrating how component-based composition with D3 utilities can produce varied visual output.

Cchipbrownlee

82% match

Loading thumbnail…

Hello HTML

This example shows a grid of 18 cartoon faces, each rendered with slightly randomized eye and mouth sizes, creating a playful sense of variety. It uses React components to compose the face from separate SVG shapes: a yellow background circle, two eyes, and an arc-based mouth. The code leverages D3’s `arc` API to generate the mouth path, and React’s `range` utility from D3 to create the array of faces. Rendering is done entirely in SVG within a React application.

MMyGitUserName-dh

81% match

Loading thumbnail…

Untitled

A grid of 18 procedurally generated cartoon faces is displayed, each rendered as an SVG circle with eyes and an arc-shaped mouth. The faces vary randomly in stroke width, eye offset, eye radius, and mouth dimensions, creating a playful sense of variety. The visualization uses React components to structure the face elements, while D3 v7’s `arc()` generator produces the mouth paths. Each face is drawn with a simple `<svg>` and `<g>` transform, with all random parameters generated on every render via `Math.random()` and the `range()` helper from D3.

Jjchen6912

81% match

Loading thumbnail…

Hello HTML

This example displays a grid of 18 randomly generated cartoon faces, each rendered as an SVG with a yellow circular background, two eyes, and a mouth. Built with React, it uses D3’s `arc` API to shape the mouth path and the `range` utility to create the face instances. Each face’s dimensions, stroke widths, and feature offsets vary randomly per render, showcasing reusable component composition. The SVG output is wrapped in a `FaceContainer` that centers the group, while CSS hides page overflow for a clean, full-viewport presentation.

Iiy105121

81% match

Loading thumbnail…

make face... but in HTML!

This gallery example displays a grid of 18 procedurally generated cartoon faces, each rendered as a yellow circle with black outlines, distinct eyes, and a mouth. Each face is an SVG constructed from React components, including `BackgroundCircle`, `Eyes`, `Mouth`, and `Teeth`, which are composed within a parent `Face` component. The visual variation stems from random values applied to parameters like eye offset, size, and mouth radius. The code leverages D3’s `arc` to draw the mouth arc and D3’s `symbol` with `symbolTriangle` to render the teeth, all positioned through SVG transforms.

AAshford

81% match

Loading thumbnail…

Data viz

A grid of 18 randomly generated cartoon faces fills the SVG canvas, each face composed of a yellow circle, two eyes, and a d3 arc-based mouth. The React components `Face`, `BackgroundCircle`, `EyeCircles`, `Mouth`, and `FaceContainer` render each face with randomized stroke widths, eye offsets, eye radii, and mouth dimensions. The visualization uses d3.v7’s `arc` generator to draw the mouth path and the `range` function to create the face array. Each render produces a unique arrangement of facial features.

NNenad Jovanovic

81% match

Loading thumbnail…

Hello HTML

This example shows a grid of 18 identical cartoon faces, each rendered with a yellow background circle, two eyes, and an arc-shaped mouth, composed using React components. The faces are generated by mapping over an array from `d3.range` and rendering each `Face` component with randomized eye radii. The visualization uses React to structure the SVG elements, while the mouth is drawn with a `d3.arc` path generator. All faces share the same fixed dimensions and coordinate centers, creating a repetitive pattern with slight variations in eye size.

DDiavek

81% match