Skip to main content
SimilarExport ZIP
100%

DVCA: Make a Face pt 1

✓ Published0🌍 Public
MM.Sterling
Last edited Jan 7, 2023
Created on Jan 6, 2023
Forked from HTML Starter

This example shows a simple yellow face constructed from three SVG circles: a large head and two smaller eyes, all drawn on a 960 by 500 canvas. The rendering uses raw SVG elements defined directly in the HTML markup, with styling applied via CSS and no JavaScript libraries. The face is static, with the head and eyes positioned using explicit cx and cy coordinates, and outlined with a black stroke. The code relies entirely on native SVG circle elements and inline CSS for presentation.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a face

This example shows a simple yellow face constructed from three SVG circles on a 960-by-500 canvas. The face’s head is drawn with a large yellow circle outlined in black, while two smaller black circles serve as eyes, positioned symmetrically around the center. The code uses plain SVG elements (circle) with attributes for radius, center coordinates, fill, and stroke, rendered directly in HTML without any JavaScript libraries or data sources. The visual result is a minimal, static illustration that demonstrates basic SVG shape composition and positioning.

SSahhimanshu7
90% match
Loading thumbnail…

dv2020-ep5-viz02 - Face

A hand-drawn face appears as a yellow circle with black eyes on a blank SVG canvas. The code manually positions three circle elements—one for the head and two for the eyes—using hardcoded coordinates, with the head outlined in black. This example uses no external data or libraries, relying solely on raw SVG markup within an HTML document. The rendering approach is direct manual SVG code, illustrating the foundational step of creating shapes without any JavaScript or visualization framework. The fixed dimensions of 960 by 500 pixels frame the static, non-interactive composition.

Zzach b.
88% match
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
87% match
Loading thumbnail…

Make a Face

This example shows a simple, static face built from three SVG circles: a large yellow head with a black outline and two smaller black eyes positioned symmetrically on the face. The code uses React 18 to render the structure, with the SVG elements defined directly in the HTML file. The circles are styled using standard SVG attributes like `cx`, `cy`, `r`, `fill`, and `stroke-width`, demonstrating basic geometric composition without any interactive or animated behavior.

NNicolas Neira
87% 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
87% match
Loading thumbnail…

Let's Make a Face Part I

This example shows a simple, static face constructed from three SVG circles: a large yellow circle for the head and two smaller circles for the eyes, all centered on a 960 by 500 canvas. The rendering relies on React and ReactDOM to inject the SVG elements into the HTML page, while the `bundle.js` file executes the JavaScript. The face is drawn directly in the markup with hardcoded coordinates and styling, including a black stroke on the head circle, and does not involve any data processing or interactivity.

Jjamieagape
87% match
Loading thumbnail…

Face SVG

This example shows a simple face constructed from SVG circles inside an HTML page. The code uses SVG elements—a large yellow circle for the head and two smaller circles for eyes—rendered through static markup. The SVG canvas is set to 960 by 500 pixels, with the face centered and framed by a black stroke. It relies on plain CSS for page margins and overflow control, with no additional JavaScript or framework, despite the React-ready environment.

AAlexander Maina
87% 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
87% match