Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Oct 3, 2022

Created on Oct 3, 2022

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.

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

96% match

Loading thumbnail…

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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static yellow smiley face rendered as SVG circles, drawn directly in the HTML body. The code uses React 18 and ReactDOM 17, though the actual face is hard-coded SVG markup rather than React components. The face consists of three circles: a large yellow head with a black stroke, and two smaller black eyes positioned symmetrically. The index.js file contains a basic React component that would render "Hello JSX," but it does not interact with the face.

Aaggarwalc

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

96% match

Loading thumbnail…

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

This example shows a static yellow smiley face built with a large circle for the head and two smaller circles for the eyes, all rendered in SVG. The HTML markup positions the face at the center of a 960-by-500 viewport, using explicit coordinates for each circle. The React code imports React and ReactDOM, defines a simple functional component that returns "Hello JSX," and renders it into the root element, though the SVG face is placed directly in the HTML file. The project relies on React v16.7.0 and ReactDOM, with the face serving as a visual starting point for a tutorial series.

Jjanenoxid

96% match

Loading thumbnail…

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

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face rendered in React, with a yellow circle for the head, a black outline, and two smaller circles for eyes. The code uses React 18 and ReactDOM to render the SVG directly in the browser. It appears to be a work-in-progress, as the facial elements are incomplete. The source includes an instructional video link, suggesting this is a practice exercise. The SVG dimensions are fixed at 960 by 500 pixels, with circles positioned using explicit coordinates.

Ootis

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

95% match