Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Mar 6, 2021

Created on Mar 6, 2021

A yellow smiley face is drawn as a circular SVG shape, with one black eye and a thick black outline, centered on a 960 by 500 canvas. The example uses React to render SVG elements directly via JSX, defining circle components with fixed coordinates and radius values. It relies on the React and ReactDOM libraries from a CDN, with styling that hides page overflow. The face is static and incomplete, showing only a single eye, with no animation or interactive behavior.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

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

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

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 is a static SVG drawing of a yellow smiley face displayed on a 960 by 500 canvas, composed of three circles: a large yellow face with a black outline and two smaller black eyes. The artwork is presented as a React component, though the core visual is defined directly in the HTML markup using inline SVG elements. The code imports React and ReactDOM, and the face is rendered by the browser’s SVG renderer. The example serves as a partial, unfinished exploration toward a complete face, as indicated by the title and README note.

KKazi Minhajul Haider

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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG smiley face renders a yellow circle with two black-outlined eyes centered on a 960 by 500 canvas. The face is built directly in the HTML markup using numbered `<circle>` elements, with the head at position (480, 250) and eyes offset horizontally. The example accompanies a video tutorial on constructing faces step by step. While the page loads React and ReactDOM from CDN scripts, the current visualization uses plain SVG geometry without any React components or interactive behavior.

Cchenxlong3

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow smiley face is rendered on an SVG canvas, with two black eye circles positioned symmetrically around the center. The face uses React components to define SVG circle elements, with hardcoded values for the face radius, eye offsets, and stroke width. The code imports React and ReactDOM, and ReactDOM.render mounts the App component to the root div. Dimensions are set via constant variables for width, height, and center coordinates.

HHowardHan99

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a static yellow smiley face made from three SVG circles: a large outlined face and two smaller eyes. The code uses React 17 via a UMD build to render the SVG elements directly in the browser. All coordinates and dimensions are hard-coded, with the face centered at (480, 250) and a 245-pixel radius. The rendering approach relies on plain SVG shapes without any interactive behavior or data-driven updates.

SShankar Ghimire

96% match