Let's make a face

100%

Let's make a face - Part I

✓ Published0🌍 Public

Last edited Apr 24, 2022

Created on Apr 19, 2022

This visualization builds a simple cartoon face from basic SVG shapes. It draws a large yellow circle for the head, two smaller black circles for eyes, and a curved path that forms a smiling mouth. The code uses raw SVG elements—`circle` and `path`—with hardcoded coordinates and styling attributes like `fill`, `stroke`, and `stroke-width`. The entire scene is rendered in a 500x960 viewBox without any JavaScript libraries, relying solely on React's rendering of the SVG markup within an HTML page.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face - Part I

A simple SVG face composed of three overlapping circles—a large yellow head and two black eyes—rendered in a fixed 960×500 viewport. The example demonstrates static SVG drawing within a plain HTML page, with the React library loaded via CDN but only used to log the global `React` object to the console. No interactive behavior or data binding occurs; the face is defined directly with circle coordinates and stroke properties in the markup. The code relies on native SVG elements and React 16.9, with styling presumably applied via an external stylesheet.

BBagaski

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

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…

Lets make a face (Part-I)

This example shows a simple cartoon face built from three SVG circles: a large yellow head and two smaller black-outlined eyes. The code uses React 16.12.0 loaded via a UMD script, and renders the face directly through static SVG markup in the HTML file. The face is drawn with `circle` elements, using explicit `cx`, `cy`, `r`, `fill`, and `stroke-width` attributes. The page sets a light blue background and hides overflow, with the face centered on a 960×500 canvas.

NNita

91% match

Loading thumbnail…

Let's Make a Face Part I

A yellow face with black outlined eyes is drawn as a simple SVG composition using React. The code renders circles for the face and eyes, with fixed positions calculated from the viewport dimensions. It uses ReactDOM to mount the component, and the SVG elements are defined directly in JSX with explicit attributes for radius, stroke, and fill.

DdRAPGb

91% match

Loading thumbnail…

A smiling face is drawn on a yellow circular head using basic SVG shapes. The visualization constructs the face from a large yellow circle for the head, two smaller black circles for the eyes, black lines for eyebrows, and a curved arc for the mouth, all centered on an 960x500 canvas. The code uses D3.js v5 selection and attribute methods to create and position the shapes, and leverages the `d3.arc` API to generate the path for the mouth. The rendering is done entirely through SVG elements appended to the root `<svg>` element.

Aaashirshk20

91% match

Loading thumbnail…

Let's Make a Face Part I

A static SVG face composed of three circles: a large yellow head with a black stroke, and two smaller black eyes positioned symmetrically. The circles are drawn using raw SVG elements, with coordinates and radii hardcoded directly in the markup. This example uses plain HTML and CSS, with no JavaScript libraries or data sources, to demonstrate basic shape composition and styling within an SVG canvas.

Jjwlam83

91% match

Loading thumbnail…

Let's Make a Face Part V

This example renders a stylized cartoon face composed of SVG primitives, featuring a yellow circular background, two dark eyes, and a smiling mouth. The face is built using React components that wrap SVG elements: `BackgroundCircle`, `Eyes`, and `Mouth`. The mouth shape is generated with D3’s `arc` generator, applying inner and outer radii with start and end angles to create a semi-circular curve. All facial features are positioned relative to a central group transform, ensuring the composition stays centered in the viewport.

AAlexa Cristina

91% match