Skip to main content
SimilarExport ZIP
100%

Fork of Hello HTML

✓ Published2🌍 Public
KKelly Egan
Last edited Mar 12, 2021
Created on Mar 9, 2021
Forked from Hello HTML

This interactive web page uses React and D3 to render a simple, stylized face as an SVG graphic. It displays a yellow circle with a black outline, two black circular eyes, a red elliptical tongue, and a black mouth arc. The code calculates the layout using D3’s `arc` function and applies a mask to shape the tongue, with all elements positioned relative to the center of the canvas.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

A yellow circle with a black outline represents a face, featuring two small black eyes and a black arc for a mouth. The SVG graphic is built using React, with the shape’s geometry and the mouth’s arc path calculated using the D3.js `arc` function. The code defines the canvas dimensions and positions elements like the eyes and mouth relative to a central point within an SVG viewport of 960 by 500 pixels.

BBharadwaja
93% 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
93% match
Loading thumbnail…

Fork of Hello HTML

This example shows a simple, hand-coded SVG face composed of a yellow circle, two eyes, and an arc-shaped mouth. The face is rendered inside a React component using JSX, with the mouth path generated by the `arc()` generator from d3-shape. The page loads React 17 and D3 v7 via CDN, then mounts the component into a root div, producing a static, frameless visualization at 960 by 500 pixels.

IIan Neidel
92% match
Loading thumbnail…

Fork of Hello HTML

This example shows a simple yellow face constructed from SVG primitives, with two black eyes and a small mouth. The React application uses hardcoded values for the face’s center, eye offset, and eye radius, while a D3 `arc` generates the mouth path. The SVG is drawn directly in the render, with React and D3 loaded via CDN.

Oomarsheetan@gmail.com
92% match
Loading thumbnail…

Fork of Hello HTML

This example shows an interactive SVG face built with React and D3. It renders a yellow circular head with eyes and a mouth, using a `Face` component composed of smaller components for each facial feature. The visualization also tracks mouse movement, drawing a small red circle at the cursor position. The code uses D3’s `arc` API to create the mouth path and React’s `useState` to manage the mouse position. Rendering is handled through the ReactDOM library with inline SVG elements.

AAnthony Grant
92% 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
92% match
Loading thumbnail…

Fork of Hello HTML

A React-rendered SVG face shows a yellow circle with black stroke, two dark eye circles, and an arc-based mouth created with d3.arc. The code uses React 17 and D3 v7, with the mouth path generated via arc start and end angles. Eye positions and radii are fixed constants, and the background circle’s radius derives from the viewport height minus stroke width. The visualization demonstrates basic SVG shape composition within a React component, using D3 only for the arc path generator.

Ppyee78
92% match
Loading thumbnail…

Fork of Hello HTML

This example shows a simple, stylized face built from SVG shapes, with a yellow circular head, two black eyes, and a curved mouth. The code blends React and D3, using React components to organize the scene and a D3 arc generator to create the mouth path. It renders a static SVG via a container that translates the center point, demonstrating a basic composable approach to vector drawing without any animation or data input.

Ooigwebuike
92% match