Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Oct 5, 2022

Created on Oct 5, 2022

This example renders a simple smiley face using React and SVG. Two black circles form the eyes, positioned symmetrically on either side of the canvas center, while a larger yellow circle with a black stroke serves as the face. The code defines the layout with constants for width, height, and eye offsets, then uses ReactDOM’s `render` method to draw the shapes into the root element. The SVG output is generated declaratively through React’s JSX syntax.

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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a smiley face as a React component using SVG. It shows a yellow circle with a black stroke for the face, plus two smaller circles for eyes positioned symmetrically around the center. The code defines constants for width, height, center coordinates, eye offsets, and eye radius, then uses ReactDOM to mount the SVG into the DOM. The visualization demonstrates a basic, static composition with React 16.9.0 and inline SVG elements.

JJuan Raul de la Guardia

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a simple smiley face using SVG primitives within a React application. The visualization displays a yellow circle with a black stroke for the head, alongside two smaller circles representing eyes, all positioned using explicit coordinates. The code uses React and ReactDOM to manage the rendering, while the SVG elements are defined directly in the HTML file. It also includes a JavaScript file that logs ReactDOM and renders a separate "Hello JSX" message, though the face itself is static and does not respond to interaction.

MManjot Pal Singh

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a simplified smiley face using SVG primitives: two concentric circles form the face outline, while two smaller circles serve as eyes. A React app, built with ReactDOM, displays a separate heading above the graphic. The face’s dimensions and positions are hardcoded in the SVG markup, with a yellow fill and black stroke for the main circle. The code uses React 17 and ReactDOM to mount the component, though the face itself is drawn without any specific data source or dynamic calculation.

AAndrew Fletcher

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

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 smiley face built with React and SVG: a yellow circle for the head and two black circles for eyes. The code uses React 16.7 to render static SVG elements, with hardcoded `cx`, `cy`, and `r` attributes positioning the shapes. The rendering approach is direct SVG markup inside JSX, with no interactivity or animation. It is a partial implementation, lacking a mouth, and serves as a basic demonstration of combining React with SVG for declarative shape drawing.

MMustapha-coder

96% match