Skip to main content
SimilarExport ZIP
100%

Smiling face part 1

✓ Published1🌍 Public
Aadewole-top
Last edited Mar 19, 2021
Created on Mar 16, 2021
Forked from HTML Starter

This example shows a simple static smiling face, composed of a yellow circle for the head and two smaller black circles for the eyes, all drawn directly in a Scalable Vector Graphics (SVG) canvas. It demonstrates the use of raw SVG elements (circle) with explicit styling properties such as fill, stroke, and stroke-width, embedded within an HTML page. No JavaScript or CSS libraries are used, and the rendering relies entirely on the browser’s built-in SVG support, with the face’s proportions and positions hard-coded via the cx, cy, and r attributes.

AI-generated description

Half way towards the smiling face HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smily face part 1

This example displays a simple, static smiley face made of three SVG circles: a large yellow circle for the head, and two smaller black circles for the eyes, all centered on a 960 by 500 canvas. The implementation uses React, though the rendering itself relies on raw SVG elements (circle) with explicit coordinates and styling, rather than a visualization library. The circles set properties like `cx`, `cy`, `r`, `fill`, and `stroke` directly in the markup, creating a basic geometric illustration without interaction or animation.

Ttahasafdari
93% match
Loading thumbnail…

Smiling face PartI

This example renders a static smiling face using React and SVG. It shows a yellow circle with black stroke as the head, and two smaller black circles for eyes, positioned symmetrically on the face. The rendering approach uses plain SVG elements—`<circle>` tags—directly embedded in the HTML, with styling applied via standard SVG attributes like `fill`, `stroke`, and `stroke-width`. The code includes both a React component (`ReactDOM.render`) and minimal CSS, though the visible visualization relies entirely on the static SVG markup rather than dynamic data or interactions.

00128momo
93% match
Loading thumbnail…

Smiley face part 1

This example displays a static yellow smiley face composed of three SVG circles, drawn on a 960-by-500 canvas with a black outline. It shows a basic vector face, but the eyes are unfilled, leaving them transparent against the page background. The rendering relies entirely on raw SVG elements embedded in an HTML file, bypassing any dynamic computation. Although the page loads the React library via a script tag, the code uses no React components or APIs; it only logs the React object to the console before drawing the shapes.

BBilly Owire
92% match
Loading thumbnail…

Smiling face

This example renders a simple smiling face using only SVG shapes. Two black circles form the eyes, while a larger yellow circle with a black stroke creates the head and implied mouth. The composition is static, with all elements positioned absolutely within an SVG canvas. The code relies on raw SVG markup and CSS within an HTML document, with no additional JavaScript libraries or data processing involved.

JJoão Pedro
92% match
Loading thumbnail…

Smily Face Part 1

This example shows a simple smiley face constructed from three SVG circles, rendered on a 960-by-500 canvas. The face uses a large yellow circle for the head, with two smaller black circles for eyes; the code sets each circle’s center, radius, fill, and stroke. Drawn using React’s SVG support, it relies on basic SVG circle elements and inline CSS styling, with no interactivity or animation. The composition is static, demonstrating fundamental vector shapes and stroke styling.

MMustapha-coder
92% match
Loading thumbnail…

Smiley face Part 1

This example displays a static smiley face constructed from three SVG circles: a large yellow face with a black outline and two smaller black circles for eyes, rendered on a 960 by 500 canvas. The drawing is implemented directly in the index.html markup using basic SVG elements, including circle tags with explicit coordinates and stroke attributes. Although the page loads React and ReactDOM libraries, the code does not utilize them for the visualization itself; the bundled JavaScript is minimal. The face is centered horizontally and vertically, with the eyes positioned symmetrically around the center point.

FFlore
92% match
Loading thumbnail…

Smiley face part 1

This example shows a simple smiley face drawn with three circles on an SVG canvas: a large yellow circle for the head and two smaller black circles for eyes. The SVG is rendered directly in the HTML, with CSS controlling the page layout and hiding overflow. It uses the basic SVG `<circle>` element with attributes for position, radius, fill color, and stroke styling, demonstrating static graphic composition without interactive behavior.

VVenkat Ram
92% match
Loading thumbnail…

Smiled face PART I

This example displays a static smiley face composed of three SVG circles: a large yellow circle for the head and two smaller black circles for the eyes, all placed on a 960 by 500 canvas. The graphic is rendered using raw SVG elements defined directly in the HTML body, while a separate JavaScript file imports React and ReactDOM to render a simple “Hello JSX” heading into a root div. Although the React framework is loaded, the face itself does not rely on React components or data.

Bbbarchu
92% match