Fork of Fork of HTML Starter

100%

Fork of Fork of HTML Starter

✓ Published0🌍 Public

Last edited Oct 6, 2022

Created on Oct 6, 2022

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example shows a simple face constructed from three SVG circles rendered inside a React application. It draws a large yellow circle as the head with two smaller black circles for eyes, all positioned using fixed coordinates derived from the container’s width and height. The code uses ReactDOM to render the SVG into the DOM, with D3 v7 loaded via a UMD script. The body margin is removed with CSS to create a full-bleed visualization.

Mmundembe

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

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

93% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a simple face rendered as an SVG using React, with a yellow circle for the head and two smaller circles for eyes centered on a 960×500 canvas. It combines React 17 and D3 v7, loaded via UMD builds from unpkg, with ReactDOM rendering the SVG elements directly. The code demonstrates basic JSX syntax, including curly braces to embed JavaScript expressions like `centerX` and `eyeOffsetY` for positioning. The stylesheet removes the body margin and hides overflow, allowing the visualization to fill the viewport cleanly.

Ssumitradevipolina

93% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example renders a smiling face using SVG circles composed with React components. The code uses React 17 and D3 v7 loaded via CDN, drawing a yellow face with black stroke, positioned eyes, and a circular boundary. It demonstrates composing SVG elements with JSX, using inline style objects and ReactDOM to mount the visualization.

RRavi Teja Bonam

92% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a simple yellow face rendered as SVG circles, with black outlined cheeks, two eyes, and a red nose, centered on a 960 by 500 canvas. Using React 17 and D3 v7 loaded via UMD builds from unpkg, the code defines an `App` component that returns SVG elements with coordinates computed from constants. ReactDOM renders the component into a `div` with the id `root`, while CSS removes the body margin and hides overflow. The visualization demonstrates basic React JSX syntax, including curly braces for JavaScript expressions, and showcases how D3 and React can coexist in a single page.

Ttarungunda

92% match

Loading thumbnail…

Fork of Fork of HTML Starter

A simple SVG face rendered with React showcases two black eyes and a yellow circle with a black stroke. The code defines fixed dimensions and positions using JavaScript constants, then constructs the visual elements with React's JSX syntax. D3 is loaded via a CDN, though it is not directly used. React DOM renders the SVG into the page, while CSS removes the body margin for a clean, full-bleed display.

Jjwadh

92% match

Loading thumbnail…

Fork of Fork of HTML Starter

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.

AAdamRyanUK

91% match