Fork of Smiley Face Part II

100%

Fork of Smiley Face Part II

✓ Published0🌍 Public

Last edited May 14, 2021

Created on May 14, 2021

A smiley face built from basic SVG shapes centers itself in the browser viewport, with a yellow head, black outline, and two solid eyes, all inside a React component. Below the eyes, a mouth is drawn as an arcusing D3's `arc` generator, which computes a path between configured inner and outer radii and angles. The entire face is rendered as SVG, with dimensions and positions derived from `window.innerWidth` and `window.innerHeight`, and the code uses ReactDOM to mount the component into a `div#root`.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley Face Part II

A smiling face rendered in SVG fills the browser window, with a yellow circle for the head, two black eyes, and a curved mouth. The React component uses D3's `arc` generator to create the mouth path, computing its inner and outer radii and start and end angles. Positioning and layout are driven by `window.innerWidth` and `window.innerHeight`. The SVG shapes are drawn inside a centered `<g>` transform, with hardcoded offsets for eyes and stroke width defining the face's proportions.

AAvonlea Fisher

95% match

Loading thumbnail…

Fork of Fork of Smiley Face Part II

A yellow smiley face spans the full browser window, rendered with React components that generate SVG circles and a D3-generated mouth path. The face is built from separate SVG elements: a large yellow circle with a black stroke, two eyes with white highlights, and a mouth drawn using d3.arc with inner and outer radii for thickness. The layout positions all features relative to the viewport center. The example uses React 16.9 for component structure and d3.v7 for the arc shape, with no external data source.

PPatrick Byron Gattoc

95% match

Loading thumbnail…

Fork of Smiley Face Part II

A React-rendered smiley face fills the browser window, with a yellow circle for the head, two black eyes, and a wide smile. The SVG shapes are positioned relative to the window’s center, and the mouth is drawn using the D3 `arc` generator with specified inner and outer radii and angular extents. The code uses React 16.9 to manage the component, and D3 v7 solely for the `arc` path calculation. All elements are styled inline via SVG attributes, with the head’s radius based on the window height.

MMarshall Ruse

95% match

Loading thumbnail…

Fork of Smiley Face Part II

A large, yellow smiley face fills the browser window, drawn with SVG in a React app. The face is centered, with two black eye circles and a thick, arc-shaped mouth created using d3’s `arc` generator. The code uses ReactDOM to render the component, and d3.v6 for the path geometry, with dimensions derived from `window.innerWidth` and `window.innerHeight`.

CCbrc27

95% match

Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face rendered with React and SVG fills the browser window, with its size and position calculated from the viewport dimensions. The face uses D3’s `arc` generator to create the mouth, while the head and eyes are simple SVG circles with fixed offsets and radii. The component leverages React’s declarative JSX to define the SVG structure, and D3 v7 provides the path computation for the mouth arc, showing how the two libraries combine for interactive, data-driven graphics.

CcoldPen

95% match

Loading thumbnail…

Fork of Smiley Face Part II

A smiley face is rendered as a full-screen SVG graphic using React components and D3's arc generator. The face is centered within the viewport with dimensions derived from the browser window, featuring a yellow circular head, two offset black eyes, and a curved mouth. The code leverages `d3.arc` to construct the mouth path with specified inner and outer radii and angular ranges. React manages the SVG elements, while D3 version 7 supplies the arc geometry, producing a static, responsive illustration.

OOleksii

95% match

Loading thumbnail…

Fork of Smiley Face Part II

A smiling face is drawn as a yellow circle with black outline, two dark eyes, and an arc-shaped mouth, all positioned at the center of the browser window. The visualization is built with React components that render SVG elements, using d3’s `arc` generator to create the mouth path. The background circle, eyes, and mouth are each defined as separate React functions, with the main SVG sized to the full viewport dimensions and all shapes translated to the center.

SSlodgar

95% match

Loading thumbnail…

Fork of Smiley Face Part II

A React and D3 smiley face fills the browser window as a yellow circle with two black eyes and a curved mouth drawn from the D3 arc generator. The app uses React 16.9 to render SVG elements, with the face centered dynamically based on window dimensions via `window.innerWidth` and `window.innerHeight`. D3 v5’s `arc()` defines the mouth path, while the face and eyes are plain SVG circles with fixed offsets and radii. The mouth radius, eye positions, and stroke width are all hard-coded constants, presenting a static face with no interactivity. The entire SVG is mounted into the DOM via `ReactDOM.render`.

JJuan Raul de la Guardia

94% match