Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Mar 9, 2021

Created on Mar 9, 2021

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.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static, yellow smiley face drawn with three SVG circles: a large filled circle for the head and two smaller unfilled circles for eyes. The code defines the layout using React and ReactDOM, computing the center coordinates and radius from fixed width and height variables rather than hardcoding them. The rendering relies on SVG circle elements and an inline stylesheet to remove page margins.

BBrian Blakely

97% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face built from three SVG circles: a large yellow face with a black stroke, plus two smaller black circles for eyes. It uses React 18.3.1 via the UMD production build, with the face and eyes hardcoded as JSX elements inside an SVG. The rendering approach relies on SVG attributes for positioning and styling, with the face centered at 480,250 and eyes offset to either side. No interactive behavior or data binding is present.

EEthan Black

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

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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face drawn as three SVG circles: two small black eyes and one large yellow head with a black outline. The face is centered on an 960×500 canvas, with the head positioned at the center and the eyes offset horizontally. The code uses React to load the library, followed by raw JSX elements rendered directly in the HTML. React 17.0.2 is loaded via a UMD build, while the SVG markup is written inline without additional visualization libraries.

AAdham Elkelany

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face built from SVG circles: a yellow head, two eyes, and a mouth. It uses React to render the SVG elements, with hardcoded coordinates for the head and eyes. The code defines width, height, and center points to position the main face shape, while the eyes are placed at fixed offsets from the center. React 18 and ReactDOM render the component to the page, though the displayed face only includes the head and eyes, not the mouth.

FFangfei Zhang

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face rendered as static SVG shapes: a large circle for the head and two smaller circles for the eyes. The code uses React 17 via a UMD script, with all elements hardcoded in JSX inside an `<svg>` tag. It relies on basic SVG circle elements with fixed coordinates and stroke properties, and includes a placeholder `console.log` and `alert` call that execute on load. The face is incomplete, missing a mouth, as noted in the README.

QQingzhi Ma

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG smiley face shows a large yellow circle with black stroke, flanked by two eye circles. The example uses React 16.9 via UMD builds from unpkg, rendering three circle elements directly in JSX within an inline SVG. The face has no mouth or other features, leaving the composition incomplete. Coordinates are hardcoded relative to the SVG viewport (960×500), with the face centered at (480,250) and eyes offset horizontally.

Zzzhilin

96% match