Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Mar 6, 2021

Created on Mar 6, 2021

A face rendered as a yellow SVG circle on a black outline, with two fixed black eyes and a mouth drawn as a thick arc, is centered on a 960 by 500 canvas. The example demonstrates basic D3 shape construction in a React component, using the D3 `arc` function to create the smile and manual SVG `<circle>` elements for the face and eyes. The drawing is produced with declarative SVG attributes and D3’s arc path generator, showing how geometry can be composed in a browser-based visualization.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part I

A stylized face composed of geometric shapes is rendered in SVG. A yellow circle forms the head, with two black circles as eyes and a D3 arc function (`d3.arc`) generating a smile-shaped mouth path. The example is a React application using D3 v6 for the arc path generation, with SVG elements composed through reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`. The face’s features—eye offset, radius, mouth width, and stroke—are parameterized, and the final layout is centered at a calculated midpoint within a 960×500 viewport.

Uumgi

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a simple, stylized face built from layered SVG shapes: a yellow circle for the head, two light-blue eyes with black pupils, and a red arc for the mouth. The rendering is driven by a React component hierarchy, with each facial feature defined as a separate reusable component. The code uses D3’s `arc` generator to create the mouth’s curved path, while all positioning relies on SVG attributes within a centered group. The face is hardcoded at 600 by 500 pixels with no interactive behavior or external data source.

SSistema Frenos

95% 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

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a stylized face built from D3.js SVG shapes within a React application. The face consists of a yellow circle for the head, black circles for eyes, and D3 arc paths for the mouth, nose, and eyelid-like accents, all positioned using SVG group transforms. The code uses the `arc` generator from D3 v6 to define the mouth, nose, and eye arcs, while React renders the SVG elements. A CSS class applies red fill to the eye arcs, creating a subtle color contrast against the black strokes.

Tthedatacurious

95% 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

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a yellow smiley face using React and D3’s `arc` generator for the mouth and one eye, while the other eye is omitted, leaving the face halfway complete. The face is drawn as an SVG circle with a thick black stroke, centered at a fixed width and height. The mouth and eye arcs are positioned relative to the center using D3’s `arc` with specified inner and outer radii and angles. The code uses `d3.arc`, `ReactDOM.render`, and SVG elements, with fixed numeric constants for layout.

Ssz3g12

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A cartoon face is drawn using SVG circles and an arc path. The face has a yellow circular head with a black outline, two black eyes positioned with vertical offsets, and a smile formed by a thick arc. The visualization is built with React, utilizing the D3.js `arc` API to generate the mouth path. The SVG canvas is 960 by 500 pixels, and all facial features are positioned relative to the center of the canvas.

SSreekar Reddy

94% match

Loading thumbnail…

Fork of Let's Make a Face Part V

This example renders a yellow smiley face on a black-outlined circle, centered within an SVG canvas. It uses React components to structure the face, with D3 v7’s `arc` function generating the mouth path from specified inner/outer radii and angles. The code explicitly positions two eye circles via offset coordinates and applies a stroke width to the background circle, resulting in a static, modular composition. The rendering is SVG-based, with React managing the component hierarchy and D3 handling the arc geometry.

PPakapone Supavarn

94% match