Fork of Smiley Face

100%

Fork of Smiley Face

✓ Published0🌍 Public

Last edited Mar 1, 2021

Created on Mar 1, 2021

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.

AI-generated description

Working on a Smiley Face

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley face part 2

This example shows a smiley face built from SVG shapes, with a yellow circle for the head, two black eyes, and a curved mouth drawn as an arc. The face is centered in a 960x500 viewport, with the mouth rendered using D3’s `arc()` generator with specified inner and outer radii and start/end angles. The visualization is implemented in React, using ReactDOM to render the SVG tree, while D3 v7 provides the arc path calculation. Each element is positioned via SVG coordinates and a translate transform.

Aacampbellblack

96% match

Loading thumbnail…

Fork of Smiley face part 1

This example shows a cheerful smiley face constructed from basic SVG shapes: a yellow circle head with a black stroke, two circular eyes, and a mouth drawn as an arc. The React component renders an SVG canvas, while D3’s `arc()` generator computes the mouth path using inner and outer radii and start/end angles. Hard-coded constants define dimensions and offsets for each facial feature, centering the composition within a fixed 960×500 viewport. The visualization demonstrates a simple, declarative approach to combining React with D3 for static SVG drawing.

VVidushi00412

96% 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

96% 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

96% match

Loading thumbnail…

Fork of Smiley Face Part I

This visualization displays a simple smiley face drawn with SVG shapes, positioned at the center of a 960x500 canvas. It features a yellow circle with a black stroke, two black eyes offset symmetrically, and a mouth created using d3.arc() with specified inner and outer radii and angle ranges. The React component renders the SVG elements directly, while D3’s arc generator computes the mouth path. Input values for dimensions, offsets, and radii are hardcoded as constants. The example demonstrates basic geometric composition using React and D3 v7 without interactivity or data sources.

AAlainKuiete

96% match

Loading thumbnail…

Fork of My Smiley Face

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.

MMarina Shemesh

96% match

Loading thumbnail…

Fork of Smiley face part 1

This example shows a smiley face constructed with SVG shapes in a React application, rendered through D3’s `arc` generator for the mouth and basic circle elements for the face, eyes, and highlights. The face is centered using a group transform, with yellow fill and black stroke for the head, while the eyes include small white pupils for detail. The code relies on React for component rendering, D3 v6’s `arc` API to compute the mouth path, and SVG elements for all visual output. The composition uses fixed dimensions and offsets to position features symmetrically.

SSilvaYH

96% match

Loading thumbnail…

Fork of Smiley face part 1

A yellow circle with a black stroke forms the head of a smiley face, with two solid black circles for eyes and a thick arc for the mouth. The example demonstrates how to compose SVG shapes using React components and D3’s `arc()` generator to calculate the mouth path. It renders the face centered in a 960 by 500 SVG canvas, using fixed numeric values for eye offset, radius, and mouth dimensions. The code uses React 16.7 with the `ReactDOM.render` method, D3 v6’s `arc` function, and JSX within an SVG element.

Eemelrix

96% match