Fork of Let's Make a Face Part II

100%

Fork of Let's Make a Face Part II

✓ Published0🌍 Public

Last edited Jan 12, 2022

Created on Jan 12, 2022

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.

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

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

This example shows a simple yellow smiley face built from three SVG circles—a large filled face and two smaller eyes—on a 960 by 500 canvas. The face is rendered directly in HTML using React 16.9.0, with both React and ReactDOM loaded from unpkg CDN. Instead of a data source, the visualization relies on hard-coded coordinates for positioning, while SVG’s native circle elements handle the drawing, with a black stroke outlining the face. It does not display any interactive or dynamic behavior, remaining a static composition.

TThais Scheneider

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

95% match