Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published1🌍 Public

Last edited Oct 12, 2021

Created on Sep 7, 2021

This D3.js v7 and React example renders a simple cartoon face built from SVG circles and an arc-based mouth. The `Face` component composes smaller components—`BackgroundCircle`, `Eyes`, and `Mouth`—inside a `FaceContainer` that translates the coordinate system to the center of the 960×500 viewport. The mouth shape is generated using D3’s `arc` API, which defines inner and outer radii and angular range. The code demonstrates component-based composition and parameterized positioning with props, though it does not show any underlying data source or interactive behavior.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

This example renders a cartoon face composed of SVG shapes in a React component hierarchy. It uses D3's `arc` generator to draw the mouth and passes numeric props from a top-level `Face` component down to `BackgroundCircle`, `Eyes`, and `Mouth`. The face is centered with a yellow background circle, two black eyes, and a curved smile. The React app mounts to a div and renders the face into an SVG container with a fixed width and height.

Ddmagarian

95% match

Loading thumbnail…

Fork of Hello HTML

This example renders a parameterized cartoon face using React components and SVG. The `Face` component composes a yellow background circle, two eyes, and an arc-based mouth, all positioned via a `FaceContainer` that applies a translation transform. The mouth is drawn with d3’s `arc` generator, using inner and outer radii and fixed start/end angles. The code uses React 16, ReactDOM 17, and d3.v7, with the face dimensions and feature offsets passed as props to control the layout.

Wwangshain

94% match

Loading thumbnail…

Fork of Hello HTML

This example shows a stylized cartoon face rendered as SVG, with a yellow circular background, two eyes, and a mouth built from a D3 arc. The face is centered on a 960 by 500 canvas using React components that compose `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`. The code uses React 16.9, ReactDOM, and D3 v6’s `arc` generator to define the mouth’s path. All facial features are parameterized via props, allowing the face’s dimensions and positions to be adjusted independently.

MMarta

94% match

Loading thumbnail…

Fork of Hello HTML

This interactive face built with React and rendered as SVG uses D3.js to define its mouth via the `arc` API, creating a semicircular path. The face comprises four reusable component files: `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`. The `FaceContainer` wraps all elements and centers them using an SVG `<g>` transformation. Hardcoded dimensions position the eyes and mouth, while a yellow circle with a thick black stroke forms the head. This example demonstrates composing React components with D3 geometry helpers for straightforward, declarative graphics.

DDmytro Tyshchenko

94% match

Loading thumbnail…

Fork of Hello HTML

Built with React and D3 v7, this example renders a cartoon face as an SVG composed of reusable components. A yellow background circle, two black-outlined eyes, and a D3-generated arc path for the mouth are positioned within a transformed `<g>` container. The `Face` component receives numeric props for dimensions, offsets, and stroke widths, and the face is centered on a 960 by 500 canvas using static coordinate calculations.

DDeepak Tomson

94% match

Loading thumbnail…

Fork of Fork of Hello HTML

This example renders a simple cartoon face using React components and SVG. The Face component composes background circles for the head, offset circles for eyes, and an arc-based mouth. The mouth shape is generated with the D3 `arc` generator, producing a curved path. The SVG canvas is created via React’s JSX markup, with coordinates centered through a translation transform. The code uses d3.v7’s arc API and React 16.9 for structure, drawing a static, yellow-faced character without animation or data input.

AAaronnSeah

94% match

Loading thumbnail…

Fork of Hello HTML

This example renders a simple cartoon face using React components and SVG. The face is composed of a yellow background circle, two eyes, and a mouth drawn with a D3 arc path. The FaceContainer component handles the SVG setup and translates the group to center the face. All elements are positioned relative to central coordinates, with the mouth using d3.arc() to create a curved shape. The code demonstrates a minimal integration of React with D3 for declarative SVG visualization.

AAaronnSeah

94% match

Loading thumbnail…

Fork of Hello HTML

This example renders a simple cartoon face with React and D3 v7, composed of a yellow circular background, two eyes, and a smile-shaped mouth. The face is drawn using SVG primitives managed through React components, while the mouth path is generated with the `d3.arc()` API. Positioning is handled by a container component that translates a central group, and all elements are hardcoded with fixed dimensions within a 960x500 SVG canvas.

Ttheeranat

93% match