Fork of Fork of HTML Starter

100%

Fork of Fork of HTML Starter

✓ Published0🌍 Public

Last edited Dec 22, 2021

Created on Dec 22, 2021

This example renders a large face using React and D3, with a radially gradient-filled circle for the head, eyes, pupils, and an arc-based mouth. The SVG output is composed via React components, while the mouth shape is generated using the D3 `arc()` function with explicit start and end angles. All shapes are positioned using computed offsets and radii, and the face is centered within a fixed 960-by-500 viewport. The page loads React 17 and D3 v7 from CDNs, and the code demonstrates a minimal but complete React-D3 integration without external data.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

A smiling face rendered as an SVG inside an HTML page, built with React and D3. The visualization draws a large grey circle for the face, two blue circles for eyes, and a mouth using D3's `arc` function to create a path with specified inner and outer radii and angular range. The code uses D3 v7 selection and attribute methods to position shapes relative to the SVG's width and height, with a fixed 960 by 500 pixel canvas.

Mmukhopj

92% match

Loading thumbnail…

Fork of My HTML Starter

This example renders a stylized face using React and D3 v7, composed of SVG shapes such as circles, lines, ellipses, and arcs. It demonstrates the D3 `arc` API to generate paths for the mouth, eyebrows, and additional curved elements, while leveraging React’s `ReactDom.render` to mount the component. The visualization uses a fixed 960×500 canvas with absolute positioning, drawing a yellow circular head with eyes, a red mouth, pink cheeks, and black facial features, all constructed declaratively in JSX.

Mmeghshah612

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

91% match

Loading thumbnail…

Fork of Hello HTML

A stylized face built from SVG shapes rendered through React components, with circles for the head and eyes and a D3 arc path forming a curved mouth. The code uses React 17 to manage the SVG element tree, while `d3.arc()` computes the mouth’s path geometry between specified angles and radii. A single translated group positions all shapes relative to the canvas center, and React’s declarative composability structures the LargeCircle and Eye subcomponents. The rendering approach is entirely vector-based, with no external data beyond the hardcoded geometry parameters.

AAndi Oneto

91% match

Loading thumbnail…

Fork of HTML Starter

This example renders a stylized face using React components and D3’s `arc` generator for the mouth. The face is composed of separate SVG elements—a yellow background circle, two eyes, and an arc-shaped mouth—arranged within an SVG container via a transform. The `Face` component receives props for geometry such as eye offset, radius, and stroke width, and the code uses React 16.9 and D3 v7 to build the SVG output dynamically.

Ssophiasharif

91% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example renders a simple face using React and SVG, consisting of a yellow circle for the head and two smaller black circles for the eyes. The positioning is computed from the SVG dimensions and offsets defined in the JavaScript. The code is written as a React function component that returns JSX, which is then mounted into the DOM via `ReactDOM.render`. The HTML page loads React and D3 from a CDN, and CSS resets the body margin for a clean canvas.

SSanchay

90% match

Loading thumbnail…

Fork of HTML Starter

A stylized face rendered with React and D3, centered on a yellow SVG circle with a black stroke. Outer white eyes, inner green-stroked pupils, and a D3 arc-generated mouth are composed as reusable React components, each accepting custom geometry props. The face is built from nested SVG groups translated to the viewport center, using d3.arc to define the mouth path. Data is passed declaratively through props, and the visualization is mounted into the DOM via ReactDOM.

MMartenServices

90% match

Loading thumbnail…

Fork of Hello HTML

This example renders a smiling face using React and D3’s `arc` generator to draw the mouth as a thick semicircular path. The SVG is assembled declaratively in JSX, with yellow and orange circles for the head and nose, and black strokes for outlines. React 16.9 manages the component lifecycle, while D3 v6 provides the `arc` function for path geometry. The viewport is fixed at 960 by 500 pixels, with the face centered and intentionally cropped by the hidden overflow.

TTak30-T

90% match