Skip to main content
SimilarExport ZIP
100%

Smiley Face Part 1

✓ Published0🌍 Public
Ggustavo-hideo
Last edited Apr 13, 2020
Created on Apr 9, 2020
Forked from Hello HTML

Two nearly identical smiley faces—each with a yellow circular head, black outline, eyes, and an arc-based mouth—are rendered side by side. The component-based React code composes `Face`, `FaceContainer`, `HeadCircle`, `Eye`, and `Mouth` components, using D3's `arc` generator to define the mouth path. SVG circles serve as the head and eyes, while the face is centered via a translated `<g>` element. The example demonstrates reusable, parameterized React components for simple data-driven graphical compositions.

AI-generated description

Halfway towards smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part I

A yellow smiley face is drawn using React components that compose SVG shapes: a background circle for the head, two offset circles for eyes, and a d3.arc-generated path for the mouth. Each feature is parameterized by props like radius, eye offset, and stroke width, allowing the face to be reconfigured. The `FaceContainer` component applies a transform to center all elements, and the entire face is rendered dynamically from data-driven values in d3.v7 and React 18.

ZZaid Alshaikh Hasan
94% match
Loading thumbnail…

Smiley Face Part I

A reusable React component renders a yellow smiley face with black circular eyes and a curved mouth using SVG. The face is composed of separate components for the background circle, eyes, and mouth, assembled inside a centered SVG group. D3's `arc` generator creates the mouth path, while React props control dimensions like eye offset, radius, and stroke width. The example demonstrates modular component composition with D3 integration in React.

Wwindwaver
94% match
Loading thumbnail…

Smiley Face part 1

Five identical smiley faces are rendered in a row, each composed of SVG circles and an arc-based mouth. The faces are built from reusable React components, with `BackgroundCircle` for the yellow head, `EyeCircle` for the black eyes, and `Mouth` using `d3.arc` to generate the smile path. The `FaceContainer` centers each face within an SVG of fixed dimensions, while a single `Face` component parameterizes offsets, radii, and stroke widths. The code maps over an array of five items to duplicate the face, demonstrating component reuse with React and D3.

HHeidi Stockton
94% match
Loading thumbnail…

Smiley face part one

This example shows a parameterized smiley face built with React and SVG, composed of a yellow circle, two eyes, and an arc-based mouth. The face is constructed from reusable components—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—that accept numeric props for positioning and sizing. The mouth path is generated using the `d3.arc()` API, while all geometry is centered via an SVG `<g>` transform. The rendered output is a static, front-facing cartoon face with fixed dimensions.

Jjlehtomaa
94% match
Loading thumbnail…

Smiley Face Part I

A yellow, wire-framed smiley face rendered in SVG demonstrates reusable React components for composing static figures. The face uses `BackgroundCircle` for the head, `Eyes` for the pupils, and `Mouth`, which applies a d3 `arc` path generator with fixed start and end angles to draw an open-mouth shape. A `FaceContainer` wraps the SVG group, centering all elements via a translation transform. The example runs with React 17 and D3 v6, and the component props (including eye offset, radii, and stroke width) are set dynamically in the main app.

RRMartins11
94% match
Loading thumbnail…

Smiley Face Part I

This example builds a smiley face using React and SVG. It defines reusable components for the face's background circle, eyes, and mouth, which are then assembled within a central `FaceContainer` that handles the SVG coordinate system. A yellow circle provides the base, with black eyes and a mouth drawn using a D3 arc, which creates a smile by sweeping between specific angles. The face's proportions are controlled by configurable parameters like eye offset and mouth radius, allowing for easy customization.

Ddrc6587
94% match
Loading thumbnail…

Smiley Face Part I

This example shows a simple smiley face composed of modular React components: a yellow background circle, two black eyes, and a curved mouth rendered as an SVG path. The face is generated from explicit geometric parameters like eye offset, eye radius, mouth radius, and stroke width, which are passed through a `Face` component. The code uses React 16.9 for component logic and d3 v6’s `arc()` API to calculate the mouth shape, with all elements drawn in a shared SVG container.

VViktor A. Elias
94% match
Loading thumbnail…

Smiley Face Part I

The visualization displays a stylized smiley face composed of a yellow circular background, two black eyes, and a curved mouth stroke. It demonstrates reusable React components for modular SVG composition, with each facial feature defined as a separate component. The mouth uses the `d3.arc()` API to generate a path with specified inner and outer radii and angular range. All elements are rendered in a single SVG container, positioned via a centered `<g>` transform, with hardcoded viewport dimensions of 960 by 500.

Qqtrfx
94% match