Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Apr 30, 2022

Created on Apr 30, 2022

This example shows a static smiley face built from three SVG circles: two small ones for eyes and one large blue circle for the head, all centered within a 1000 by 500 viewport. It uses React and ReactDOM, with the circles defined directly in an HTML file’s SVG markup. The code logs “Hello JavaScript” to the console and includes a video tutorial link, while the rendered face remains fixed with no interactivity or animation.

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 static smiley face built from three SVG circles: a large yellow face with a black stroke, and two smaller black eyes. It is a React application that renders the face directly in the HTML markup, providing no interactivity. The code uses React 16.9 and ReactDOM to render an `App` component, though the visible face is hard-coded in the SVG within `index.html` rather than generated by React. The project references a video tutorial and is forked from another visualization, but only the basic SVG shapes are present.

RRavisista1303

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

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from three SVG circles: a large yellow face and two smaller eyes. It uses React to render the DOM structure, with the static SVG markup embedded directly in the HTML file. The code references React 17 via UMD builds and includes an `index.js` placeholder that renders a "Hello JSX" heading, but the visible face is drawn entirely from the hardcoded SVG elements, not from the React component.

Eeatenmoth

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

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static, React-rendered smiley face constructed from three SVG circles: a yellow face outline and two black eyes. It uses React 18 and ReactDOM to mount an SVG element programmatically into the page’s root div, with the face’s facial features hardcoded as circle coordinates and radii. The code also includes a raw SVG fallback in the HTML, demonstrating the same visual without the React layer.

KKhaihuyennguyen

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

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face constructed from three SVG circles: one large yellow circle for the head and two smaller black circles for the eyes. The SVG markup is embedded directly in the HTML, while the linked React code renders only a simple “Hello JSX” heading. The visualization demonstrates a basic geometric composition using SVG primitives with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. React and ReactDOM are loaded from CDN, though the visible face does not depend on React rendering.

MMichaelSel

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simplified smiley face rendered as static SVG shapes: a yellow circle for the head and two black circles for eyes, positioned within a fixed 960x500 viewport. The code uses plain React 17 elements to define the SVG markup directly in JSX, with hardcoded coordinates and stroke widths. It does not include a mouth, any animation, or interactive behavior. A video embed in the README references a tutorial titled "Let's Make a Face Part I," but the running visualization itself is limited to the three static circles.

RRohit Thakare

95% match