Fork of My Smiley Face

100%

Fork of My Smiley Face

✓ Published0🌍 Public

Last edited Mar 5, 2021

Created on Mar 5, 2021

This example shows a simplified yellow smiley face constructed from SVG shapes, centered on a 960×500 canvas. The face includes a large yellow circle for the head, two small circles for eyes, two red cheek circles, and a wide arc for the mouth, all rendered as separate SVG elements. Built with React and D3 v6, the code uses D3’s `arc()` generator to create the mouth path, while the head, eyes, and cheeks are plain SVG circles. The `index.js` file defines dimensions and offsets as constants, and renders the composition via ReactDOM, placing everything inside a single `<g>` transform.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley Face

This example shows a simple smiley face constructed from SVG shapes: a yellow circle for the head, two black circles for eyes, and an arc for the mouth, all centered on a 960x500 canvas. The visualization is built with React and D3 v6, using the `arc` generator from `d3-shape` to create the mouth path. SVG circles are positioned with explicit coordinates and transforms, while the mouth arc is defined by inner and outer radii with start and end angles. The code renders directly to SVG elements within a React component.

EElvan Gaunder

96% match

Loading thumbnail…

Fork of Smiley face part 12

This example shows a yellow smiley face drawn with SVG shapes, featuring two black eyes and a curved mouth. The face is centered on a 960x500 canvas, with the head as a yellow circle outlined in black, offset eye circles, and a mouth created using the d3 `arc` function. React renders the SVG elements, while D3 v6 computes the mouth’s path geometry. The code uses fixed pixel values for positioning and sizing, and the smiley is drawn entirely from code with no external data.

550f1AG

95% match

Loading thumbnail…

Fork of Smiley Face Part I

A yellow smiley face rendered with SVG appears at the center of a 960×500 canvas, showing a circle for the head, two black eyes at fixed offsets, and a semi-circular mouth drawn as an arc. The example uses React 18 to manage the component structure while leveraging D3 v7’s `arc` generator to create the mouth path with inner and outer radii. All shapes are positioned via a translated `<g>` group, with stroke styling applied directly to SVG circle elements.

Nnj889

95% match

Loading thumbnail…

Fork of Smiley Face 1

This example shows a simple smiley face built with React and SVG, rendered on a 960 by 500 pixel canvas. The face uses a yellow circle with a black stroke for the head, two white eyes with black outlines, and a curved mouth generated with the d3 `arc()` function. The code structures each element as a React component, applying constant offsets and radius values defined in variables. It uses ReactDOM to render the SVG into the page, with D3 v7 providing the arc path data for the mouth.

VVishnu Jayan

95% match

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a simple smiley face built from basic SVG shapes, with a yellow circle for the head, two black eyes, and an arc-shaped mouth. The face is centered on a 960 by 500 canvas, with all shapes positioned relative to the center using SVG group transformations. The code uses React to render the SVG elements and D3’s `arc` function to generate the mouth path from inner and outer radii and start and end angles. The head and eyes are drawn as plain SVG circles with explicit stroke and fill attributes.

LLai Yi Ohlsen

95% match

Loading thumbnail…

Fork of Smiley Face Part IV

This example shows a yellow smiley face drawn with SVG shapes, centered on a 960×500 canvas. It uses React components to render a background circle, two eye circles, and a mouth arc generated with D3’s `arc()` function. The face is positioned using SVG transforms, with stroke width, eye offsets, and mouth radius defined as constants. The code combines React’s declarative JSX with D3’s geometry helpers, loading d3.v5 and React 16.9 from CDNs, and renders everything as static SVG without interaction or animation.

Cchar0496

95% match

Loading thumbnail…

Fork of Fork of Smiley Face Part III

This example shows a yellow smiley face composed of SVG circles and an arc for the mouth, centered within a 960-by-500 viewport. The face uses React to render the SVG elements and D3’s `arc` function to generate the mouth path with specified inner and outer radii and angular span. Stroke widths and offsets for the eyes and mouth are defined as constants, with the entire drawing grouped and translated to the center of the canvas. The code relies on React 16.9 and D3 v5, using ReactDOM to mount the component.

Kkarumanchimanasa

94% match

Loading thumbnail…

Fork of Fork of Smiley Face Part 2

This example shows a yellow smiley face built from SVG shapes, with two black eyes and an upward-curving mouth drawn as an arc. The face is centered in a 960×500 viewport, using a circle for the head, smaller circles for the eyes, and a `d3.arc` path for the mouth. The code combines React 18 for rendering with D3 v7’s `arc` API, computing radius and offsets relative to the center, and applies a stroke to the outer circle. All elements are grouped and translated to the center for positioning.

DDaljeetSingh1320

94% match