Fork of Fork of Let's Make a Face Part I

100%

Fork of Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Nov 19, 2021

Created on Nov 19, 2021

Forked from Fork of Let's Make a Face Part I

This example shows a minimal React application that renders a static yellow SVG face with two black-outlined eyes, stopping short of completing a full smiley face. The code constructs the SVG elements directly in HTML comments, while the visible React component simply displays a heading and logs library versions. It imports React and ReactDOM from unpkg CDN links, using `ReactDom.render` to mount the app into the DOM. The rendering approach relies on standard SVG `circle` elements for the face and eyes, with coordinates calculated relative to the canvas dimensions.

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 simple React application renders a yellow smiley face as an SVG graphic. It uses hard-coded coordinates and constants to draw three circles: a large face outline with a black stroke, and two smaller black circles for eyes. The code defines variables for the SVG canvas dimensions, face center, stroke width, and eye offsets, then renders the elements using JSX. The visualization demonstrates basic SVG shape composition within a React component, with no interactive or data-driven behavior.

DDawn

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a simple smiley face using SVG primitives within a React application. The visualization displays a yellow circle with a black stroke for the head, alongside two smaller circles representing eyes, all positioned using explicit coordinates. The code uses React and ReactDOM to manage the rendering, while the SVG elements are defined directly in the HTML file. It also includes a JavaScript file that logs ReactDOM and renders a separate "Hello JSX" message, though the face itself is static and does not respond to interaction.

MManjot Pal Singh

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static, hand-coded SVG smiley face, with a yellow circle head, two dark eye circles, and a thick black stroke, while a React app renders only a placeholder "hello JSX" heading. The SVG markup is embedded directly in the HTML body, using fixed coordinates and dimensions (960x500), and the circle positions are manually set. The code imports React and ReactDOM from UMD builds, logs ReactDOM to the console, and mounts a basic functional component into a root div, but the visual result is entirely independent of the React logic.

Ssoap945

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A minimal React example plots a yellow circle face with two black eyes on an SVG canvas. It uses React 18's UMD build from unpkg and directly renders SVG elements for the face and eyes. The code calculates eye positions relative to the canvas center and face radius, demonstrating coordinate placement within an SVG viewBox. This static composition shows how to create a basic smiley face without interactivity or animations.

AArkaporn Poonkwan

94% 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, 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

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A React application renders a single yellow circle with a black outline, representing the initial step of a smiley face. The SVG is sized at 960 by 500 pixels, with the circle centered at (480, 250) and a radius of 245. React 16.9.0 and ReactDOM 18.0.0 are used via the `React.createElement` and `ReactDOM.render` APIs. The rendered output is static, showing only the face's base shape without eyes or a mouth.

Cchar0496

94% 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, positioned using fixed numeric coordinates for the SVG canvas. It uses React and ReactDOM to define and mount an `App` component that outputs SVG elements, with circles for the face and eyes. The code computes positions from width and height constants, and relies on React’s `createElement` via JSX to build the markup. The rendering approach is straightforward declarative SVG, with no interactive or animated behavior beyond the static composition.

YYohsuke Murase

94% match

Loading thumbnail…

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

94% match