Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited May 18, 2021

Created on May 18, 2021

This example shows a smiley face made of overlapping SVG circles inside a React application, with a yellow outer circle for the head and two smaller black circles for the eyes. The code loads React and ReactDOM from a CDN, embeds the face directly in the HTML’s SVG markup, and also runs a React render call using `ReactDOM.render` with the `StrictMode` and `App` components. It relies on static SVG circle elements without any interactive or animated 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 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 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

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

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 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 uses React to render an SVG smiley face. The code draws a yellow circle for the head and two smaller black circles for eyes, with positions calculated from the SVG’s center coordinates. React 17 and ReactDOM are used to mount the component, which is composed entirely of SVG circle elements. The face’s dimensions and offsets are defined as constants, and the rendering shows a static, basic facial geometry without animation or additional features.

CCbrc27

95% match

Loading thumbnail…

Fork of Let's Make a Face Part II

This example shows a simple yellow smiley face built from three SVG circles, all rendered inside a React component. The face is centered within a 960 by 500 pixel viewport, with the head outlined in black and two smaller circles serving as eyes. The code uses React’s `ReactDOM.render` to mount an `<App>` component that directly returns an `<svg>` element with hardcoded `cx`, `cy`, and `r` values derived from the viewport dimensions. Rendering relies on the browser’s native SVG support, and no external data sources or interaction logic are present.

SShiryaW

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example builds a simple smiley face using React and SVG, rendering a yellow circle with two black eyes. The face is drawn with three `<circle>` elements, where the head and eye positions are calculated from fixed width, height, and offset variables. The code uses ReactDOM to mount the component, and computes the head radius from the height minus a stroke width. It demonstrates basic SVG styling with fill, stroke, and positioning in a 960x500 viewport.

CChirag Bansal

95% match