Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Mar 20, 2021

Created on Mar 20, 2021

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.

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

97% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example uses React to render an SVG smiley face. The code draws a yellow circle for the head and two smaller black circles for eyes, with positions calculated from the SVG’s center coordinates. React 17 and ReactDOM are used to mount the component, which is composed entirely of SVG circle elements. The face’s dimensions and offsets are defined as constants, and the rendering shows a static, basic facial geometry without animation or additional features.

CCbrc27

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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example builds a simple smiley face using React and SVG, rendering a yellow circle with two black eyes. The face is drawn with three `<circle>` elements, where the head and eye positions are calculated from fixed width, height, and offset variables. The code uses ReactDOM to mount the component, and computes the head radius from the height minus a stroke width. It demonstrates basic SVG styling with fill, stroke, and positioning in a 960x500 viewport.

CChirag Bansal

96% match

Loading thumbnail…

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

96% match

Loading thumbnail…

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

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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example builds a simple smiley face using React and SVG, with a yellow circle for the head, two smaller circles for eyes, and a comment noting that a mouth is missing. The code imports React and ReactDOM, then renders a static SVG containing three circles with fixed coordinates, stroke, and fill attributes. The rendering approach is direct SVG markup embedded in an HTML file, with React included via CDN scripts. The visualization demonstrates basic shape composition and layout, though it does not yet implement the full face described in the project title.

IIrene-zou

96% match