Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Mar 16, 2021

Created on Mar 16, 2021

A React application renders a smiley face as a static SVG graphic, showing two black eyes on a yellow circular head with a black outline. The components are built using React’s `createElement` syntax within JSX, and rendered into the DOM via `ReactDOM.render`. The layout is computed from fixed constants for canvas width, height, center coordinates, and eye offsets, with SVG circle elements specifying positions and radii. The project uses React 17 and ReactDOM, with the visualization serving as an introductory exercise in declarative SVG drawing.

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

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

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

A static React application renders a simple smiley face as an SVG graphic, consisting of a yellow circle with a black outline and two smaller black circles for eyes. Using React 16.9.0, the code defines the face directly in JSX within an HTML file, with ReactDOM and React loaded from CDN. The example demonstrates basic SVG shape rendering through React components, though interactive behavior noted in the embedded video is not implemented in this version.

Bblueyjuice

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face drawn in SVG, with a yellow circular head and two black eyes positioned on a blank background. It demonstrates how to build a basic visual component using React 16.9.0, where the SVG elements are defined directly in the JSX-like markup within the HTML file. The code uses React’s `React` and `ReactDOM` production builds from unpkg, while the rendering relies purely on SVG circle elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. No interactivity or animations are present, as the face is incomplete—it lacks a mouth—and the project is a fork of a tutorial series.

PPratik Raja

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built with React and SVG: a yellow circle for the head and two black circles for eyes. The code uses React 16.7 to render static SVG elements, with hardcoded `cx`, `cy`, and `r` attributes positioning the shapes. The rendering approach is direct SVG markup inside JSX, with no interactivity or animation. It is a partial implementation, lacking a mouth, and serves as a basic demonstration of combining React with SVG for declarative shape drawing.

MMustapha-coder

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of “Let’s Make a Face Part I” plots a static smiley face using React and SVG primitives. The visualization shows a yellow circle head with two black eye circles, rendered directly in the HTML with hardcoded coordinates. React 17 and ReactDOM manage the page structure, while the facial elements are drawn as SVG `<circle>` elements with explicit fill, stroke, and stroke-width attributes. No interactive behavior or data binding is present; the example serves as a minimal, self-contained illustration of SVG drawing within a React shell.

LLejla Kafedzic

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

94% match