Skip to main content
SimilarExport ZIP
100%

Fork of Let's Make a Face Part II

✓ Published0🌍 Public
Iiifaisal
Last edited Apr 4, 2022
Created on Mar 29, 2022

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.

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

Aaishwaryshivgan
96% match
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
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
94% 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
94% 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
94% 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
94% match
Loading thumbnail…

Fork of Let's Make a Face Part I

A basic smiley face is rendered as a yellow circle with two black eyes, drawn using React and SVG. The example demonstrates positioning SVG elements within a React component, computing coordinates from a central point. It uses React 17 and ReactDOM, with hardcoded dimensions for width, height, and eye offsets rather than external data. The face is incomplete, showing only the head and eyes, as indicated in the README’s note about being halfway toward a smile.

KKathleen Johnston
94% match
Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow smiley face is drawn as a circle with black stroke, featuring two offset circular eyes. The React application uses hardcoded SVG dimensions and variables for positioning, rendering through ReactDOM. It demonstrates basic SVG circle elements with React components, using unexported constants for layout calculations.

Bbut-whythough
94% match