Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Apr 7, 2021

Created on Apr 7, 2021

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.

AI-generated description

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

Similar vizzes

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

94% match

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

93% match

Loading thumbnail…

Fork of HTML Starter

A React component renders a smiling face built from SVG primitives: a yellow circle with a black stroke for the head, two offset circles for the eyes, and a curved path for the mouth using d3.arc. The visualization demonstrates component composition and D3 integration within React, using d3.v7 and react-dom to construct reusable, parameterized visual elements.

LLewis Ward

93% match

Loading thumbnail…

Fork of HTML Starter

This example visualizes a cartoon face built from SVG shapes, including a yellow circular background, two black eyes, and a curved mouth. The face is composed through React components that accept numeric props for size, position, and thickness, with a container component managing the SVG coordinate transform. The mouth uses d3.arc to generate a path with specified inner and outer radii and angles. All elements are rendered declaratively via ReactDOM, with D3 v7 available for geometry calculations.

Ssangar-si

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 HTML Starter

This example displays a stylized cartoon face composed of SVG shapes, featuring a yellow circular background, two black eyes, and a mouth drawn as an arc. It uses React components to structure the face, including `BackgroundCircle`, `Eyes`, and `FaceContainer`, which center the graphic within an SVG canvas. The mouth is generated with the D3 `arc()` generator, and the project loads D3 v7, React 18, and ReactDOM from CDN.

Jjustvizzin

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

92% match

Loading thumbnail…

Fork of HTML Starter

A yellow smiley face rendered as an SVG using React and D3. The code builds a circle for the head, two eyes, and an arc-based mouth using D3's `arc` generator. Positioning is handled with absolute coordinates and SVG groups, while React manages the component structure and rendering into the DOM. The example demonstrates combining D3's shape generators with React's declarative UI model.

RRayzNike

92% match