Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Sep 15, 2022

Created on Sep 15, 2022

This example builds a stylized smiley face in SVG using React and D3.js v7. The face is composed of D3 arc generators for the mouth, nose, and tongue, alongside SVG circles and lines for eyes, eyebrows, and limbs. A pink circle with a green stroke forms the head, centered within a 960 by 500 viewport. The code demonstrates composing React components with D3’s arc API and SVG primitives, using static coordinates and no data binding.

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 renders a stylized smiley face using React and D3.js version 7, composed of SVG circles and a path. The face features a gradient-filled head with a drop shadow, two eyes with pink offset shadows, and a mouth drawn using a D3 arc generator. The code defines all geometry through hardcoded constants rather than data, with the arc’s inner radius, outer radius, and angle ranges set explicitly to form the smile. The rendering is driven by React’s declarative component model, which outputs the SVG directly.

CCesar R Castillo

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 shows a stylized smiley face built from three reusable SVG components: a yellow background circle, a pair of eyes, and a mouth drawn as an arc. The face is positioned at the center of a 1060×500 SVG canvas using React components that receive geometry props for radii and offsets. The mouth path is generated with d3.arc(), while BackgroundCircle and Eyes render plain SVG circle elements. React 16.9 and D3 v7 work together, with all drawing handled declaratively through JSX.

Rrishyossarian

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from SVG shapes within a React component, using D3.js to generate the mouth arc. A yellow circle with a thick black stroke forms the head, while two black circles serve as eyes positioned symmetrically around the center. The mouth is created with the D3 `arc` function, which defines an inner and outer radius plus start and end angles to produce a semicircular path. The code uses React 17 and D3 v7, rendering everything to a fixed 960×500 SVG canvas.

SSrijan Nayak

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example builds a smiley face step-by-step, showing how primitive SVG shapes—circles for the head, eyes, and a mouth arc—can be composed into a recognizable figure. The code uses React to render JSX elements and D3’s `arc()` generator to create the mouth path, setting inner and outer radii and angles. Positions are calculated relative to the SVG center, with fixed offsets for the eyes and stroke width. The rendering is static, with no interaction or animation, and the mouth arc’s unusual radii suggest a work-in-progress.

ZZach2826

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a stylized smiley face built with React and D3 v7, rendered as an SVG. It draws a yellow circle for the head, two black circles for eyes, and a mouth created using the D3 `arc` generator with specified radii and angles. The layout uses absolute positioning via `centerX`, `centerY`, and offset constants, while the SVG `circle` and `path` elements are generated declaratively through React components. The code demonstrates integration of D3’s shape utilities within a React rendering pipeline.

Bbhavani44

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A stylized smiley face rendered in SVG, built with React and D3 v7, centers a yellow circle with a black stroke on a 960 by 500 canvas. The face uses D3's `arc()` generator to draw a mouth as a thick arc, while two offset circles serve as eyes. React manages the component structure, and D3 calculates the mouth’s path geometry based on specified radius and angle values. The example demonstrates composing SVG primitives with D3 shape generators inside a React render tree.

Uubik-valis

95% match

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

95% match