Let's Make a Face Part II

100%

Let's Make a Face Part II

✓ Published0🌍 Public

Last edited Oct 14, 2020

Created on Oct 14, 2020

This example shows a simple smiley face composed of three SVG circles: a large yellow head with a black stroke and two smaller black eyes. It demonstrates how to use React with inline SVG to build a static graphic. The code defines constants for width, height, center positions, and offsets, then renders the circles using ReactDOM. It uses SVG circle elements, specifying coordinates and radii as attributes, with React 16.13.1 and ReactDOM 16.13.1 from the unpkg CDN. The resulting SVG is 960 by 500 pixels, with strokes and fills defined directly in the markup.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's Make a Face Part II

A simple SVG smiley face is drawn with three circles: a large yellow face with a black stroke, and two smaller black eyes. The example demonstrates basic React rendering through a production React build, while the SVG markup is placed directly in the HTML file. The static face is centered at 960 by 500 pixels, with eyes positioned symmetrically around the midline, and the code relies on ReactDOM for rendering the component bundle.

PPik Yin

95% match

Loading thumbnail…

Let's Make a Face Part II

This example presents a simple yellow smiley face rendered as an SVG graphic using React. The visualization shows a large circle for the face and two smaller circles for the eyes, all centered within a 960 by 500 canvas. The code defines geometric constants for positioning and sizing, then uses React’s `ReactDOM.render` to inject the SVG elements into the page. It relies on the React and ReactDOM libraries loaded from unpkg, with the SVG markup constructed directly through React component syntax.

FFábio Correia

95% match

Loading thumbnail…

Let's Make a Face Part I

This example shows a simple yellow smiley face rendered as an SVG, with a large circular head, two small eyes, and a black outline. The face is drawn using basic SVG circle elements positioned relative to the center of a 960 by 500 viewport. The code uses React and ReactDOM to render the SVG structure, with hardcoded values for the head radius, eye offset, and stroke width. The visualization demonstrates how React can generate declarative SVG markup for straightforward geometric shapes.

Ttjcocucci

93% match

Loading thumbnail…

Let's Make a Face Part II

This example presents a yellow smiley face drawn with simple geometric shapes in an SVG canvas. A large yellow circle forms the head, outlined with a black stroke, and two smaller black circles serve as the eyes. The code uses the React library, along with ReactDOM for rendering, to build the component. Explicit numeric constants define the canvas dimensions, eye placement, and stroke widths, making the layout easily adjustable. The application is structured as a set of nested `<circle>` elements within a single `<svg>` tag, demonstrating a straightforward approach to creating basic vector illustrations.

Ccoobeet

93% match

Loading thumbnail…

Smiley Face Part II

This example shows a yellow smiley face drawn as a set of SVG circles, with a large circular face and two eye circles positioned symmetrically around the center. The face is rendered using React and ReactDOM, with all shape properties—such as the face radius, eye offset, and stroke width—defined as JavaScript constants. The code builds an SVG element with a group transform to center the face at the midpoint of a 960 by 500 canvas, and it includes a commented-out static SVG version as an alternative starting point.

JJjavellana

92% match

Loading thumbnail…

Lets Make Smiley Face Part II

This example shows a smiley face drawn as a scalable SVG graphic using React. The face consists of a yellow circle for the head, two black circles for eyes, and a placeholder for a mouth, all positioned dynamically relative to the window size. The code uses React's `ReactDOM.render` to mount the component, and computes geometric values like `centerX`, `centerY`, `eyeOffsetX`, and `eyeRadius` to place elements. Rendering relies on SVG primitives within a `<g>` transform, with the head radius set to `centerY - strokeWidth / 2` to fit the viewport.

CClemarjon Laguardia

92% match

Loading thumbnail…

Smiley Face Part II

This example shows a simple smiley face made of three SVG circles: a large yellow circle for the head and two smaller black circles for eyes. The layout is calculated from fixed constants for the canvas size, center position, stroke width, and eye offsets. Using React and ReactDOM, the code renders the SVG directly, with the head circle’s radius derived from the canvas height and stroke width, and the eyes positioned symmetrically around the center.

JJarrod

92% match

Loading thumbnail…

Let's make a face: part 2

This example shows a yellow smiley face rendered as two eyes on a circular head, drawn entirely with SVG circles. It demonstrates how React manages declarative SVG attributes, using `cx`, `cy`, `r`, `fill`, and `stroke` properties. The code defines constants for width, height, center coordinates, and offsets, then computes eye positions from those values. It uses React 17 and ReactDOM to render the `<App />` component into the DOM, with all geometry derived from the same base variables to keep the layout consistent. The face is partially complete, omitting the mouth for a future step.

Rrvdv

92% match