Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Feb 17, 2022

Created on Feb 17, 2022

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.

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, 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 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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple, static SVG smiley face composed of three circles: a yellow head with a black border and two black eyes. It is a React-based fork of a tutorial, with the ReactDOM render call displaying a placeholder “Hello JSX” heading. The SVG markup is embedded directly in the HTML, using explicit `cx`, `cy`, `r`, and `stroke-width` attributes to position and style the shapes, while the `index.js` file sets up the React application with `react` and `react-dom`.

LLawrence Liu

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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a static smiley face in SVG using React’s declarative JSX syntax. It shows three circles—a large yellow face with a black stroke, and two smaller black eyes positioned on either side of the center. The code manually sets each circle’s `cx`, `cy`, `r`, and stroke attributes, with pixel coordinates and styling defined directly in the `index.html` file. The React production build is loaded via a CDN script tag, though no custom React components are defined in the visible code.

SSarmadC

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

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

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