Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Apr 9, 2021

Created on Apr 9, 2021

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.

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 builds a simple smiley face from three SVG circles: a yellow head with a black outline and two smaller circles for eyes. The code renders the shapes directly within the SVG markup, specifying center coordinates, radii, and stroke styling for each circle. The React components in `index.js` are declared but do not mount the face, which is instead hard-coded in the HTML file. The example relies on React for the component structure and SVG elements for the visual output, with a linked video tutorial providing further context.

Kkan qiu

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

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

97% match

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, plus two smaller black circles for eyes. It uses React 18.3.1 via the UMD production build, with the face and eyes hardcoded as JSX elements inside an SVG. The rendering approach relies on SVG attributes for positioning and styling, with the face centered at 480,250 and eyes offset to either side. No interactive behavior or data binding is present.

EEthan Black

97% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a smiley face built from three SVG circles, with a yellow head and two black eyes. The face is drawn using React and rendered as SVG, with the circle positions and sizing explicitly defined in the code. The app uses ReactDOM to render a component into the DOM, though the current script contains an incomplete placeholder that only displays a heading. The presentation includes a video demonstrating the process of creating the face, and the final visualization relies on SVG primitives coordinated through React’s declarative component structure.

EEdgar Alves

97% 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 head and two black eyes, rendered centered on a 960-by-500 canvas. The React component defines numeric constants for the head radius, eye offset, and stroke width, then passes them as SVG attributes to circle elements. It uses React 18 and ReactDOM to render the static SVG directly into the DOM, with no animation or interactivity. The drawing is a foundational step toward a more complete face, as the title suggests.

Ssunyixia025@gmail.com

97% 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 yellow head with a black outline and two eyes—rendered in a React component. It demonstrates how to use React to declaratively construct an SVG scene, computing positions with the constants `centerX`, `centerY`, `eyeOffsetX`, `eyeOffsetY`, and `eyeRadius`. The code uses ReactDOM to mount the component into the DOM, and the SVG elements are styled with attributes like `fill`, `stroke`, and `stroke-width`. No interactivity or animation is present beyond the static frame.

PPatrick Byron Gattoc

97% match

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