Fork of My smiley (experiment)

100%

Fork of My smiley (experiment)

✓ Published1🌍 Public

Last edited May 31, 2021

Created on May 31, 2021

This example renders a stylized smiley face using React and D3’s `arc` generator for the mouth, with SVG circles, ellipses, and lines for the eyes, nose, and eyebrows. The face is centered in a 960×500 viewport, and the code hardcodes all geometry—no external data is loaded. A yellow circle with a thick black stroke forms the head, while white and black eye details, a red nose, and an arc-shaped smile complete the figure. The React component returns the SVG directly, and D3’s `arc` computes the mouth path from prescribed angles and radii.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Smily Face Part III

This example renders a classic smiley face using React and D3’s `arc` API to draw the mouth as a path. The SVG shows a yellow circle with black strokes for the face outline, two filled eye circles, and a semicircular mouth created from an arc with inner and outer radii. The fixed dimensions and centered transform position the elements on a 960×500 canvas, with no interactivity or data binding. The code imports `arc` from D3 v5 and uses React components to structure the SVG hierarchy.

TTim Martinez

93% match

Loading thumbnail…

Fork of smiley

This example renders a stylized smiley face in SVG using React and D3 v7. The face includes a brown-stroked orange circle, white eyes with black pupils, pink cheeks, brown ears and hair-like line segments, and a black arc mouth. D3’s `arc` generator creates the mouth and eye arcs, while React JSX defines the circular and elliptical shapes. All elements are positioned relative to the center of an 840×455 viewport.

JJasvitha Allamsetty

93% match

Loading thumbnail…

Fork of SmileFace

This example uses React and D3 v7 to draw a smiley face in an SVG. The face consists of a yellow circle for the head with a black stroke, two black circles for eyes, and an arc for the mouth. D3’s `arc` generator creates the mouth path, while fixed pixel offsets and radius values position all elements relative to the center. The SVG is rendered by a React component using `ReactDOM.render`, with the figure centered in a 960×500 viewport.

NNenad Skrbic

92% match

Loading thumbnail…

Fork of Smiley Part 3

A stylized smiley face rendered in SVG uses React components and D3’s `arc` generator for the mouth. The face comprises a yellow background circle, two black eyes positioned symmetrically, and a D3-generated mouth path with a fixed opening. D3 v7 provides the arc geometry, while React manages the component structure and JSX elements, with all shapes centered via a transform.

KKimberly Hager

92% match

Loading thumbnail…

Fork of smiley face assignment

This example renders a classic smiley face using React and D3’s `arc` API. It draws a yellow circle with a black stroke, two eye circles at fixed offsets, and a mouth path generated by `d3.arc` with a specified inner and outer radius and start/end angles. The SVG is centered on a 960×500 canvas, with all shapes positioned via a translated `<g>` group. The code relies on ReactDOM to mount the component and D3 v7 for the arc geometry, producing a static, data-free vector graphic.

UUnknown-bot-sus

92% match

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a smiley face using React components and SVG primitives, with a yellow circle for the head, two black eyes, and a curved mouth. The mouth is generated with the D3 `arc()` generator, which defines an annular sector path based on inner and outer radii and start/end angles. The face is centered within a 960×500 viewport, and all elements are positioned via a `<g>` transform. The code imports the `arc` function from D3 v7 and uses React 16.9 for component structure, while the SVG is drawn directly in JSX.

Pplusbeauxjours

92% match

Loading thumbnail…

Fork of Smiley Face Part I

This example renders a simple smiley face using React and D3’s `arc()` generator. It shows a yellow circle with black stroke, two dark eye circles, and a mouth drawn as a curved path, all centered via SVG groups. The visualization is purely decorative, using hardcoded coordinates and dimensions rather than external data. The code leverages React’s `ReactDOM.render` for DOM updates and D3 v6’s `arc()` to compute the mouth’s path, with SVG elements for all shapes.

Eendomo

92% match

Loading thumbnail…

Fork of Smile

This example renders a classic smiley face using React and D3. It shows a yellow circle with black stroke as the head, two black eyes, and a mouth drawn as a semicircular arc. The visualization uses React for component structure and SVG rendering, while D3’s `d3.arc()` generates the mouth path based on specified inner and outer radii and angles. All elements are positioned relative to the center of the SVG canvas.

KKIRRAN P L

92% match