Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published1🌍 Public
LLeonardo Baron
Last edited Jan 13, 2023
Created on Jan 13, 2023
Forked from HTML Starter

A minimal React application renders a gray SVG canvas with a small black circle that follows the mouse cursor. The code uses React's `useState` and `useCallback` hooks to track cursor position and update the circle's `cx` and `cy` attributes. It imports `Eyes` and `Mouth` components, which draw placeholder facial features using SVG circles and a D3 `arc` path, though these are not currently instantiated in the main `App` component. The example demonstrates basic React event handling and SVG rendering within an HTML page.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

Fork of Fork of HTML Starter

This example demonstrates a minimal interactive mouse-follower where a single circle remains stationary at the center of an SVG canvas. The visualization uses React to render an `<svg>` element with a fixed radius circle, while CSS hides any page overflow. The code leverages React’s component model and JSX syntax, with dimensions hardcoded as constants. Although a script tag references an external library, no mouse-tracking behavior is implemented in the visible code, making it a static starter template for further development.

Rrahul887393@gmail.com
87% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates a single circle rendered within an SVG container that tracks the mouse position, though the circle itself remains fixed at its initial coordinates. Built with React and D3 v7, the application uses React’s `useState` to store the mouse position and `useCallback` to capture mouse movement events on the SVG element. The code imports React and ReactDOM to manage the component lifecycle, while the SVG’s `onMouseMove` handler logs the cursor’s client coordinates to the console. The visualization highlights basic React state management and event handling within a D3-powered SVG canvas.

VVictor Abrokwah
86% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a simple SVG face composed of a grey circle with a black outline and two inner circles for eyes, all positioned relative to computed center coordinates. The React application defines the visualization declaratively, using JavaScript expressions within JSX curly braces to set the width, height, and geometric properties of each shape. The code imports React and ReactDOM from unpkg.com and renders the SVG into an HTML div with the ID "root". The example demonstrates basic SVG rendering, React component structure, and the use of CSS to remove default page margins.

Ppravallikayaram12
86% match
Loading thumbnail…

Fork of HTML Starter

This is a simple face built entirely from SVG primitives, rendered with React and D3. A large yellow circle forms the head, with two black-and-white eyeballs and a smiling mouth composed of an arc path. The mouth's shape is generated using D3's `arc()` function to create an annular sector, while React components structure the SVG elements. The layout uses fixed pixel coordinates derived from the viewport dimensions.

AAnkit Sanghvi
86% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a simple face composed of SVG circles: a large red circle with a black stroke for the head and two smaller black circles for eyes. It demonstrates integrating React with D3 v7, using React to render SVG elements and JSX curly braces to compute coordinates. The app loads React and D3 from unpkg CDN scripts and renders into a root div, with CSS resetting the body margin for a clean fullscreen display.

MMuhriddinMahmudjonovich
86% match
Loading thumbnail…

Fork of HTML Starter

A simple SVG face rendered with React, featuring a yellow circle head with two black eyes, demonstrates basic SVG styling and React integration. The code uses React 17 via UMD, loads it through a script tag, and styles the SVG elements with CSS selectors like `#head` and `.eye-l`. The SVG is set to 960 by 500 pixels with a red background, and the shapes use standard SVG attributes for positioning and appearance. This example highlights static SVG visualization and React’s console logging capability.

DDain Park
86% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a circle following the mouse cursor inside an SVG canvas using React’s `useState` hook to track position changes. The visualization updates the circle’s `cx` and `cy` attributes in response to the `onMouseMove` event, rendering with ReactDOM and D3.js v5 as a dependency. The code relies on clientX and clientY coordinates from the event object to reposition the circle dynamically, with the initial state centered at half the SVG’s width and height.

DDavid Adelekan
86% match