Skip to main content
SimilarExport ZIP
100%

1LessonFork

✓ Published0🌍 Public
Ttopnep
Last edited Jul 27, 2021
Created on Jul 27, 2021
Forked from HTML Starter

A yellow face with black outline and simple features is rendered using React and SVG. The face consists of a large background circle, two smaller circles for eyes, and a mouth drawn using d3.arc. The d3.arc API creates the curved mouth path with specified angles and radii. The visualization uses a 960 by 500 SVG canvas with a centered group via d3 transformations, displaying a minimal, static character built from basic geometric shapes.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Course: Face Part 4

A simple SVG face is rendered in yellow with a black outline, two eyes, and a curved mouth, centered in a 960×500 viewport. The example demonstrates integrating D3's `arc` generator with React by creating the mouth path from inner and outer radii and fixed start and end angles. React elements produce the circles and `<path>`, while a D3 selection is not used; instead, the `arc()` function generates the `d` attribute directly. The face’s parts are positioned via SVG transforms, with stroke and radius values hardcoded as constants.

MMarta
87% match
Loading thumbnail…

Fork of Hello HTML

A React-rendered SVG face shows a yellow circle with black stroke, two dark eye circles, and an arc-based mouth created with d3.arc. The code uses React 17 and D3 v7, with the mouth path generated via arc start and end angles. Eye positions and radii are fixed constants, and the background circle’s radius derives from the viewport height minus stroke width. The visualization demonstrates basic SVG shape composition within a React component, using D3 only for the arc path generator.

Ppyee78
85% match
Loading thumbnail…

Fork of Let's Make a Face Part I

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.

EElena Ionescu
85% match
Loading thumbnail…

Fork of Hello HTML

This example shows a simple yellow face constructed from SVG primitives, with two black eyes and a small mouth. The React application uses hardcoded values for the face’s center, eye offset, and eye radius, while a D3 `arc` generates the mouth path. The SVG is drawn directly in the render, with React and D3 loaded via CDN.

Oomarsheetan@gmail.com
85% 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
85% match
Loading thumbnail…

Fork of Hello HTML

This example shows a stylized cartoon face rendered as SVG, with a yellow circular background, two eyes, and a mouth built from a D3 arc. The face is centered on a 960 by 500 canvas using React components that compose `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`. The code uses React 16.9, ReactDOM, and D3 v6’s `arc` generator to define the mouth’s path. All facial features are parameterized via props, allowing the face’s dimensions and positions to be adjusted independently.

MMarta
85% match
Loading thumbnail…

Fork of face_version4

This example displays a stylized yellow face built from SVG circles and an arc, centered on a 960 by 500 canvas. The face features black-outlined eyes, a simple mouth, and a thick black stroke around the head, all rendered using React components. The code uses D3 v7’s `arc` generator to create the mouth path, with geometric constants defining eye offset, radii, and stroke width to position each element. The visualization is drawn with declarative SVG elements inside a React component, demonstrating a straightforward composition of primitive shapes without data binding.

114Hazel
85% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example shows a simple yellow face with two black eyes, drawn using basic SVG circle shapes within a fixed 960 by 500 coordinate space. The face is implemented with hardcoded circle attributes, including a large yellow circle for the head and two smaller black circles for the eyes, all placed on a blank white background. The code loads the d3.v5 library and React, but the visualization itself relies solely on static SVG elements rather than any D3 functions. The rendering occurs directly in an HTML file with an embedded `<svg>` tag.

Rreddysushma994@gmail.com
85% match