Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Apr 16, 2021

Created on Apr 16, 2021

A yellow smiley face rendered as static SVG circles sits centered on a 960 by 500 canvas. The face uses a large yellow circle with a black stroke for the head, plus two smaller unfilled circles for eyes, positioned via hardcoded coordinates. The example is built with React 17, using plain SVG elements in JSX, with the script loaded from unpkg. It demonstrates a minimal, code-only approach to facial visualization without any dynamic behavior or data binding.

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 simple yellow smiley face built from three SVG circles—a large filled face and two smaller eyes—on a 960 by 500 canvas. The face is rendered directly in HTML using React 16.9.0, with both React and ReactDOM loaded from unpkg CDN. Instead of a data source, the visualization relies on hard-coded coordinates for positioning, while SVG’s native circle elements handle the drawing, with a black stroke outlining the face. It does not display any interactive or dynamic behavior, remaining a static composition.

TThais Scheneider

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow smiley face is drawn as a circular SVG shape, with one black eye and a thick black outline, centered on a 960 by 500 canvas. The example uses React to render SVG elements directly via JSX, defining circle components with fixed coordinates and radius values. It relies on the React and ReactDOM libraries from a CDN, with styling that hides page overflow. The face is static and incomplete, showing only a single eye, with no animation or interactive behavior.

RRishabh Gour

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG smiley face renders a yellow circle with two black-outlined eyes centered on a 960 by 500 canvas. The face is built directly in the HTML markup using numbered `<circle>` elements, with the head at position (480, 250) and eyes offset horizontally. The example accompanies a video tutorial on constructing faces step by step. While the page loads React and ReactDOM from CDN scripts, the current visualization uses plain SVG geometry without any React components or interactive behavior.

Cchenxlong3

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

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.

JJosephK98

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a static smiley face drawn with overlapping SVG circles: a large yellow head, two smaller black eye circles, and a curved mouth implied by a dashed path. The face is centered on an 960×500 canvas, with stroke styling on the head for emphasis. The code uses React and ReactDOM to render a placeholder "Hello JSX" heading, while the actual face markup is hardcoded in the HTML alongside the bundled React libraries. The visualization does not include interactive behavior or data-driven updates.

Bbut-whythough

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

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static, yellow smiley face drawn with three SVG circles: a large filled circle for the head and two smaller unfilled circles for eyes. The code defines the layout using React and ReactDOM, computing the center coordinates and radius from fixed width and height variables rather than hardcoding them. The rendering relies on SVG circle elements and an inline stylesheet to remove page margins.

BBrian Blakely

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a static yellow smiley face made of three SVG circles: a large head and two smaller eyes, positioned on a 960×500 canvas. The React framework renders a "Hello World" heading alongside the hardcoded SVG markup, which is drawn directly in the HTML using circle elements with explicit cx, cy, and r attributes. The visualization uses React 16.7 and SVG, with black strokes and a yellow fill, while the accompanying README notes it is halfway toward a more complete face.

RRob

95% match