Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

Last edited Jul 18, 2022

Created on Jul 17, 2022

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Hello HTML

This example demonstrates an interactive SVG face that follows the user’s mouse movements across a 960×500 viewport. Built with React and D3 v7, it renders a yellow circle tracking the cursor while a separate Face component, composed of a background circle, eyes, and an arc-based mouth, sits at the page center. The mouse position is tracked via React’s `useState` and `useCallback` hooks, while D3’s `arc` generator creates the mouth path. The visualization showcases component composition and event-driven state updates without any external data source.

AAaronnSeah

95% match

Loading thumbnail…

Fork of Hello HTML

This example shows a smiling face rendered as an SVG using React components. It draws a yellow circle for the head, two black circles for the eyes, and a curved path for the mouth. The code uses React for the user interface, ReactDOM to mount the component, and the `arc` function from D3 to generate the mouth’s path. The face is centered with fixed dimensions for stroke, eye offset, and radius, demonstrating a simple composition of SVG elements built with React and D3.

Eea525

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

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

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

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

94% match

Loading thumbnail…

Fork of Hello HTML

This example shows a smiling face composed of SVG shapes, rendered interactively in a full-window view. The face is built from React components that assemble a yellow background circle, two eyes, and an arc-based mouth, all centered and scaled dynamically to the viewport. The code uses React for component structure and state, alongside D3 v5’s `arc` generator to define the mouth’s path. The SVG is rendered directly by React via the `FaceContainer`, which translates all elements to the screen’s center, with the overall layout driven by window dimensions.

MMarcoEsposito890

94% match

Loading thumbnail…

Fork of Hello HTML

A simple smiling face rendered as an SVG using React components, with D3's `arc` generator drawing the mouth. The face consists of yellow circles for the head and eyes, with black strokes, all positioned via SVG transform. React 17 manages the DOM, while D3 v7 provides the arc path calculation. The example demonstrates basic SVG shape composition and React integration without interactive behavior.

CCarl Centola

94% match