Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
KKate-2222004
Last edited Jun 13, 2021
Created on Jun 13, 2021

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.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

This example shows a simple cartoon smiley face built with SVG shapes, including a yellow circle for the head, two black circles for eyes, and a curved arc for the mouth. The face is centered using a D3.js arc generator with specified inner and outer radii and angular start and end points. The visualization is rendered in React, with each element positioned via SVG attributes and a group transform. It demonstrates combining React components with D3’s arc API to produce static, geometric graphics.

KKate-2222004
97% 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 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
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 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 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
95% match
Loading thumbnail…

Fork of Fork of Smiley Face Part III

This example shows a yellow smiley face composed of SVG circles and an arc for the mouth, centered within a 960-by-500 viewport. The face uses React to render the SVG elements and D3’s `arc` function to generate the mouth path with specified inner and outer radii and angular span. Stroke widths and offsets for the eyes and mouth are defined as constants, with the entire drawing grouped and translated to the center of the canvas. The code relies on React 16.9 and D3 v5, using ReactDOM to mount the component.

Kkarumanchimanasa
95% match
Loading thumbnail…

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

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.

Zzhangwbhi
94% match