Skip to main content
SimilarExport ZIP
100%

Smiley Face Part 1

✓ Published0🌍 Public
Kkatebacon32
Last edited Mar 22, 2021
Created on Mar 22, 2021
Forked from HTML Starter

This example renders a yellow smiley face in an SVG canvas using React and D3. It draws three circles for the face and eyes, plus a D3 `arc` path for the mouth, all centered on a translated group. The code uses ReactDOM to inject the markup into the page, with D3’s `arc()` API generating the mouth geometry and static dimensions defining the layout. The result is a simple, hard-coded illustration without interactivity.

AI-generated description

Half way towards a smiley face HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
96% match
Loading thumbnail…

Smiley Face Part 1

This example renders a classic smiley face using React and D3, drawing a yellow circle with black outline, two eyes, and an arc-shaped mouth on an SVG canvas. The face is centered using a translated group element, with fixed pixel offsets for the eyes and D3’s `arc()` generator defining the mouth’s inner and outer radii and angles. Hard-coded dimensions and stroke widths position every shape, demonstrating a static, declarative composition without data input. The code uses React’s JSX syntax and the `arc` API from D3 v5.

Ddanrhymes
95% match
Loading thumbnail…

Smiley face part 1

This example renders a classic yellow smiley face using D3 v7 and React. It constructs the face from SVG shapes, with a large yellow circle for the head, white eye regions with brown pupils, and D3 arc paths for the mouth and nose. The `d3.arc` API defines the mouth and eye-lash arcs using inner and outer radii with start and end angles. The composition is centered on a 960 by 500 canvas, and the code explicitly uses React's `ReactDOM.render` to mount the component.

Eellefeliz
95% match
Loading thumbnail…

Smiley Face Part One

This example shows a static smiley face built with React and D3, rendered as an SVG. A yellow circle forms the head, with two black circles for eyes and an arc-shaped mouth created using the D3 `arc()` generator. The code uses React to define the SVG elements and D3 v6 for the arc path, with coordinates calculated relative to the center of the 960×500 canvas. The face is drawn without animation or interaction, focusing on the geometry of the shapes.

Mmartinezdorival
95% match
Loading thumbnail…

Smiley Face Part 1

This example displays a yellow smiley face centered on an SVG canvas, built entirely with React and D3 v6. The face consists of a circular head, two black eye circles, and a curved mouth created using the `arc` generator from the D3 shape module. The `arc` function constructs the mouth path with specified inner and outer radii and angular extents, while React renders the SVG elements declaratively. The code defines all dimensions as constants, including eye offsets, radius, and stroke width, layering the shapes within a translated group element.

SShaneBowen1
95% match
Loading thumbnail…

Smiley Face Part 1

This example uses React and D3 v6 to draw a smiley face in SVG. It shows a yellow circle with black stroke for the face, two filled circles for eyes, and an arc path for the mouth. The code computes geometry such as center coordinates, eye offsets, and mouth radius, then passes these to D3’s `arc()` generator to create the mouth path. React renders the SVG elements declaratively, while D3 provides the arc calculation.

PPeter Colella
95% match
Loading thumbnail…

Smiley Face Part 1

A simple yellow smiley face is drawn using D3’s `arc` generator to create the mouth, while React renders the SVG circles for the face and eyes. The face is centered at 480,250 with a black outline, and the eyes are positioned symmetrically using fixed offsets. The code uses `ReactDOM.render` with React 18 and D3 v7, specifying explicit pixel dimensions for the SVG canvas. No animation or interactivity is present; the example demonstrates static SVG composition with D3 path generation.

Nnfvanlieshout
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
94% match