Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Jan 14, 2024

Created on Jan 14, 2024

A single static SVG face is drawn with yellow circular head and two empty eye circles, rendered through raw SVG markup inside an HTML document. The face is positioned centrally within a 960 by 500 pixel canvas, with the head centered at (480, 250) and stroked in black. The code uses no external libraries, relying instead on direct SVG circle elements, while the README notes the project is "Half way towards a smiley face," indicating an unfinished state. The example demonstrates basic SVG composition for geometric figure drawing.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG portrait of a smiley face, rendered in yellow with a black outline, shows two black circles for eyes on a blank face. The example uses React to structure the markup, but the drawing itself is entirely created with raw SVG elements in the `index.html` file, including explicit `cx`, `cy`, and `r` attributes for positioning. The code comments indicate a process of computing facial feature placement relative to the canvas center, though only the eye positions are shown in this partial implementation.

Aartgökhan

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face rendered as an SVG, featuring a circular head with a black outline and two black eyes positioned symmetrically around the center. The face is incomplete, as it lacks a mouth, aligning with the title’s reference to a half-finished project. The visualization uses React to define the component structure, with ReactDOM rendering the SVG elements to the page. It employs hard-coded constants for dimensions and offsets, drawing circles with SVG’s built-in `circle` element and stroke properties.

Pplusbeauxjours

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

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

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This is a static SVG drawing of a yellow smiley face displayed on a 960 by 500 canvas, composed of three circles: a large yellow face with a black outline and two smaller black eyes. The artwork is presented as a React component, though the core visual is defined directly in the HTML markup using inline SVG elements. The code imports React and ReactDOM, and the face is rendered by the browser’s SVG renderer. The example serves as a partial, unfinished exploration toward a complete face, as indicated by the title and README note.

KKazi Minhajul Haider

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

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.

Cchenxlong3

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example demonstrates a simple smiley face drawn with three SVG circles: a yellow face outline and two black eyes, rendered on a 960 by 500 canvas. The markup is hand-authored in HTML, with React 17 loaded from a CDN and an accompanying `index.js` that logs the React global to the console. The face uses fixed coordinates and stroke widths to position the eyes and face, while the layout comment explains centering calculations. No interactive or animated behavior is shown, only the static SVG presentation.

Ssnehalp31996

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A half-finished smiley face rendered as static SVG shapes: a yellow circle with a black stroke forms the head, while two unfilled black circles serve as eyes. The code uses React 18.2.0 via a UMD script tag and raw SVG elements, with hard-coded coordinates for each circle. The example demonstrates basic SVG composition and layout, showing the initial steps of building a facial diagram without any interactive or animated behavior. The face remains incomplete, lacking a mouth.

Rramz213

93% match