second phase: Making face part I

100%

second phase: Making face part I

✓ Published1🌍 Public

Last edited Jun 22, 2021

Created on Jun 21, 2021

This example displays a simple cartoon face made of three SVG circles: a large yellow circle for the head and two smaller circles for the eyes, all rendered directly within the page’s markup. The work demonstrates hand-coded SVG primitives styled with presentation attributes like `cx`, `cy`, `r`, `stroke`, and `fill`. The entire visualization is static, relying on inline SVG in the HTML body without any JavaScript or external libraries, making it a pure structural illustration of the SVG coordinate system and shape styling.

AI-generated description

A bare minimum html, css, svg HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of second phase: Making face part II

This example visualizes a stylized face using React and SVG, displaying a yellow circular head with two symmetrical eyes positioned relative to the center. The code defines constants for dimensions, offsets, and radii, then renders the shapes using SVG `<circle>` elements. It relies on React and ReactDOM to mount the component into the DOM, with the SVG output styled by minimal CSS that removes margins and hides overflow. The drawing is entirely procedural, with no external data source.

Aadewole-top

88% match

Loading thumbnail…

Face Part II

This example displays a simple face constructed from three SVG circles: a large yellow head with black stroke and two smaller eyes. The static visualization uses React and ReactDOM for structure, with the circles defined directly in the HTML. The code demonstrates JSX rendering through the App component, while the SVG elements are present in the DOM alongside the React-managed content.

RRichard Premvaree

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

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

85% match

Loading thumbnail…

Face Part 1

This example shows a simple face constructed from three SVG circles: a large yellow head with a black outline and two smaller black eyes. The head circle is positioned at the center of the viewport, while the eyes are offset horizontally to the left and right. The visualization is rendered directly in the index.html file using inline SVG elements, with React and ReactDOM loaded from CDNs but not actively used in the visible drawing. The code demonstrates basic SVG circle positioning with explicit cx and cy coordinates, along with fill, stroke, and stroke-width styling.

Jjdyeux

85% match

Loading thumbnail…

Face Part I

A yellow face rendered as an SVG circle with a thick black outline and two smaller black circles for eyes. The code uses raw SVG elements within an HTML page, styled with CSS for centering and removing page margins. It demonstrates basic React-free SVG composition, with the face drawn directly in the markup. The face is static, showing the use of SVG’s `<circle>` elements for simple geometric data visualization.

RRichard Premvaree

84% match

Loading thumbnail…

Let's Make a Face Part I

This example renders a simple face using three SVG circles: a large yellow circle with a black stroke for the head, and two smaller black circles for eyes. The markup is hand-coded directly in the HTML file, with inline attributes for positioning (cx, cy) and radius (r). It uses no external JavaScript libraries, only plain HTML and CSS. The face is centered on a 960 by 500 pixel canvas, with the eyes placed symmetrically around the center point.

CCees Klap

84% match

Loading thumbnail…

Let's make a face - Part I

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.

AAna Penedos

84% match