Skip to main content
SimilarExport ZIP
100%

Smiley face pt. 2

✓ Published3🌍 Public
Ssucotton9
Last edited Jul 11, 2021
Created on Jul 5, 2021
Forked from HTML Starter

This example renders a yellow smiley face as an SVG using React components and D3’s `arc` generator for the mouth. The face is centered via a `transform` translation, with eyes positioned using fixed offsets and drawn as simple circles. Additional red paths and thick polylines appear outside the face, adding decorative elements. The code uses ReactDOM to mount the app and D3 v7 for the mouth’s arc path, with all shapes hardcoded rather than data-driven.

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 II

This example renders a smiley face in SVG using React components alongside D3’s `arc` generator for the mouth. The face consists of a yellow circle with a black stroke, two static eye circles, and a curved mouth path positioned via a centered `<g>` transform. The code builds the visualization declaratively in React, leveraging D3 v5’s `arc()` to compute the mouth’s path, while hardcoded dimensions and offsets define the layout. It demonstrates a hybrid approach where React manages the DOM structure and D3 supplies geometric calculations.

PPhilippe Rigovanov
95% match
Loading thumbnail…

Smiley - Part II - React-JS

This example renders a yellow smiley face as an SVG graphic using React components and D3’s `arc` generator for the mouth. It positions the face’s circles via a `<g>` transform centered at (480, 250), setting static radii and offsets for the eyes and mouth. The code imports React, ReactDOM, and `arc` from d3.v7, then mounts the `<App>` component into the DOM. The rendering approach is declarative JSX, producing a single SVG with three circles and one path element.

MMarcus Vinicius da Silveira Richa
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
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 smiley face rendered as a yellow circle with black outlined eyes and an arc-shaped mouth, drawn using React elements inside an SVG container. It demonstrates how React manages the SVG structure while D3’s `arc` generator computes the mouth path. The face is centered with fixed dimensions, using hardcoded values for eye offset, radius, and mouth arc angles. D3 v5 provides the arc helper, while React handles component rendering, illustrating a hybrid approach where D3 handles geometric calculations and React handles UI state.

JJacklyn Turner
94% match
Loading thumbnail…

Smiley face pt1

This example renders a simple cartoon smiley face using React and D3 within an SVG container. The face consists of a yellow circle head, two green eyes, a blue hair-like rectangle, and a mouth drawn as an arc. The code uses D3’s `arc` generator to create the mouth path, with positions calculated from center coordinates and offsets. All shapes are positioned via a central `<g>` transform, relying on React for component structure and D3 v5 for geometric calculations.

Ssophburke
94% match
Loading thumbnail…

Smiley Face Part I

This example renders a yellow smiley face in SVG using React and D3 v7. It shows a circular face with two eyes and a semicircular mouth, all positioned relative to a central coordinate system via a group transformation. The code uses `d3.arc` to generate the mouth path, with explicit `innerRadius` and `outerRadius` values, while the face and eyes are simple SVG `circle` elements. Stroke width and radius calculations adjust the face size based on the fixed 960×500 viewport.

SSamuel de Zoete
94% match