Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Sep 20, 2021

Created on Sep 20, 2021

This is a static smiley face built from SVG shapes, drawn in yellow with a black outline. The face features two circular eyes and a semicircular mouth, all positioned relative to the center of a 960 by 500 canvas. The code uses React to render the SVG and D3's `arc` API to generate the mouth path. Key parameters like eye offsets, radius, and stroke width are defined as constants, while all shapes are grouped and translated to the center.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face built from SVG shapes, with a yellow circular head, two black eyes, and a curved mouth. The face is centered in a 960x500 viewport using React 17 and D3 v6. The code uses D3’s `arc` generator to create the mouth path, while circles are drawn directly via SVG elements. All shapes are positioned with coordinates transformed from the center, and stroke styling is applied to the head circle.

Aantanta28

97% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow smiley face is drawn as an SVG, with two black eyes and a mouth shaped as a partial arc, all centered on a 960 by 500 canvas. The face is built using React and D3’s `arc` generator, which defines the mouth’s inner and outer radii and angular range. The head is a yellow circle with a black stroke, and the eyes are positioned using fixed offsets and radius values, with the entire group translated to the canvas center.

Aalibekvelikiy

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A stylized smiley face rendered with React and D3 v6, centered within an SVG canvas. The face uses a yellow circle for the head, two black circles for eyes, and an arc-generated mouth. The mouth is drawn using D3's `arc()` generator, with inner and outer radii and angular extents defined in the code. The SVG elements are positioned via a translated `<g>` group, and styling is applied through inline attributes like `stroke-width`.

AAlbatrus

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A stylized smiley face rendered with React and D3 v6, built from basic SVG shapes. The face features a yellow circle, two black eyes, and a mouth drawn using D3's `arc()` generator. A React component computes layout constants for the center, eye offsets, and dimensions, then transforms an SVG group to position the elements. The mouth arc uses inner and outer radii with a half-rotation, while the face circle is sized relative to the viewport height and stroke width.

VVladimirSharov

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a yellow smiley face built from SVG shapes, with two black eyes and a curved mouth, centered on a 960-by-500 canvas. It renders the face using React components, where each circle and the mouth path are defined as JSX elements inside an SVG. The mouth is generated with the `d3.arc()` generator, specifying inner and outer radii and start and end angles, while the eyes use hardcoded offsets from the center. The code relies on React for structure and d3 for path generation, with all geometry computed from fixed variables.

PPinzhi

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face constructed from nested SVG shapes, with a yellow circular head, two eyes, and a curved mouth arc, all centered on a 960×500 canvas. The face is built using React to render SVG elements, while D3’s `arc` generator creates the mouth path from angular start and end positions. Position and size values are defined as constants and applied via coordinate transforms. The code demonstrates a minimal integration of React and D3 for static geometric visualization.

SSimone

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A smiley face is drawn with SVG shapes, featuring a yellow circular head, black stroke, two eyes, and a mouth arc. The face is centered using a transform, with eyes positioned via offset coordinates and a mouth generated using the D3 `arc` function. React manages the SVG markup, while D3 provides the arc path for the smile. The code demonstrates combining React's declarative rendering with D3's geometry utilities to create simple vector illustrations.

EErica Rabinovich

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A React component renders a stylized smiley face using SVG, with a yellow background circle, two black eyes, and a curved mouth drawn from an arc. The face is centered on a 960 by 500 canvas, with fixed eye offsets and mouth dimensions passed as props. The code uses React 16.7 and D3 v5's `arc` generator to create the mouth path, while the background and eyes are simple SVG circle elements.

Mmisstong

96% match