Fork of Let's Make a Face Part II

100%

Fork of Let's Make a Face Part II

✓ Published0🌍 Public

Last edited Jun 10, 2021

Created on May 24, 2021

This interactive React and D3.js example displays a smiley face composed of SVG circles, including a large yellow face, two eyes, and a mouth arc. A separate circle tracks the mouse position across the canvas, its radius dynamically recalculated based on the cursor’s distance from the center. The code uses `useState` for mouse tracking and `d3.arc` to render the mouth. The face’s eyes and main circle are defined as reusable React components, with the overall layout fixed at 1000 by 500 pixels.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part II

This visualization displays a smiley face rendered as an SVG graphic, centered and scaled to fit the browser window. The face consists of a yellow circle with a black outline, two black eye circles, and a mouth drawn as an arc path. The code uses React for component composition and D3’s `arc` function to generate the mouth’s curved path. All elements are positioned using computed offsets and radii relative to the viewport dimensions, with the entire face grouped and translated to the center of the screen.

Nn7n305a

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a smiley face using React and D3.js, displaying a yellow circle with two eyes and a curved mouth on an SVG canvas. The face is centered within a 960x500 viewport, with the mouth drawn using D3’s `arc` function to create a partial ring. The code defines geometric constants for positioning and sizing, then constructs the SVG elements through React’s declarative syntax, relying on the `d3` path generation for the mouth’s arc path.

BBenZaad

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example uses React and D3 to draw a smiley face with SVG primitives. It shows a yellow circle head with two black eyes and a curved mouth rendered as an arc. The code constructs the mouth using the `d3.arc()` generator, setting inner and outer radii and start and end angles for a half-circle opening. The fixed dimensions are centered in a 960×500 viewport, with all facial features positioned relative to the center using SVG’s `transform` attribute and D3’s arc path output. The implementation uses React 16.9 and D3 v6.

Ddeep1358

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

93% match

Loading thumbnail…

Fork of Let's Make a Face Part II

A yellow smiley face is drawn on an SVG canvas, centered with a thick black outline, two circular eyes, and an arc-shaped mouth. The face is built with React and D3.js, using D3’s `arc` function to generate the mouth path and SVG filter definitions for a drop-shadow effect. The code constructs the face with basic shapes, positioning them relative to the canvas center, and renders the result through React’s `ReactDOM.render`.

Bboreilly26

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A forked D3.js and React visualization renders a classic smiley face inside an SVG canvas. The face is constructed using a yellow circle with a black stroke for the head, two small circles for eyes, and a mouth formed by a D3 arc path with a specified inner radius and start/end angles. The code uses React to declaratively define SVG elements, leveraging the `arc()` function from the D3 library to generate the mouth’s path data, with dimensions and positions computed from the canvas width and height.

SSeolha Lee

93% match

Loading thumbnail…

Fork of Fork of Let's Make a Face Part III

This example draws a yellow smiley face centered in an SVG canvas using React and D3 v7. It shows a circle for the head, two smaller circles for eyes, and a curved mouth path generated with the `d3.arc()` API. The face is positioned via a translation transform, with eye offsets and radius defined as constants, while the mouth uses inner and outer radii with angled start and end points. All shapes are rendered declaratively as SVG elements within a React component.

PPakapone Supavarn

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

93% match