Fork of Let's Make a Face Adjusted mouse

100%

Fork of Let's Make a Face Adjusted mouse

✓ Published0🌍 Public

Last edited Oct 18, 2021

Created on Oct 17, 2021

This example shows a yellow smiley face drawn with SVG primitives: a circular head, two eyes, and an arc-based mouth. The React application uses D3 v7 functions like `d3.arc` for the mouth path and `d3.line` to generate a zigzag line for the hair. It demonstrates combining React components with D3 shape generators, with all elements positioned relative to the center using SVG transforms. The code includes static face geometry only, with no interactive mouse handling despite the title.

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 yellow smiley face rendered as an SVG graphic, consisting of a circular face with two eyes and a curved mouth. The face is drawn using React components that generate SVG elements, while D3’s `arc()` API creates the mouth path with specified inner and outer radii. Position calculations for the eyes and face are based on the SVG’s width and height, with a stroke width offset to center the face properly. The code uses d3.v7 and React 16.7 to compose the visualization declaratively.

PPratyushSn

91% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow smiley face rendered as SVG in a React component shows static facial features: two black eyes and a mouth arc. The face circle uses a yellow fill with a black stroke, while the mouth is drawn using the d3.arc() generator with specified inner and outer radii and start/end angles. The code uses d3 v6 and React 17, with all shapes positioned via SVG coordinates and transforms. The visualization demonstrates the fundamental D3 shape-generating API within a React rendering pipeline, with no interaction or animation.

MMGamboa

91% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a yellow smiley face built from SVG shapes, with two black eyes and a curved mouth, centered on a 960-by-500 canvas. It renders the face using React components, where each circle and the mouth path are defined as JSX elements inside an SVG. The mouth is generated with the `d3.arc()` generator, specifying inner and outer radii and start and end angles, while the eyes use hardcoded offsets from the center. The code relies on React for structure and d3 for path generation, with all geometry computed from fixed variables.

PPinzhi

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

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

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

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

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

91% match