Fork of Let's Make a Face Part I

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from SVG shapes, with a yellow circular head and two black eyes positioned on a white background. The visualization uses React 17 to render the SVG elements directly in the HTML, relying on the React UMD build loaded from unpkg. The face is constructed with three `<circle>` elements: one large yellow circle for the head and two smaller circles for the eyes, with the head’s stroke and fill defined inline. The code does not implement any interactive behavior or data-driven features, purely displaying static SVGs.

Eeliya1th

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

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

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

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

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

Fork of Let's Make a Face Part I

This example begins building a smiley face by rendering a yellow SVG circle with a black outline, along with two black circles for eyes, onto a 960 by 500 canvas. The static markup positions the face elements using hardcoded coordinates, with half of the intended design completed. The code uses the React library, loaded via a production UMD build, and displays a console log of React. The SVG shapes are defined directly in the index.html file, showing a step toward a full face.

Mmhalamek26@gmail.com

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