Fork of Not so Smiley Face

100%

Fork of Not so Smiley Face

✓ Published1🌍 Public

Last edited Feb 19, 2022

Created on Feb 19, 2022

This example shows a stylized smiley face with an offset mouth, creating an incomplete or asymmetrical expression. Two black eyes are placed symmetrically above the center, while the yellow face has a black outline. The mouth is drawn as an arc that is shifted downward from the face’s center, making it appear misaligned. The code uses React to render SVG elements, with D3’s `arc` generator defining the mouth’s path based on specified radii and angles.

AI-generated description

Half way towards a Smiley Face

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Not so Smiley Face

This example draws a stylized smiley face using React and D3.js. A yellow circle with a black stroke forms the head, while two black circles serve as eyes, and an arc path creates a smile. The layout uses fixed coordinates and an SVG rendering approach, with the mouth generated using the D3 `arc()` API to define its inner and outer radii and angular range. The visualization demonstrates basic geometric composition in SVG without interactive or data-driven elements.

Rrohinikotha

93% match

Loading thumbnail…

Fork of Not so Smiley

This example shows a yellow circle with two black eyes and a curved mouth, creating a partial smiley face where the mouth arc is offset from the center. It is built with React 17 and D3 v6, using the `arc` function from D3 to generate the mouth path. The SVG is rendered with explicit width and height, and elements are positioned using transformation translations. The background circle, eyes, and mouth are drawn as separate SVG shapes, with the mouth placed in a distinct group at a specific coordinate rather than centered with the face.

Kkiruthiga1304

93% match

Loading thumbnail…

Fork of Not so Smiley Face

This example shows a partially completed smiley face composed of SVG shapes, with a yellow circular head, black eyes, and an arc-shaped mouth positioned below the face’s center. The visualization uses React to render the SVG elements, while D3’s `arc` generator creates the mouth path based on specified inner and outer radii and start/end angles. All geometry is computed from fixed dimensions, including the head radius, eye offset, and stroke width, with the mouth arc translated separately from the main face group.

Kkranthireddyskr

92% match

Loading thumbnail…

Fork of Not so Smiley Face

This example shows a simple smiley face built with React and D3, rendered as an SVG. A yellow circle serves as the head, with two black eyes positioned symmetrically, and a mouth drawn as a curved arc. The mouth is generated using the D3 `arc` function, which specifies inner and outer radii, a start angle, and an end angle to create the smile shape. The SVG is sized at 960 by 500 pixels, and the face is composed of basic circle and path elements positioned using SVG transforms.

HHarish.G

92% match

Loading thumbnail…

Fork of Not so Smiley Face

A stylized smiley face rendered as SVG via React, with a yellow circular head and black eyes offset symmetrically from the center. The mouth is drawn as an arc using the `d3.arc()` generator, positioned separately from the head group. The example demonstrates mixing React components with D3 v6 shape APIs, using inline SVG elements within a React component tree. Data is hardcoded as numeric constants for dimensions, with no external dataset.

RRupeshGandham

91% match

Loading thumbnail…

Fork of Smiley Face Part I

This example displays a partially drawn smiley face on a yellow circle, featuring two black eyes and an open mouth arc. The face is rendered as an SVG using React, with the mouth path generated by D3's `arc()` generator, which defines inner and outer radii along with start and end angles. The circle and eye elements are positioned using absolute coordinates relative to the center. The visualization relies on D3 v7 and React 17, rendering everything client-side into a 960 by 500 pixel canvas.

Sskambhore04

91% match

Loading thumbnail…

Fork of Fork of Let's Make a Face Part I

This example uses SVG to draw a stylized smiley face with yellow circular head, black outline, two eyes, and a mouth arc. Built with React and D3, it computes the face geometry through variables for center coordinates, offset distances, and radii. The D3 `arc` API constructs the mouth path by defining inner and outer radius along with start and end angles. All elements are positioned relative to a translated center coordinate system.

Bbhavani44

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

91% match