Skip to main content
SimilarExport ZIP
100%

Fork of Hello HTML

✓ Published0🌍 Public
Nnecat1
Last edited Mar 13, 2021
Created on Mar 7, 2021
Forked from Hello HTML

A smiling face rendered in React and SVG shows two nearly identical overlapping faces built from a yellow circle, black-outlined face, eyes, and an arc-based smile. The code uses React components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`, with D3’s `arc` generator to create the mouth path. Rendered via `ReactDOM.render` into a hidden-overflow body, the example demonstrates component reuse by displaying the same face twice with identical positional and sizing parameters.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

A simple smiley face rendered with SVG in a React component hierarchy. The face uses a yellow background circle, two eyes, and a curved mouth drawn with `d3.arc`. Each facial feature is a separate React component (`BackgroundCircle`, `Eyes`, `Mouth`) composed inside a `FaceContainer` that centers the drawing. The example demonstrates reusable React components with D3’s arc generator for the mouth path, using fixed dimensions and props to control geometry.

Vvarmps
93% match
Loading thumbnail…

Fork of Hello HTML

A smiling cartoon face built from SVG primitives, with a yellow circular head, black stroke outline, black eyes, and an arc-shaped mouth. The face renders in React using a component tree composed of `Face`, `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`. The mouth path is generated by `d3.arc`, while the overall layout is centered via SVG `<g>` transforms. The example demonstrates reusable React components parameterized by props for dimensions and offsets, rendered into the DOM through `ReactDOM.render`.

Ssakshi135
93% match
Loading thumbnail…

Fork of Hello HTML

This example shows a smiling face rendered as an SVG using React components. It draws a yellow circle for the head, two black circles for the eyes, and a curved path for the mouth. The code uses React for the user interface, ReactDOM to mount the component, and the `arc` function from D3 to generate the mouth’s path. The face is centered with fixed dimensions for stroke, eye offset, and radius, demonstrating a simple composition of SVG elements built with React and D3.

Eea525
93% match
Loading thumbnail…

Fork of Hello HTML

This visualization shows a simple smiling face built from basic SVG shapes, with a yellow circular background, two black eyes, and a curved mouth. It demonstrates how React components compose reusable visual elements like the background, eyes, and mouth into a single face. The mouth uses D3's arc generator to create the smile path, while the overall structure relies on React's component hierarchy and a central SVG group with a calculated transform for positioning.

FFlorian Kotthoff
92% 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
92% match
Loading thumbnail…

Fork of Hello HTML

This example shows a smiling face composed of SVG shapes, rendered interactively in a full-window view. The face is built from React components that assemble a yellow background circle, two eyes, and an arc-based mouth, all centered and scaled dynamically to the viewport. The code uses React for component structure and state, alongside D3 v5’s `arc` generator to define the mouth’s path. The SVG is rendered directly by React via the `FaceContainer`, which translates all elements to the screen’s center, with the overall layout driven by window dimensions.

MMarcoEsposito890
92% match
Loading thumbnail…

Fork of Hello HTML

A simple smiling face rendered as an SVG using React components, with D3's `arc` generator drawing the mouth. The face consists of yellow circles for the head and eyes, with black strokes, all positioned via SVG transform. React 17 manages the DOM, while D3 v7 provides the arc path calculation. The example demonstrates basic SVG shape composition and React integration without interactive behavior.

CCarl Centola
92% match
Loading thumbnail…

Fork of Hello HTML

This example shows a simple smiling face rendered as SVG shapes, composed of a yellow background circle, two black eyes, a red nose, and a mouth drawn as an arc path. The face is centered using a translated `<g>` group within a 960×500 SVG viewport. It uses React components (`BackgroundCircle`, `Eyes`) to structure reusable parts, while the mouth is generated with the `d3.arc()` function from the D3 v7 library, specifying inner and outer radii and angular extents.

NNoahDassa
92% match