Fork of Not so Smiley Face

100%

Fork of Not so Smiley Face

✓ Published0🌍 Public

Last edited May 18, 2021

Created on May 18, 2021

A stylized smiley face rendered in SVG, with a red circular head, two black eyes, and a downward-opening mouth arc that makes the expression look "not so smiley." The face is positioned at the center of a 960x500 viewport, while the mouth is drawn separately from a fixed coordinate. Built with React for component structure and D3’s `arc` generator to compute the mouth path, the code defines the head radius, eye offsets, and mouth dimensions as constants. The visualization demonstrates combining React’s declarative JSX with D3’s geometry utilities for custom SVG drawing.

AI-generated description

Half way towards a Smiley Face

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Fork of Smiley Face

This example shows a stylized smiley face rendered as an SVG graphic. The face is composed of a red circle for the head, two smaller circles for eyes, and a curved mouth path generated with D3’s `arc` function using specified inner and outer radii and angular ranges. The visualization is built with React components, with D3 v5 providing the arc generator, while React manages the SVG element structure and props. The code uses fixed numeric constants for positioning, radii, and stroke widths, resulting in a static, declarative scene.

Aarcothanmukha

92% match

Loading thumbnail…

Fork of Smiley Face Part #2

This example shows a stylized smiley face built with SVG, featuring an orange circular head, two black eyes, a red nose, and a mouth drawn as a thick arc. The face is centered using a D3 arc generator to create the mouth path, while React manages the component structure. The visualization uses D3 v7 and React 17, with all elements positioned relative to the center of a 960x500 SVG canvas.

Jjordancampbell23

92% match

Loading thumbnail…

Fork of Smily Face

This visualization displays a classic smiley face composed of a yellow circular head, two dark eyes, and a curved mouth, all rendered as SVG shapes. Built with React and D3 version 6, the face is centered on a 960x500 canvas. The code uses D3's `arc` generator to construct the mouth path, while React components define the circle elements. The implementation relies on React DOM for rendering and D3 for path generation, with dimensions controlled through variables like `eyeOffsetX`, `eyeRadius`, and `mouthArc`.

Aanmarsan

92% match

Loading thumbnail…

Fork of Smiley Face Part I

A smiley face rendered in SVG shows a black circle head with two white eyes and a white mouth arc, drawn with React and D3. The code uses D3’s `arc()` function to generate the mouth path, with explicit angles defining a half-circle shape, while the eyes are simple circles positioned via SVG coordinates. The visualization is purely static, demonstrating basic geometric composition and D3 shape generation within a React component. The rendering uses hardcoded dimensions and offsets, with no data loading or interactivity.

YYbg99

92% match

Loading thumbnail…

Fork of Smiley Face Part III

This visualization displays a stylized smiley face rendered as an SVG graphic. The face is built from three circles for the head and eyes, plus an arc-generated mouth, all positioned using React JSX and D3’s `arc()` generator. The code uses React 16.9 to create the SVG elements, while D3 v5’s `arc` API computes the mouth path. A yellow face with black outlines appears, though the eyes are filled black and the head uses a pink fill. The rendering relies on absolute width and height values (960 by 500) and a centered coordinate system.

Rrammy81

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

91% match

Loading thumbnail…

Fork of Smiley Face Part III

An SVG smiley face is drawn using React 16.9 and D3 v5, with a green circular head, black stroke, two filled eye circles, and an arc for the mouth. The `arc` generator from `d3` creates the mouth path with start and end angles. Coordinates and dimensions are computed from a fixed 960×500 viewport, with all elements positioned relative to the center using a translated `<g>` group. React renders the SVG components declaratively, while D3 provides the arc path geometry.

Ook-ey

91% match