Skip to main content
SimilarExport ZIP
100%

Hello HTML

✓ Published0🌍 Public
HHouraa
Last edited Jan 28, 2022
Created on Jan 20, 2022
Forked from HTML Starter

This example uses React with D3 v7 to render six identical smiley faces in a grid of SVG elements. Each face is composed of reusable components—BackgroundCircle, Eyes, Mouth, and FaceContainer—that generate a yellow circle with black stroke, two eyes, and a curved mouth using D3’s `arc()` function. The `range(6)` from D3 creates the array to map over, producing the repeated faces. The faces are centered using SVG `<g>` transforms, and the styling uses basic CSS properties like `fill`, `stroke`, and `stroke-width`.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello HTML

This example renders a grid of smiley faces using React components and D3’s arc generator. Each face consists of a yellow background circle, two black eyes, and a mouth drawn with `d3.arc()`, all composed inside an SVG via a shared `FaceContainer` that applies a translation transform. Fifty faces are generated with randomly varying eye radii, producing subtle visual differences. The code demonstrates component reuse, D3’s `arc` API for path generation, and React’s rendering of SVG elements.

CCheng Tang
93% match
Loading thumbnail…

Hello HTML

A grid of 18 yellow smiley faces, each rendered as an SVG, demonstrates a React and D3 integration. The code uses `d3.range` to generate the array and `d3.arc` to create the mouth path, while each face’s eye size is randomly varied via `Math.random()`. The `FaceContainer` component, defined in `smiley.js`, combines a `BackgroundCircle` and positioned eye circles within a translated `<g>` element. This example shows how to build custom SVG components with React and D3’s shape generators.

YYu Chu (Jeff)
93% match
Loading thumbnail…

Hello HTML

Fifty randomly generated smiley faces fill the screen, each with distinct eye offsets, radii, and mouth thicknesses. The example demonstrates how to compose reusable React components to build a simple SVG visualization, layering a yellow background circle, black eyes, and an arc-based mouth. It uses React 17 with function components and props, while D3 v6’s `arc` generator creates the mouth paths and `range` produces the array for the face count. The faces are rendered as SVG elements within translated coordinate groups.

YYing-Liu21
92% match
Loading thumbnail…

Hello HTML

This example displays a grid of 50 identical smiley faces, each rendered as a yellow circle with black stroke, two eyes, and an arc-shaped mouth. Built with React components, the face features are composed from reusable SVG elements including `FaceContainer`, `OutsideCircle`, `Eyes`, and `Mouth`. The mouth uses a D3 arc generator with specified inner and outer radii and angles. The code leverages React’s component structure and D3’s `range` function to generate the repeated faces across the viewport.

VVictor Barbosa Rocha
92% match
Loading thumbnail…

Hello HTML

A grid of eighteen identical smiley faces, each rendered as a yellow circle with black outline, two eyes, and a curved mouth, is displayed. The example demonstrates how to build a reusable React component hierarchy using JSX and SVG. It uses ReactDOM to render the faces, with D3's `arc` generator defining the mouth shape and `range` from D3 producing the grid.

JJing-MS
92% match
Loading thumbnail…

Hello HTML

This example renders a smiley face using React and D3.js v7, composed entirely of SVG shapes including circles for the eyes and a D3 `arc()` path for the mouth and eyebrows. The `BackgroundCircle` component draws a yellow face with a black stroke, while the face is centered via a translated `<g>` group. Data is hardcoded in JavaScript, and rendering relies on ReactDOM to mount the component into the HTML document.

EEffie Klimi
92% match
Loading thumbnail…

Hello HTML

A collection of smiley faces is rendered as SVG elements using React components. Each face is composed of a yellow background circle, two eyes, and an arc-shaped mouth, with positions and sizes randomized through JavaScript's `Math.random`. The face geometry is assembled from modular React components, while D3's `arc` generator creates the mouth path. The example demonstrates a React and D3 integration, with 18 faces generated using D3's `range` function.

Hhuashe418
92% match
Loading thumbnail…

smiley face

This visualization displays a grid of six identical smiley faces rendered as SVG elements using React components. Each face consists of a yellow circle with a black stroke, two black eyes, and a mouth drawn with a D3 arc path. The React component hierarchy—FaceContainer, BackgroundCircle, Eyes, and Mouth—passes dimensional props like radius, offsets, and stroke width to compose each face. D3’s `arc` API generates the mouth shape, while ReactDOM renders the array of faces produced from a D3 `range`.

RRAMPUR ANUDEEP GOUD
91% match