Skip to main content
SimilarExport ZIP
100%

Smiley Part 1

✓ Published0🌍 Public
SSohana
Last edited Aug 7, 2023
Created on Aug 6, 2023
Forked from HTML Starter

This example builds a smiley face using React and D3’s `arc` generator for the mouth, rendered as SVG. It shows a yellow circle with black stroke, two black eyes, and a curved mouth, all positioned within a fixed 960×500 viewport. Dimensions and offsets (like eye radius and mouth width) are defined as constants. The code uses `ReactDOM.render` to mount the SVG, and D3 v5’s `arc` to compute the path for the mouth’s arc, while other shapes are plain SVG circles.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley face part 1

This example shows a simple smiley face drawn with React and D3’s `arc` generator for the mouth. A yellow circle with a black stroke forms the head, while two solid black circles serve as eyes. The mouth is a full circular arc with inner and outer radii, rendered as an SVG path. The SVG canvas is fixed at 960 by 500 pixels, with all elements positioned relative to the center using a `translate` transform. React renders the component hierarchy, and D3’s `arc` API computes the path data.

Mmathewluk
96% match
Loading thumbnail…

Smiley Face Part I

A yellow circle with a black outline forms the face, flanked by two smaller circles for eyes and a curved arc for a mouth. The example demonstrates building a smiley face from basic SVG shapes using React and D3's `arc()` generator, which constructs the mouth path from start and end angles. The components are positioned via SVG transform, with specific offsets and radii for each element. The code relies on `ReactDOM.render` and D3 v7, rendering declaratively within an SVG container.

SShiya
95% match
Loading thumbnail…

Smiley Face Part 1

This example renders a basic smiley face using React and D3 v7, drawing SVG shapes on a 960×500 canvas. It shows a yellow circle with a black stroke for the head, two black eye circles positioned symmetrically, and a smile created with the `arc` generator from D3. The arc uses inner and outer radii with start and end angles to form a mouth shape. All geometry is computed from center coordinates, radius, and offset variables, then transformed into place using an SVG group element.

AAriana
95% match
Loading thumbnail…

Smiley Face Part 1

This example draws a yellow smiley face in an SVG using React and D3. The face consists of a large circle for the head, two smaller circles for eyes, and a D3 arc path for the mouth. The layout is centered on a 960 by 500 canvas, with fixed pixel offsets for the eyes and a mouth arc that covers the lower half. The code uses ReactDOM to render the SVG, and the D3 `arc` API with inner and outer radii to generate the mouth’s path.

Eepw11108
95% match
Loading thumbnail…

Smiley Face Part 1

This example builds a smiley face using React and D3, rendered as an SVG. It shows a yellow circle with a black border, two black eye circles, and a curved mouth created with the d3.arc function. The face is centered on a 960x500 canvas, with all shapes positioned using JavaScript calculations for offsets and radii. React manages the SVG element structure, while D3 provides the arc path generator for the mouth.

IIvan
95% match
Loading thumbnail…

Smiley face part 1

This example builds a stylized smiley face from SVG primitives in React, composed from a yellow background circle, two eyes, and a mouth arc. The code uses D3’s `arc` generator to define the mouth shape, while the remaining facial elements—nose, glasses, and connecting lines—are drawn with basic SVG shapes. All parts are positioned relative to a central translation, and the rendering uses React’s declarative syntax to output the final SVG.

PPABOML
95% match
Loading thumbnail…

Smiley Face Part 1

This example builds the first stage of a smiley face using React components in an SVG, with D3’s `arc` generator shaping the mouth. It renders a yellow background circle, two eyes positioned via offsets, and a curved mouth path, all centered in a fixed 960×500 viewport. The code relies on D3 v6 for the arc’s inner and outer radii and angle extents, while React handles the componentized structure with named exports. The data flow is purely parametic, with radii and offsets passed as props, and no external dataset is used.

DDeborah Ong
95% match
Loading thumbnail…

Smiley Face - Part 1

This example renders a static smiley face using React and D3’s arc generator. A large yellow circle forms the head, with two dark eye circles, pink blush ovals, and a mouth drawn as an arc path centered on the display. The code positions all elements via SVG circle and path tags, using React to manage the component structure and d3.arc with explicit start and end angles to define the mouth’s shape. Fixed coordinates and dimensions hard-code the layout without any interaction or data updates.

Jjakers19
95% match