Fork of Let's Make a Face Part II

100%

Fork of Let's Make a Face Part II

✓ Published0🌍 Public

Last edited Apr 5, 2022

Created on Apr 5, 2022

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.

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

97% match

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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a yellow smiley face rendered as a circle with two eyes, positioned using fixed numeric coordinates for the SVG canvas. It uses React and ReactDOM to define and mount an `App` component that outputs SVG elements, with circles for the face and eyes. The code computes positions from width and height constants, and relies on React’s `createElement` via JSX to build the markup. The rendering approach is straightforward declarative SVG, with no interactive or animated behavior beyond the static composition.

YYohsuke Murase

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a yellow smiley face rendered as a circle with two eyes, built using React 18 and SVG. The code defines fixed dimensions for an SVG canvas, positions the face center and eyes using calculated offsets, and draws each circle with explicit fill and stroke attributes. The face is rendered through a React component that outputs SVG elements, with the eyes lacking any fill or stroke properties, leaving them invisible against the yellow background. The example demonstrates a simple static composition without interactivity or data binding.

Ttshardey

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a simple yellow smiley face built from three SVG circles: a large face outline and two smaller eyes. It uses React (version 16.9) to render the SVG elements declaratively, computing positions from constants like `centerX`, `centerY`, and `eyeOffsetX`. The face is drawn with a yellow fill, black stroke, and a stroke width of 10, while the eyes are plain black circles. The code defines the layout entirely with JavaScript variables and React components, avoiding any external data or geometry libraries.

Ssimrangajsinghani

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow smiley face rendered as SVG, with a black circular face and two black eyes positioned symmetrically on either side of the center. The code defines constants for dimensions, offsets, and radii, then uses React to create three circle elements. It leverages ReactDOM to mount the component, with SVG attributes set via JSX, and the rendering relies on the React production build loaded from a CDN.

BBurak Senel

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