Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Sep 28, 2021

Created on Sep 28, 2021

A static SVG smiley face renders a yellow circle with two black-outlined eyes centered on a 960 by 500 canvas. The face is built directly in the HTML markup using numbered `<circle>` elements, with the head at position (480, 250) and eyes offset horizontally. The example accompanies a video tutorial on constructing faces step by step. While the page loads React and ReactDOM from CDN scripts, the current visualization uses plain SVG geometry without any React components or interactive behavior.

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 built from three SVG circles—a large filled face and two smaller eyes—on a 960 by 500 canvas. The face is rendered directly in HTML using React 16.9.0, with both React and ReactDOM loaded from unpkg CDN. Instead of a data source, the visualization relies on hard-coded coordinates for positioning, while SVG’s native circle elements handle the drawing, with a black stroke outlining the face. It does not display any interactive or dynamic behavior, remaining a static composition.

TThais Scheneider

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a static smiley face constructed from SVG circles: a large yellow head with a black outline and two smaller black circles for eyes. The code uses React and ReactDOM to manage the page, while the face itself is drawn directly in the markup. The rendering relies on SVG primitives within a fixed 960-by-500 viewport, with coordinates placed to center the head and position the eyes symmetrically. The project shows a foundational step toward a more complex face, with only the head and eyes present so far.

Ggzm17

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow smiley face is drawn as a circular SVG shape, with one black eye and a thick black outline, centered on a 960 by 500 canvas. The example uses React to render SVG elements directly via JSX, defining circle components with fixed coordinates and radius values. It relies on the React and ReactDOM libraries from a CDN, with styling that hides page overflow. The face is static and incomplete, showing only a single eye, with no animation or interactive behavior.

RRishabh Gour

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple, static smiley face built from three SVG circles: a large yellow face with a black outline and two smaller black eyes. It is a React component rendered directly to SVG using ReactDOM, with the face positioned at the center of a 960 by 500 viewport. The circles are defined with explicit `cx`, `cy`, and `r` attributes, and the face’s yellow fill and stroke are set inline. No interactive behavior or animation is present.

Bbcodington-ne

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a static, yellow smiley face constructed from three SVG circles: a large head and two smaller eyes, all rendered on a 960-by-500 canvas. The code uses React and ReactDOM to manage the page, while the drawing itself relies on raw SVG elements with hard-coded coordinates and stroke properties. A linked YouTube video explains the creation process, and the simple visual output demonstrates basic shape composition without any interactive or animated behavior.

JJosephK98

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face rendered as a yellow circle with two eyes, drawn using SVG shapes. The face is positioned at the center of a 960x500 canvas, with the main circle outlined in black and the eyes placed symmetrically off-center. The code uses React and ReactDOM to render the SVG elements, though the face itself is hardcoded directly in the HTML rather than generated through React components. The project also includes an embedded YouTube video and appears to be part of a tutorial series on building faces step by step.

MMeghana Bangari

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face built from SVG circles: a yellow head, two eyes, and a mouth. It uses React to render the SVG elements, with hardcoded coordinates for the head and eyes. The code defines width, height, and center points to position the main face shape, while the eyes are placed at fixed offsets from the center. React 18 and ReactDOM render the component to the page, though the displayed face only includes the head and eyes, not the mouth.

FFangfei Zhang

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face rendered in React, with a yellow circle for the head, a black outline, and two smaller circles for eyes. The code uses React 18 and ReactDOM to render the SVG directly in the browser. It appears to be a work-in-progress, as the facial elements are incomplete. The source includes an instructional video link, suggesting this is a practice exercise. The SVG dimensions are fixed at 960 by 500 pixels, with circles positioned using explicit coordinates.

Ootis

96% match