Fork of Let's Make a Face Part II

100%

Fork of Let's Make a Face Part II

✓ Published0🌍 Public

Last edited Jul 26, 2022

Created on Jul 26, 2022

This example shows a simple smiley face built from SVG circles, with a yellow face and two black eyes positioned symmetrically around the center. The app uses React and ReactDOM to render the SVG into the DOM, calculating all coordinates from width, height, and offset constants. The code sets explicit pixel values for the face radius, eye offsets, and stroke width, demonstrating how to compose basic shapes with React’s JSX syntax and SVG attributes.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part II

This example shows a yellow smiley face rendered as an SVG circle with two smaller circles for eyes, computed from fixed dimensions rather than loaded data. The face is built using React 18, with JSX defining SVG elements inside the App component. The face’s geometry is calculated via constants for center coordinates, offsets, and radii, then rendered by ReactDOM into the DOM. The code uses no external visualization libraries, relying solely on React’s declarative SVG rendering to position the shapes.

RRyanJHorwitz

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

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, with two black eyes positioned on either side of the face’s center. It uses React and ReactDOM to render the SVG elements, calculating circle positions from width, height, and offset constants. The face itself is drawn with a yellow fill and black stroke, while the eyes use fixed radii and offsets from the center, demonstrating basic declarative SVG composition within a React component.

Aabhashdiu

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

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 II

This example shows a simplified smiley face composed of a yellow circle with a black outline and two smaller circles for eyes, all dynamically sized and positioned relative to the browser window’s dimensions. The React application uses the `react` and `react-dom` libraries to render an SVG graphic, calculating coordinates from `window.innerWidth` and `window.innerHeight`. The code computes center points and offsets for the facial features, drawing the face with SVG `<circle>` elements within a transformed group, ready to be half of a complete expression.

Iiifaisal

96% match

Loading thumbnail…

Fork of Let's Make a Face Part II

This example shows a yellow smiley face constructed from three circles—a large face outline and two smaller eyes—rendered as SVG. The code uses React components to declaratively define the circles, with ReactDOM rendering the `<svg>` element into the page. Explicit JavaScript variables (like `centerX`, `centerY`, and `eyeOffsetX`) control the circle positions and dimensions, while static values for radius and stroke width are passed directly as JSX attributes. The face is centered in a 960-by-500 viewport, and the styling is applied with SVG’s `fill` and `stroke` properties.

Ffjvoris

95% match

Loading thumbnail…

Fork of Let's Make a Face Part II

A fork of the "Let's Make a Face Part II" example renders a simple smiley face using React and SVG. The visualization displays a yellow circle with black stroke for the head, plus two black circles as eyes, positioned symmetrically around the center via computed offsets. Built with React 18 and ReactDOM, it uses JSX to declaratively define SVG circle elements, with all dimensions and positions derived from constant variables for width, height, and eye placement.

PPakapone Supavarn

95% match