Skip to main content
SimilarExport ZIP
100%

Let's Make a Face Part II

✓ Published1🌍 Public
AAlexa Cristina
Last edited Feb 2, 2020
Created on Jan 16, 2020
Forked from Hello HTML

This example creates a simple SVG face using React and D3’s `arc` function. The face consists of a yellow circle head with a black stroke, two black eye circles, and a mouth drawn as an arc path. The mouth uses `d3.arc()` with inner and outer radii and angled start and end points. All shapes are positioned relative to the center of a 960 by 500 viewport.

AI-generated description

Half way towards making a svg face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's Make a Face Part 3

This example displays a stylized face using React and D3’s `arc` generator. The SVG shows a yellow semicircular mouth drawn with a filled arc, and a single black-outlined circle for an eye, positioned using fixed offsets. Built with React 17 and D3 v7, the code renders the mouth path via `arc().innerRadius(0).outerRadius(250)` and places the eye with plain SVG circle properties, relying on literal coordinate values rather than data-driven scales. The face remains incomplete, showing only the mouth and one eye.

Kkeitheade
93% match
Loading thumbnail…

Lets Make a Face: Part II

This example shows a smiling face built from basic SVG shapes: a yellow circle for the head, two smaller circles for eyes, and a curved path for the mouth. The face is rendered using React components that return an SVG element, with positions and radii defined as constants. D3’s `arc` function generates the mouth’s path by specifying inner and outer radii along with start and end angles. The visualization demonstrates how React and D3 can be combined to create simple, declarative graphics in an SVG canvas.

Ttjcocucci
93% match
Loading thumbnail…

let's make a face part I & II

This example shows a simple cartoon face built from SVG shapes, with a yellow circular background, two black eyes, and a curved mouth arc. The face is centered within a 960×500 viewport, demonstrating how React components can render D3-generated paths. The code uses React’s `ReactDOM.render` to mount the SVG, and the mouth is created with D3’s `arc` generator, which specifies inner and outer radii and angular extents. Stroke width, eye offsets, and radii are defined as constants, making the face’s proportions easy to adjust.

WWilliam Engelen
93% match
Loading thumbnail…

Let's Make a Face Part IV

This example uses React to render a smiling face as an SVG composed of D3-generated arcs and primitive shapes. It defines a yellow background circle, black eyes, white pupils, pink blush ellipses, and a mouth path created with `d3.arc` using specified inner and outer radii and angles. The code positions elements relative to the center using offsets, with the `arc()` API generating the curved mouth geometry. All shapes are hardcoded with fixed dimensions and coordinates, not driven by external data.

Wweisbroda@rfa.org
92% match
Loading thumbnail…

Let's Make a Face Part III

A smiling face rendered with SVG, built using React and D3. The code draws a yellow circle with a black stroke, two black eyes, and a mouth created via the `d3.arc()` generator with specified inner and outer radii and angular range. React components define the SVG elements, while D3’s arc path computes the mouth shape. The face is centered using SVG group transformations.

PPolina Sysoeva
92% match
Loading thumbnail…

Let's Make a Face Part III (React & D3)

This interactive SVG depicts a cheerful yellow face composed of simple geometric shapes: a large circle for the head, two smaller circles for eyes, and an arc for the mouth. Built with React and D3 v6, the code leverages ReactDOM to render the SVG and D3’s `arc` API to generate the mouth path with specified inner and outer radii and angle ranges. All coordinates are computed relative to the center, making the face’s layout responsive to the 960x500 viewport.

NNikhil Reddy Manda
91% match
Loading thumbnail…

Let's Make a Face Part II

This example renders a yellow smiley face built from primitive SVG shapes, including circles for the face and eyes, an arc for the mouth, a polygon nose, and two lines for eyebrows. The React component composes these elements inside an SVG canvas, using a dynamically generated path from the d3.arc method for the mouth. All geometry is calculated from fixed constants, and the rendering uses React’s declarative JSX syntax with D3 v5 for the arc generator, producing a static two-dimensional vector illustration.

MManuel Häußermann
91% match
Loading thumbnail…

Let's Make a Face Part III

This example renders a yellow smiley face with black-outlined circular features using React and SVG. The face, eyes, and mouth are drawn with basic shapes: two `circle` elements for the eyes and a `path` generated by the `d3.arc()` API for the mouth. The D3 arc’s inner and outer radii, along with start and end angles, define a half-circle smile. The layout uses fixed coordinates for positioning within an SVG canvas, demonstrating a simple composition of geometric primitives.

Eeladabramovich
91% match