Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Sep 22, 2023

Created on Sep 22, 2023

This gallery example displays a minimal smiley face, constructed with three SVG circles: a large yellow face and two smaller eyes. The code uses raw SVG elements directly within an HTML file, with a script tag linking to the React library but no actual React components or JavaScript logic. The rendering is static, with coordinates and radii hard-coded to position the eyes symmetrically on the yellow face. The project relies on SVG's native shape rendering, without any dynamic data or interaction.

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 smiley face built with three SVG circles: a large yellow face with a black outline and two smaller black eyes positioned symmetrically on either side. The code uses React, though the markup itself is plain SVG without any dynamic logic or interaction. The face is centered at 480, 250 on a 960 by 500 canvas, with the eyes placed at fixed x-coordinates to suggest a playful expression. The rendering relies on standard SVG element attributes for position, fill, and stroke, producing a static, minimal illustration.

AallegedStink

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This gallery piece displays a static smiley face constructed from three SVG circles: a large yellow head with a black stroke and two smaller eyes positioned symmetrically on either side. The work is built with React and rendered as SVG, using hard-coded coordinates and radii. The code loads React and ReactDOM from a CDN, but the visible display comes directly from the trailing SVG markup, not from the React component, which only outputs a heading. The example thus contrasts a functional React setup with a purely declarative SVG drawing.

SStoockbroker

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

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 shows a simple, static smiley face built from three SVG circles: a large yellow face with a black outline and two smaller black eyes. It is a React component rendered directly to SVG using ReactDOM, with the face positioned at the center of a 960 by 500 viewport. The circles are defined with explicit `cx`, `cy`, and `r` attributes, and the face’s yellow fill and stroke are set inline. No interactive behavior or animation is present.

Bbcodington-ne

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a static smiley face constructed from SVG circles: a large yellow head with a black outline and two smaller black circles for eyes. The code uses React and ReactDOM to manage the page, while the face itself is drawn directly in the markup. The rendering relies on SVG primitives within a fixed 960-by-500 viewport, with coordinates placed to center the head and position the eyes symmetrically. The project shows a foundational step toward a more complex face, with only the head and eyes present so far.

Ggzm17

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a simple yellow smiley face built from three SVG circles: a large face outline and two smaller eyes. It uses React (version 16.9) to render the SVG elements declaratively, computing positions from constants like `centerX`, `centerY`, and `eyeOffsetX`. The face is drawn with a yellow fill, black stroke, and a stroke width of 10, while the eyes are plain black circles. The code defines the layout entirely with JavaScript variables and React components, avoiding any external data or geometry libraries.

Ssimrangajsinghani

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This visualization displays a simple smiley face built from three SVG circles: a large yellow face with a black outline and two smaller black eyes. The code uses React, loaded via CDN, to render the SVG elements directly in an HTML page, with the face centered at coordinates (480, 250) and eyes positioned symmetrically at offsets from the center. The SVG is configured with a width of 960 and height of 500, and styles in the body remove margins to allow the graphic to fill the viewport. The example appears to be an initial step toward a more complex face.

CChin-Long Shu

95% match