Skip to main content
SimilarExport ZIP
100%

Smiley Part I

✓ Published0🌍 Public
JJeni Hoyt
Last edited Nov 28, 2023
Created on Nov 28, 2023
Forked from HTML Starter

This example creates a smiley face using two static eye circles and a larger yellow face circle, rendered as SVG elements. The HTML page relies on vanilla JavaScript and CSS to suppress margins and create a clean viewport, with no interactive behavior. The SVG’s `cx`, `cy`, `r`, `fill`, and `stroke` attributes define the geometry and styling, while the 960×500 canvas is drawn directly in the markup.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part I

This example draws a yellow smiley face using static SVG circles: a large filled circle for the head and two smaller stroked circles for the eyes. It uses plain SVG markup inside a React-rendered HTML page, with React and ReactDOM loaded from CDN. The head’s dimensions and eye offsets are noted in comments, and the page suppresses scrolling for a clean, focused display.

Xxpdnt1
94% match
Loading thumbnail…

Smiley Face Part 1

This example shows a basic smiley face drawn as three circles in an SVG: a large yellow face and two smaller eyes, with black strokes for outlines. The code uses plain SVG elements—`<svg>`, `<circle>`, and CSS styling—inside an HTML page to achieve the rendering. The positioning of the eyes is hardcoded via `cx` and `cy` attributes. It demonstrates a minimal static visualization without interactivity or data binding.

JJohn Robison
93% match
Loading thumbnail…

Smiley Face Part I

A static smiley face rendered as SVG shows a large yellow circle with two smaller black eyes inside. The circles are positioned using absolute `cx` and `cy` coordinates within a 960×500 viewport, with the face centered at (480, 250). The code uses plain SVG elements (`circle`) rather than a data-binding library, though the HTML includes a React script reference that is not utilized. Stroke thickness and fill colors define the visual style directly in the markup.

DDiego Rubio
93% match
Loading thumbnail…

Smiley Part I

A yellow smiley face rendered as a static SVG graphic. Three circles form the face and eyes, with the outer circle filled yellow and stroked black, while two smaller circles serve as eyes. The example demonstrates basic SVG shape creation using inline SVG elements within an HTML page, styled with minimal CSS to remove page margins and hide overflow. It uses React as the framework, though the visible code is plain HTML and SVG without React components or JavaScript interactions.

YYasmina Adimy
93% match
Loading thumbnail…

Smiley - Part I - HTML

This example demonstrates how to draw a static smiley face using raw HTML, CSS, and JavaScript, rendering two eyes and a head as SVG circles. The code uses inline SVG elements within an HTML page, with styling applied via a CSS rule that removes the page margin. The smiley is constructed by manually positioning each circle element using explicit `cx` and `cy` coordinates within an SVG canvas, without relying on any external libraries or data sources.

MMarcus Vinicius da Silveira Richa
93% match
Loading thumbnail…

Smiley face part 1

This example shows a simple smiley face constructed from three SVG circles: a large yellow face with a black stroke, and two smaller black eyes. The HTML page uses inline CSS to remove margin and hide overflow, while the SVG element sets a fixed width and height with hardcoded coordinates. The document uses no external JavaScript libraries, relying solely on raw SVG markup within the HTML file. The comment in the code hints at calculations for eye positioning, but the actual positions are static.

Kkatpyt
93% 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
93% match
Loading thumbnail…

Smiley Face Part I

This example creates a static yellow smiley face with black-outlined eyes and an implied mouth, rendered as SVG circles inside an HTML document. The face is centered on a 960 by 500 canvas, with two filled circles positioned as eyes and a large yellow circle serving as the head. React and ReactDOM are loaded via CDN, but the visible drawing is plain SVG markup. The accompanying `index.js` file renders a simple "Hello JSX" heading, showing the setup for a React component that is not yet integrated with the SVG face.

Mmatthamm@yahoo.com
93% match