Let's Make a Face Part I

100%

Let's Make a Face Part I - Vitek

✓ Published0🌍 Public

Last edited Mar 10, 2021

Created on Mar 10, 2021

A static SVG face drawn with React 17 features a yellow circle for the head and two smaller black circles for eyes. The code uses hardcoded coordinates and stroke properties directly in JSX, with the `<circle>` elements positioned at fixed cx and cy values on a 960 by 500 canvas. This first part of a two-part series stops halfway toward a smiley, omitting the mouth. The rendering relies on React’s UMD production build and inline SVG, with no interactive or animated behavior.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

A static yellow smiley face rendered as SVG, with a black outlined circle for the head and two smaller unfilled circles for the eyes, appears against a blank viewport. The example uses React to structure the SVG elements directly in JSX, with hard-coded coordinates and dimensions for a 960×500 canvas. The code includes a separate React app that logs the React object and renders a simple heading, while the face is drawn in the HTML file using inline SVG tags. The rendering approach relies on basic SVG primitives without dynamic data or interaction.

Iillus0r

92% match

Loading thumbnail…

Let's Make a Face Part I

This example shows a static smiley face made from three yellow circles with black outlines, all rendered inside an SVG canvas. The face is drawn using React elements, with two smaller circles representing eyes and a large circle serving as the head. The code uses React 16.7.0 and displays the face directly in the HTML, with no interactive behavior or data-driven updates. The title references a potential series, but the visualization itself is purely visual.

CClara Hu

92% match

Loading thumbnail…

Let's Make a Face Part I

A static SVG face built with React 16.12.0 displays a yellow circle with black stroke as the head, plus two smaller unfilled circles for eyes, drawn at fixed coordinates. The example uses raw JSX-style SVG elements within an HTML file, with React loaded from a CDN, and includes a placeholder script tag. The face lacks a mouth, showing a half-finished construction.

JJenBirchmore

92% match

Loading thumbnail…

Let's Make a Face Part I (2nd try)

A smiling face rendered with SVG circles, built using React and ReactDOM. The example draws a yellow head, two black eyes, and sets up the structural constants and positions that would eventually form a smile, though the mouth is not yet drawn. The face is generated declaratively through JSX, with hardcoded numeric values for center, offsets, and radii, and it relies on React’s virtual DOM to update the SVG elements.

JJjavellana

91% match

Loading thumbnail…

Let's Make a Face Part I

This example builds toward a smiley face by rendering a large yellow circle with a black outline, two smaller filled circles for eyes, and space left for a future mouth. The SVG is written directly in the HTML using React, with React 16.7 loaded from a CDN and a separate `bundle.js` script. Static coordinates position the face elements on a 960 by 500 canvas, and the code logs the React object to the console, demonstrating a minimal React-based SVG composition.

KKenneth Goh

91% match

Loading thumbnail…

Let's Make a Face Part I

A yellow smiley face rendered with three SVG circles appears against a blank background. React 18 manages the component tree, while SVG attributes define the face’s geometry: a large yellow circle for the head with a black stroke, and two smaller black circles positioned symmetrically for eyes. The code computes coordinates from fixed width, height, and offset constants, using React's `createElement` through JSX to render the SVG elements directly in the browser.

MMorgan Worrell

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

91% match

Loading thumbnail…

Let's Make a Face Part I

A static SVG face diagram shows a yellow circle with two smaller black circles as eyes, stopping short of a complete smile. The drawing is hardcoded in the `index.html` file using inline SVG elements with explicit `cx` and `cy` coordinates. The page imports React 17 via a UMD script, but `index.js` only logs the React object to the console, so no interactive or dynamic behavior is present. The rendering is purely declarative SVG markup, with the circle positions computed manually rather than through any layout or drawing library.

TTang Ye

90% match