Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

Last edited Jan 10, 2023

Created on Jan 9, 2023

Two identical cartoon faces render side by side on a yellow circular head with black outlines, each displaying two offset eyes and an arc-shaped mouth. Built with React components, the visualization composes SVG circles and a d3.arc-generated path for the mouth, with all geometry passed as props from the App. The code imports d3 exclusively from the global d3 namespace when calling d3.arc().innerRadius.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example displays two identical cartoon faces, each composed of a yellow circle with black outline, two eyes, and a curved mouth. The faces are rendered using React components that structure the SVG elements, with D3’s arc generator used to create the mouth path. The center of each face is positioned at the SVG’s midpoint via a group transform, and facial features like eye radius and mouth size are controlled through component props.

TTerryZ7

92% 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

91% match

Loading thumbnail…

Fork of Hello HTML

The visualization renders a yellow, smiling face composed of SVG circles and a d3.arc path, repeated one hundred times across the viewport via a React component map. Each face uses props like `centerX`, `eyeOffsetX`, and `mouthRadius` to position its features, with the background circle, eyes, and mouth assembled from separate React components. The code imports React, ReactDOM, and d3's `range` and `arc` functions, and draws using SVG elements within a FaceContainer that applies a translation transform.

MMalcolm Mead

91% match

Loading thumbnail…

Fork of Hello HTML

A stylized cartoon face is rendered as a yellow circle with black outlined eyes and a curved mouth. Built with React components, the visualization uses reusable sub-components for the background, eyes, and mouth, orchestrated by a `FaceContainer` that manages the SVG coordinate system. The mouth is drawn using the `d3.arc()` generator to create a semi-circular path, while all elements are positioned relative to a central origin defined by the face's dimensions.

KKaushik Mishra

91% match

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

91% match

Loading thumbnail…

Fork of Hello HTML

A stylized face rendered with React and D3 components draws a yellow circle for the head, red eyes, and a curved mouth using D3's arc generator. The FaceContainer builds an SVG with a centered group, while BackgroundCircle and Eyes define the individual shapes as React components. The visualization demonstrates a modular, component-based approach to SVG rendering within the React framework, using D3 v7 for the mouth path calculation.

Ssixsoxsix

91% match

Loading thumbnail…

Fork of Hello HTML

This example shows a cartoon face rendered with reusable React components, featuring a yellow circular background, two black eyes, and a smiling mouth. The code combines React for component structure with D3’s `arc` generator to create the mouth’s curved path. A `FaceContainer` wraps the SVG output, centering all elements via a `transform` translation. The face’s dimensions and positions—such as eye offset, stroke width, and mouth radius—are passed as props from a top-level `App` component, demonstrating a modular, data-driven approach to static SVG visualization.

Aaramaki-san

91% match

Loading thumbnail…

Fork of Hello HTML

The example forks the classic "Hello HTML" to render a cartoon face with SVG, composed of a yellow background circle, two simple eyes, and a mouth arc. The face is assembled on a React canvas using reusable components that wrap SVG elements inside a central `<g>` transform. The mouth is computed with the d3 `arc` API, which generates a path using an inner radius, outer radius, and start/end angles. The layout uses a fixed 960x500 pixel SVG, with positions and dimensions calculated from the center coordinates and parameters like stroke width and eye offsets.

KKhademAlimi

91% match