Fork of Smiley Face Part II

100%

Fork of Smiley Face Part II

✓ Published0🌍 Public

Last edited Dec 27, 2021

Created on Dec 27, 2021

A yellow smiley face is drawn on an SVG canvas, centered with a black-stroked background circle, two eyes, and a curved mouth arc. The example uses React components for `BackgroundCircle` and `Eyes`, which are rendered into an `<svg>` element. D3's `arc` API defines the mouth path with an inner radius, outer radius, and angular range between π/2 and 3π/2. The visualization demonstrates a simple, static composition built from modular React code and D3 shape generation, with all dimensions hardcoded in the script.

AI-generated description

A bare minimum HTML page.

Half way towards a smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley Face Part II

This example displays a classic smiley face rendered as an SVG graphic, with a yellow circular head, two black eyes, and a curved mouth drawn using an arc path. The visualization is built with React and D3 v7, using the `arc` function to generate the mouth shape from specified inner and outer radii. The face is centered on the screen and dynamically sized based on the browser window dimensions, with all elements positioned relative to the center point. The code defines constants for eye offset, radius, and stroke width to control the facial features.

JJasmine Ye Han

96% match

Loading thumbnail…

Fork of Smiley Face Part 2

This example shows a smiley face rendered as a yellow circle with two black eyes and a curved mouth, all drawn using SVG shapes. The face is centered on a 960-by-500 canvas, with the mouth created using the `d3.arc()` API to generate a path with inner and outer radii. React manages the component structure, while D3 v7 handles the geometric calculations for the arc. The visualization uses fixed numeric values for positioning, including eye offsets and radii, with no interactive behavior or data binding.

DDan Bo

96% match

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a yellow smiley face rendered as an SVG graphic, with two eyes and a curved mouth positioned symmetrically around a central point. It demonstrates a React-based approach to SVG visualization using D3’s `arc` generator to create the mouth path. The `BackgroundCircle` component draws the face’s yellow circle with a black stroke, while the eyes are simple `<circle>` elements positioned via fixed offsets. Rendering uses React 16.9 and D3 v5, with all shapes placed inside a `<g>` transform to center the composition.

Rrstrauss127

96% match

Loading thumbnail…

Fork of Smiley Face Part 3

A yellow smiley face is drawn in SVG, centered on a 960 by 500 canvas. The face includes two black eyes and a mouth arc, all positioned relative to a central group transform. The example demonstrates building a static SVG scene with React components and D3’s `arc` generator, using explicit circle elements for the face and eyes and a `path` for the mouth. The `BackgroundCircle` component renders the head with a yellow fill and black stroke, while the mouth is created with `d3.arc` using inner and outer radii and fixed start and end angles. The code imports React, ReactDOM, and `arc` from D3 v6.

Hhukbk

96% match

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a stylized smiley face centered in an SVG canvas, composed of a yellow background circle, two black eyes, and a D3-generated arc for the mouth. The React components `BackgroundCircle`, `Eyes`, and `Mouth` each render simple SVG shapes, with the mouth path created using the D3 `arc()` API. The face is positioned via an SVG `<g>` transform, and the code uses React 16 and D3 v5 to assemble the static visualization, with dimensions and offsets defined as constants. The final output is a fixed, non-interactive SVG graphic.

AAoibhinnRed

96% match

Loading thumbnail…

Fork of Smiley Face Part III

A smiling face rendered as a yellow SVG circle with black stroke, two dark eyes, and an arc-shaped mouth, centered on a 960 by 500 canvas. Built with React components and D3 v5, the visualization uses the `arc` generator from D3 to define the mouth path, while the background and eyes are simple `<circle>` elements. All shapes are positioned via a shared coordinate system translated to the canvas center, with props for radius, stroke width, and offsets.

JJasmine Ye Han

96% match

Loading thumbnail…

Fork of Smiley Face Part 3

A smiley face rendered as a yellow circle with two black eyes and a curved mouth sits centered in an SVG canvas. The face is built declaratively with React components, including a reusable `BackgroundCircle` and a custom `Eyes` component, while D3’s `arc` generates the mouth path with specified inner and outer radii and angular range. All geometric values like radius, stroke width, and eye offsets are defined as constants, and the SVG group is translated to the canvas center.

Hhukbk

96% match

Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face is rendered using React components and SVG shapes, with eyes positioned by offset coordinates and a mouth drawn as an arc path. The code uses D3's `arc` generator to create the mouth's annular sector, while the background circle is defined by a radius and stroke width. The SVG canvas fills the browser window, with all elements centered via a transform. React and ReactDOM handle component rendering, and D3 v5 provides the arc calculation.

BBrian Blakely

96% match