Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
BBrian Machado
Last edited Jul 2, 2022
Created on Jul 1, 2022
Forked from HTML Starter

A grid of eight procedurally generated faces demonstrates the use of React components and D3.js v7 in a static SVG rendering. Each face, composed of a yellow circle, black-outlined background, two eyes, and an arc-based mouth, receives randomized props for stroke width, eye offset, eye radius, and mouth dimensions. The React components like `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer` structure the visualization, while D3's `arc` function draws the mouth path. The `range` function generates the layout, and `ReactDOM.render` mounts the app to the DOM.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example renders a grid of six cartoon faces using React components composed from SVG primitives. Each face is generated by mapping over an array from `d3.range`, with random values for eye radius, mouth radius, and mouth width injected via `Math.random()`. The `Mouth` component uses `d3.arc` to create a semicircular path, while `BackgroundCircle`, `Eyes`, and `FaceContainer` assemble the yellow circle, black stroke, and centered SVG group. The visualization demonstrates reusable React components with D3 for geometry, rendered directly to SVG in a fixed 200×300 viewport.

DDeborahVdeV
93% match
Loading thumbnail…

Fork of HTML Starter

A grid of 10 cartoon faces renders in SVG via React components, each with a yellow circular background, magenta eyes, and a smile drawn using a D3 arc path. The faces vary randomly in eye radius and mouth dimensions per render, generated using `Math.random()` within the React `App` component. D3 v7 provides the `arc` generator for the mouths, while React functional components like `BackgroundCircle`, `Eyes`, and `FaceContainer` assemble the SVG elements. The code uses React 18 with `ReactDOM.render` to mount the visualization into the page.

Ttim10133222
93% match
Loading thumbnail…

Fork of HTML Starter

A smiling face built from reusable React components, with repeated instances rendered in a grid. The visualization demonstrates modular SVG construction through `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` components, using `d3.arc` to generate the curved mouth path. React renders five identical faces from an array generated by `d3.range`, each sized at 160 by 166 pixels with fixed positioning and styling. The code uses React 18.3.1 and D3 v7, rendering static SVG output without interaction or animation.

Ssaismitha28.bachu@gmail.com
93% match
Loading thumbnail…

Fork of HTML Starter

This example displays a grid of smiling faces created with React and rendered as SVG. Each face is composed of reusable components for the background circle, eyes, and mouth, all positioned within an SVG container. The code uses d3’s `arc` function to generate the mouth path and `range` from d3 to create the array of faces. Each face is generated with randomized eye sizes, and the dimensions are defined by the `width` and `height` variables in the React app.

Yyeeholai
92% match
Loading thumbnail…

Fork of HTML Starter

This example renders a grid of 18 cartoon faces, each with a yellow circular background, eyes, and a mouth, using React components for modular composition. The faces are generated with random eye and mouth dimensions, driven by D3’s `range` for iteration and `d3.arc` to shape the mouths as curved paths. All elements are drawn as SVG within a shared `FaceContainer`, which translates the coordinate system to center each face. The visualization demonstrates a declarative, component-based approach to data-driven SVG generation, with randomness providing variation across the grid.

Rreama623
92% match
Loading thumbnail…

Fork of Hello HTML

A React app renders a grid of 18 stylized faces, each a yellow circle with a black stroke, two eyes, and an arched mouth. The faces vary randomly in eye radius and mouth width, creating subtle differences across the repeated components. The visualization demonstrates a component-based approach to SVG generation, using React for structure and d3’s `arc` function to create the mouth paths. Each face is drawn with shared components like `BackgroundCircle`, `Eyes`, and `Mouth`, all composed within an SVG container.

RRaphael Fogha
92% match
Loading thumbnail…

Fork of HTML Starter

This example renders a grid of 18 cartoon faces using React components, each with randomized facial features such as eye offset, eye radius, mouth radius, and stroke width. The faces are composed of SVG circles and a D3 arc path for the mouth, assembled via reusable components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`. D3’s `arc` API generates the mouth shape, while `range` from D3 creates the array of faces. The SVG output is positioned using a centered `<g>` transform, with all styling handled through inline SVG attributes.

Ee-ines
92% match
Loading thumbnail…

Fork of HTML Starter

This example renders a grid of eighteen cartoon faces using React and D3 v7. Each face combines reusable SVG components for the background circle, eyes, and mouth, with randomized eye radius and mouth width values generated via `d3.range` and `Math.random`. The `Mouth` component uses D3’s `arc` generator to create a half-circle path, while `FaceContainer` wraps all elements in an SVG group translated to the center. Yellow faces with blue eyes and black outlines demonstrate a modular, component-based approach to SVG visualization.

CCetinBasoz
92% match