Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

Last edited Feb 19, 2022

Created on Feb 19, 2022

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.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

96% match

Loading thumbnail…

Fork of Hello HTML

A cartoon smiley face is drawn as a yellow circle with black outline, two eyes, and a mouth. The face is assembled from modular React components, including `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`, which renders an SVG. The mouth path is generated using `d3.arc` with specified inner and outer radii and start/end angles. The example demonstrates composing reusable SVG shapes with React and D3, using props to control geometry like radius, stroke width, and offsets.

Vvarun-j312

96% match

Loading thumbnail…

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

95% match

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

95% match

Loading thumbnail…

Fork of Fork of Hello HTML

This example displays a simple smiley face rendered as SVG, composed of a yellow circle background, two black eye circles, and a mouth arc drawn with D3’s `arc` generator. The face is built using React components, with the `BackgroundCircle` reusable component and the `App` component setting SVG dimensions and transforms. D3 v7 supplies the arc path, while React 18 handles the DOM rendering. The code defines fixed geometry constants for positioning and sizing, and the eyes are offset horizontally and vertically around the center point.

JJason Summercamp

95% match

Loading thumbnail…

Fork of Hello HTML

This example shows a yellow smiley face rendered as an SVG using React components. The face consists of a background circle, two eyes, and an arc-based mouth, all positioned in a central group. It uses D3’s `arc` generator to define the mouth shape, with React managing the component structure and props for coordinates and radii. Rendering relies on ReactDOM to mount the app into a root div, with D3 v6 loaded externally for the arc calculation. The visualization demonstrates static vector graphics with no interactivity or data binding.

Mmakecs50

95% match

Loading thumbnail…

Fork of Hello HTML

This example shows a smiley face rendered as a single SVG graphic, constructed with React and D3. The face is built from basic geometric shapes: a yellow circle for the head with a black stroke, two filled circles for eyes, and a D3-generated arc path for the mouth. React composes the SVG elements, while the `arc()` API from d3 defines the mouth’s curved path, specifying its inner and outer radii and start and end angles. The SVG canvas is fixed at 660 by 500 pixels, with the face centered through an SVG transform.

Ssd2beatles

95% match

Loading thumbnail…

Fork of Hello HTML

This example shows a simple smiley face rendered as SVG shapes, with a yellow circle for the head, two black eyes, and an arc for the mouth. It combines React for component-based UI structure with d3.arc for generating the mouth path. The code uses ReactDOM to mount the SVG into the page, and d3.js version 7 provides the arc generator with specified inner and outer radii. The face is centered on a 960×500 viewport using SVG groups and transforms.

Ffaizalmunna

95% match