Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Feb 28, 2021

Created on Feb 27, 2021

This example builds a simple smiley face entirely with SVG shapes rendered through React. It uses D3’s `arc` generator to create the mouth path, while the face, eyes, and stroke are drawn as basic `circle` elements. The face is centered via a `g` transform, with eye positions placed symmetrically around the center. The code defines all geometric constants, including radii, offsets, and stroke width, to produce a static yellow head with black outline and two empty eyes.

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 simple smiley face built with SVG primitives in a React component, using D3’s `arc` generator to create a full circular mouth. The face consists of a yellow outer circle with a black stroke, two black eye circles positioned symmetrically, and the mouth path rendered below the eyes. The code explicitly sets width, height, center coordinates, and offsets for the eyes, demonstrating how fixed viewport dimensions and spacing constants drive the layout. It uses React 16.9 and D3 v7, with the SVG rendered directly into the DOM.

CCamila Valdivia

97% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built with React and D3, rendered as SVG. It draws a yellow circle with a black stroke, two eyes, and a curved mouth using the `d3.arc()` generator. The face is centered via a `<g>` transform, with eye and mouth positions computed from offset constants. The code uses React 16.9 for DOM rendering and D3 v5 for the arc path calculation, with all shapes drawn declaratively as SVG elements.

Aatqlong

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

This example shows a stylized smiley face built from simple SVG shapes, with eyes, eyebrows, and a mouth arranged symmetrically around a yellow circular head. The face is rendered using React components that compute arc paths with `d3.arc`, specifying inner and outer radii and start/end angles for the eyebrows and mouth. The SVG is centered via a group transformation, with hardcoded offsets for eye placement and a black outline drawn with a stroke-width attribute.

Bbstillword

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example draws a minimalist smiley face from geometric primitives in an SVG rendered with React. A yellow circle forms the head, two smaller circles serve as eyes, and a mouth is created using D3’s `arc()` path generator with inner and outer radii. The code uses React for component rendering, D3 v7 for the arc path, and positions elements around a central translation from absolute SVG coordinates. The face is static, with no interaction or animation.

DDawit Merid

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a yellow smiley face built with overlapping SVG shapes: a large circle for the head, two smaller circles for eyes, and an arc path for a smile. The code uses React to render the SVG elements and D3’s `arc()` generator to create the mouth with specified inner and outer radii and angles. Position values are computed from fixed dimensions, and a `stroke-width` of 20 outlines the head in black. The face is centered via a `<g>` transform, with no interactive or animated behavior.

Nnoodlemakerpo

96% match

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

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