Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Hello HTML

✓ Published1🌍 Public
AAaronnSeah
Last edited Oct 28, 2021
Created on Oct 28, 2021
Forked from 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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

Fork of Fork of HTML Starter

This example shows a simple SVG face constructed from yellow background circle, two eyes, and a mouth, all rendered through React components. The visualization demonstrates interactive mouse tracking, where a small circle follows the cursor's position across the canvas. The code uses D3 v7 for parsing a CSV dataset from a GitHub gist, displaying file size and row/column counts. React's `useState` and `useCallback` manage mouse position updates, while D3's `arc` function generates the mouth path.

DDipak654
93% match
Loading thumbnail…

Fork of Fork of Fork of Hello HTML

This example builds a data-driven face using React and SVG primitives. It composes a yellow circular background, two eyes, and an arc-based mouth into a reusable `Face` component. The `Mouth` component uses `d3.arc` to generate a path, while a separate SVG tracks mouse movement, drawing a red circle that follows the cursor. The app renders via `ReactDOM.render`, with all geometry defined by explicit parameters like `eyeOffsetX` and `mouthRadius`.

AAaronnSeah
92% match
Loading thumbnail…

Fork of creative face

A playful face follows the mouse cursor across an SVG canvas, tracking pointer movement via React state updates. The face is composed of reusable SVG components—a yellow circular background, two eyes, and a mouth arc—rendered through React and D3's `arc` generator. Mouse position drives the face's coordinates, while the D3 arc API creates the smile shape with specified radii and angles.

Jjackcaldwellnichols
91% 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
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
90% 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
90% 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
90% match