Fork of Hello HTML

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

Fork of Hello HTML

This example shows a stylized smiley face built entirely from SVG primitives. A yellow circle with a black outline forms the head, two solid black circles serve as eyes, and a curved mouth is drawn as a partial ring. The face is constructed from modular React components, including `BackgroundCircle`, `Eyes`, and `Mouth`. The mouth shape is generated using the D3 `arc` API to define a path, while the entire composition is centered within an SVG using a translated group.

RRohith arabati

Fork of Hello HTML

A yellow smiley face rendered as a React SVG component, with a circular background, two black eyes, and a curved mouth. The face is centered in a 960 by 500 viewport, built from three reusable components: `BackgroundCircle`, `Eyes`, and `Mouth`. The mouth shape is generated using `d3.arc` from D3 v6, while the rest of the geometry uses plain SVG circles and paths. The example demonstrates composing D3 shape generators with React JSX for declarative data visualization.

AAsim Sheikh

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

Fork of Hello HTML

A yellow smiley face is drawn on an SVG canvas. The code defines a React component that renders two eyes and a mouth, with the face's background circle built as a reusable React sub-component. The mouth is created using D3's `arc` function to generate an SVG path with specified radii and angles. The example demonstrates combining React for component structure with D3 utilities for geometry, all rendered into a static SVG graphic.

YYiyun Lan

Fork of Hello HTML

This example shows a simple smiley face rendered as SVG, with a yellow circular background, two black eyes, and a curved mouth. The face is built from reusable React components, including `BackgroundCircle`, `Eyes`, and `Mouth`, which are composed within a single SVG element. Positioning is centered using a `g` transform, and the mouth is generated with the `d3.arc` API to create the semicircular path. The code uses React 17, D3 v7, and ReactDOM to render the static visualization without any interaction or data binding.

SSuwigya Rathore

Fork of Hello HTML

A React component renders a yellow SVG smiley face, constructed from a circle for the head, two smaller circles for eyes, and a D3-generated arc path for the mouth. The code defines reusable elements like `BackgroundCircle` and uses the `arc()` API from d3 to compute the mouth’s path. React manages the SVG structure, while D3 handles geometric calculations. The visualization demonstrates a static, data-less composition with fixed dimensions and positions, showing a simple blend of React’s declarative UI and D3’s shape utilities.

NNir

Fork of Hello HTML

This example shows a simple smiley face composed of SVG shapes, rendered with React and D3. It uses fixed dimensions (960×500 pixels) and centers the face within an SVG container via a translated group. The face includes a yellow circle for the head, two black eye circles, and a mouth generated with the D3 `arc` generator. All geometry is defined by static constants, with no data loading or interaction. The visualization demonstrates component composition, where separate React components handle the background, eyes, and mouth, and the D3 `arc` API creates a curved path for the mouth.

MMarat