Skip to main content
SimilarExport ZIP
100%

Smiley Face Part II

✓ Published0🌍 Public
Bbenpiel
Last edited Jun 6, 2021
Created on Jun 5, 2021
Forked from HTML Starter

This example shows a stylized yellow smiley face composed of SVG shapes, centered on a 960 by 500 canvas. It uses React to render the markup and D3 for drawing, with a d3 arc defining the mouth path. The face includes two eyes with pupils, and the code relies on ReactDOM to mount the application into the page.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

SmileyPart2

This example shows a yellow smiley face drawn with SVG shapes, consisting of a circle head, two eyes, and an arc-shaped mouth. The face is centered on a 960×500 canvas using React’s JSX syntax, with each feature positioned relative to the center point. The mouth is created using D3’s `arc()` generator with specified inner and outer radii and start and end angles, while the other shapes are plain SVG circles. D3 v6 and React 16 load from CDN, and the entire scene renders through `ReactDOM.render` into a root div.

AAndre J Denais
94% match
Loading thumbnail…

Smiley Face Part II

This example shows a yellow smiley face centered in an SVG canvas, composed of circular eyes and an arc-shaped mouth built with D3’s `arc` generator. The face is rendered using React, with D3 v5 providing the geometric path calculations. All shapes are drawn as SVG elements within a transformed group, using explicit radii and offsets for the eyes and mouth. The code uses `ReactDOM.render` to mount the component, and the `arc` function from `d3` defines the mouth’s start and end angles.

Aaishwarya8615
94% match
Loading thumbnail…

Smiley Face Part II

This example shows a yellow smiley face centered in an SVG canvas, composed of circular eyes and an arc-shaped mouth built with D3’s `arc` generator. The face is rendered using React, with D3 v5 providing the geometric path calculations. All shapes are drawn as SVG elements within a transformed group, using explicit radii and offsets for the eyes and mouth. The code uses `ReactDOM.render` to mount the component, and the `arc` function from `d3` defines the mouth’s start and end angles.

Aaishwarya8615
94% match
Loading thumbnail…

Smiley Face Part II

This example shows a static yellow smiley face with two black eyes and a curved mouth, rendered as an SVG graphic. The face is built by drawing a large yellow circle with a black stroke, two smaller circles for the eyes, and an arc for the smile, all positioned within a 960×500 viewport. The code combines React for the user interface component structure and D3 v5 for SVG element creation, using basic circle and path SVG primitives. The project loads React 16.9, ReactDOM, and D3 5.11 via CDN, with the face geometry defined manually in JavaScript rather than derived from data.

KKarenNg
94% match
Loading thumbnail…

Smiley Face Part II

This example shows a simple smiley face rendered as an SVG graphic using React and D3. The face consists of a yellow circle with a black stroke, two black eye circles, and a mouth drawn as an arc using the `d3.arc()` API with inner and outer radii. React manages the component structure and JSX markup, while D3 provides the arc path generator for the mouth shape. The code uses explicit pixel coordinates and constants for positioning, with the entire graphic centered at the midpoint of the 960-by-500 viewport.

Yyyaaa1
94% match
Loading thumbnail…

Smiley Face Part II

This example displays a simple yellow smiley face with two black eyes and a curved mouth, rendered as an SVG graphic. The face is centered on the canvas, with its components positioned using React and D3.js. The code uses D3’s `arc` API to generate the mouth’s path, defining its inner radius, outer radius, and angle range. Circle elements for the face and eyes are created with explicit coordinate calculations, while the overall graphic is drawn declaratively within a React component.

AAkshay Podagatlapalli
94% match
Loading thumbnail…

Smiley Face Part II

A yellow smiley face is drawn as an SVG, centered within a 960 by 500 viewport. The face consists of a yellow circle with a black stroke, two black eye circles, and a mouth rendered as an arc path. The code uses React for component structure and D3’s `arc` generator to compute the mouth’s path, with `d3-selection` appending an unrelated purple circle to the page. All shapes are positioned using absolute coordinates, and the rendering occurs via ReactDOM into the `#root` element.

Mmeperezcuello
94% match
Loading thumbnail…

Smiley Face Part II

This example renders a full-screen smiley face using React and D3, centered within an SVG canvas sized to the browser window. The face consists of reusable components: a yellow background circle with a black stroke, two eyes positioned symmetrically, and a mouth drawn with a D3 arc path. A polygon forms a nose above the mouth. The layout positions all features relative to the window center, with radii and offsets calculated dynamically from the viewport height.

Jjth500
94% match