Fork of Let's Make a Face Part I

Fork of Let's Make a Face Part I

This example renders a static SVG smiley face: a yellow circle with a black outline, two solid black eyes, and a path for a mouth. The code uses React to manage the SVG elements inside an index.html file, with coordinates hard-coded for a 960×500 viewport. The rendering approach relies on standard SVG circle elements, positioned via cx and cy attributes, with the mouth path drawn using a bézier curve. The example demonstrates a simple, declarative visualization built with React’s JSX-style markup.

PPierre Tabet

Fork of Let's Make a Face Part I

This example shows a static smiley face constructed from three SVG circles: one large yellow circle for the head and two smaller black circles for the eyes. The SVG markup is embedded directly in the HTML, while the linked React code renders only a simple “Hello JSX” heading. The visualization demonstrates a basic geometric composition using SVG primitives with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. React and ReactDOM are loaded from CDN, though the visible face does not depend on React rendering.

MMichaelSel

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 shows a simple, static SVG smiley face composed of three circles: a yellow head with a black border and two black eyes. It is a React-based fork of a tutorial, with the ReactDOM render call displaying a placeholder “Hello JSX” heading. The SVG markup is embedded directly in the HTML, using explicit `cx`, `cy`, `r`, and `stroke-width` attributes to position and style the shapes, while the `index.js` file sets up the React application with `react` and `react-dom`.

LLawrence Liu

Fork of Let's Make a Face Part I

This example shows a static smiley face rendered with React and SVG elements. A yellow circle with a black stroke forms the head, while two smaller black circles positioned with fixed coordinates serve as eyes. The code defines the face directly in JSX inside the HTML file, using plain SVG circle tags without any interactive or animated behavior. React and ReactDOM are imported via CDN, and the rendering approach relies on hardcoded pixel values for all shapes. The project is linked to a YouTube tutorial on creating faces, though no face components or drawing logic are implemented programmatically.

MModliestOrange

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

Fork of Let's Make a Face Part I

This example renders a simple smiley face using React and SVG. Two black circles form the eyes, positioned symmetrically on either side of the canvas center, while a larger yellow circle with a black stroke serves as the face. The code defines the layout with constants for width, height, and eye offsets, then uses ReactDOM’s `render` method to draw the shapes into the root element. The SVG output is generated declaratively through React’s JSX syntax.

TtrwMK

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, and two smaller black eyes. It is a React application that renders the face directly in the HTML markup, providing no interactivity. The code uses React 16.9 and ReactDOM to render an `App` component, though the visible face is hard-coded in the SVG within `index.html` rather than generated by React. The project references a video tutorial and is forked from another visualization, but only the basic SVG shapes are present.

RRavisista1303