Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
Zzhangwbhi
Last edited Aug 1, 2021
Created on Aug 1, 2021

This example shows a yellow smiley face composed of a circular background, two eyes, and a mouth, rendered as SVG shapes. The face is drawn declaratively, using React components to wrap each visual element, and positioned at the center of the canvas. The code relies on React 17 and d3.v7 specifically the `d3.arc` API, applied through the `Mouth` component to generate the mouth path. The facial features are parameterized, with the background circle, eyes, and mouth each receiving explicit coordinates and dimensions as props, resulting in a static, programmatically constructed portrait.

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 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
96% match
Loading thumbnail…

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

A yellow smiley face is drawn in an SVG canvas using React, with two black eyes and a mouth. The face is centered on a 960x500 canvas, with the head as a yellow circle outlined in black, and the eyes positioned symmetrically. The mouth is created using the `arc` function from the d3 library to define a path, while ReactDOM renders the SVG elements. The code uses d3.v7 and React 17.0.2, with all shapes positioned via transform and absolute coordinates.

Zzhangwbhi
95% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a yellow smiley face with two eyes and a curved mouth, centered on an SVG canvas. It is built with React (v17) and D3 (v7), using D3’s `arc` generator to define the mouth path. The face is composed of three separate React components—`BackgroundCircle`, `Eyes`, and `Mouth`—all nested inside a shared `FaceContainer` that applies a translation transform. The SVG width is 960 pixels, height 500 pixels, and the final output is drawn entirely as vector shapes.

IIsh Takkar
95% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a yellow smiley face composed of SVG shapes, including a background circle, two eyes, and a curved mouth, all positioned within a centered group. The face is built using React components such as `Face`, `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth drawn using the `d3.arc()` API. The code uses React 18, D3 v7, and SVG rendering, with configurable props for eye offset, radius, and stroke width. The visualization is a static composition demonstrating modular component reuse and D3’s arc generator for path creation.

Bbhavani44
95% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a stylized smiley face composed of a yellow circular background, two black eyes, and an arc-shaped mouth, all centered within an SVG viewport. The face is built from modular React components, with each part—such as the background circle, eyes, and mouth—defined in separate files and composed together. The mouth is generated using the D3 `arc` generator with specified inner and outer radii and angle extents. Rendering relies on React 18 and D3 v7, with SVG elements positioned by translating a group element to the center of the canvas.

Mmarouan-ben
95% match
Loading thumbnail…

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

This example renders a smiley face using React and D3.js, drawing a yellow circle with black stroke as the head, two black eye circles, and a mouth arc. The code uses D3’s `arc` generator to create the mouth path with specified inner and outer radii and angular bounds. SVG elements are positioned via a centered `<g>` transform, with constants for eye offset, radius, and stroke width. The visualization shows a static, geometric facial composition without interactivity, built entirely through React components and D3 utilities.

Bbhavani44
95% match
Loading thumbnail…

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

This visualization displays a simple smiley face built from basic SVG shapes, with a yellow circular head, black outlined stroke, two solid black eyes, and a mouth drawn as an arc. The face is centered on a 960 by 500 canvas, with the head radius sized to leave a consistent stroke margin. The example uses React to render the SVG structure and leverages the d3 `arc` function to define the mouth’s path, specifying its inner and outer radii and angular range. The code relies on the React and D3 libraries loaded via the provided scripts.

KKenny Barns PIERRE
95% match
Loading thumbnail…

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

This example shows a smiley face built with a yellow circle, two black eyes, and a curved mouth arc, all rendered as SVG elements. The face is centered in a 960 by 500 viewport using React to declaratively manage the SVG structure. D3 v7 provides the `arc` generator to create the mouth path, while hardcoded coordinate variables control eye placement and stroke thickness. The code uses React’s `ReactDOM.render` to mount the component, and the final output is a static visualization without interaction or animation.

KKate-2222004
94% match