Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Apr 29, 2024

Created on Apr 29, 2024

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.

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

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

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

97% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from three SVG circles: a large yellow face and two smaller eyes. It uses React to render the DOM structure, with the static SVG markup embedded directly in the HTML file. The code references React 17 via UMD builds and includes an `index.js` placeholder that renders a "Hello JSX" heading, but the visible face is drawn entirely from the hardcoded SVG elements, not from the React component.

Eeatenmoth

97% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built with three SVG circles: a large yellow face with a black outline and two smaller black eyes positioned symmetrically on either side. The code uses React, though the markup itself is plain SVG without any dynamic logic or interaction. The face is centered at 480, 250 on a 960 by 500 canvas, with the eyes placed at fixed x-coordinates to suggest a playful expression. The rendering relies on standard SVG element attributes for position, fill, and stroke, producing a static, minimal illustration.

AallegedStink

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

97% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from three SVG circles: a large yellow head and two black eyes, rendered centered on a 960-by-500 canvas. The React component defines numeric constants for the head radius, eye offset, and stroke width, then passes them as SVG attributes to circle elements. It uses React 18 and ReactDOM to render the static SVG directly into the DOM, with no animation or interactivity. The drawing is a foundational step toward a more complete face, as the title suggests.

Ssunyixia025@gmail.com

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a static smiley face constructed from SVG circles: a large yellow head with a black outline and two smaller black circles for eyes. The code uses React and ReactDOM to manage the page, while the face itself is drawn directly in the markup. The rendering relies on SVG primitives within a fixed 960-by-500 viewport, with coordinates placed to center the head and position the eyes symmetrically. The project shows a foundational step toward a more complex face, with only the head and eyes present so far.

Ggzm17

96% match