Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Feb 27, 2021

Created on Feb 27, 2021

A static yellow smiley face rendered with React and SVG, missing the eyes and mouth. The example uses React 17 to generate three SVG circles: a large yellow face with a black stroke and two smaller black circles for eye positions. The drawing is hardcoded with absolute coordinates in a 960×500 viewport, demonstrating basic SVG shape composition without interaction or animation. JavaScript console logging confirms React is loaded, but no data or dynamic behavior is present.

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 yellow smiley face rendered as a circle with two eyes, built using React 18 and SVG. The code defines fixed dimensions for an SVG canvas, positions the face center and eyes using calculated offsets, and draws each circle with explicit fill and stroke attributes. The face is rendered through a React component that outputs SVG elements, with the eyes lacking any fill or stroke properties, leaving them invisible against the yellow background. The example demonstrates a simple static composition without interactivity or data binding.

Ttshardey

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

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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A static yellow smiley face rendered with SVG primitives shows a large circular head and two unmoving eyes on a 960×500 canvas. React 17 manages the page, while raw SVG elements define the shapes. The code does not include a mouth or any interactive behavior, stopping at the head and eyes as a half-complete illustration.

KKaihongGo

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a static, yellow smiley face constructed from three SVG circles: a large head and two smaller eyes, all rendered on a 960-by-500 canvas. The code uses React and ReactDOM to manage the page, while the drawing itself relies on raw SVG elements with hard-coded coordinates and stroke properties. A linked YouTube video explains the creation process, and the simple visual output demonstrates basic shape composition without any interactive or animated behavior.

JJosephK98

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

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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a static yellow smiley face made from three SVG circles: a large outlined face and two smaller eyes. The code uses React 17 via a UMD build to render the SVG elements directly in the browser. All coordinates and dimensions are hard-coded, with the face centered at (480, 250) and a 245-pixel radius. The rendering approach relies on plain SVG shapes without any interactive behavior or data-driven updates.

SShankar Ghimire

96% match