Skip to main content
SimilarExport ZIP
100%

Smiling face

✓ Published7🌍 Public
JJoão Pedro
Last edited Sep 1, 2023
Created on Sep 1, 2023
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiling face part 1

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.

Aadewole-top
92% match
Loading thumbnail…

Smily face

A smiling face rendered in SVG, with a large yellow circle for the head, outlined in black, and a smaller black circle for an eye. The face appears centered on a white canvas with no additional features or interactivity. The visualization is a static, minimalist composition created with HTML structure, supported by React and ReactDOM libraries. The SVG drawing is implemented directly in the markup, using basic geometric shapes without any computed data or animation. The example demonstrates a simple, single-frame graphic output.

Kkhiantona
91% 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
91% match
Loading thumbnail…

smily face

This example shows a simple smiling face constructed from SVG shapes, with a large yellow circle for the head and a smaller black circle for one eye. The page uses plain HTML, CSS, and JavaScript without any external libraries, embedding the SVG directly in the markup. The SVG canvas is set to 960 by 500 units, with the head centered and styled with a yellow fill and black stroke, while the eye is positioned off-center to suggest the face’s expression. The CSS resets body margins and hides overflow for a clean, full-viewport display.

SSamareshMS
91% match
Loading thumbnail…

Smily Face

This example displays a simple smiling face rendered as a static SVG graphic, composed of a yellow circular head with black eyes. The visualization is created using React, with the SVG elements defined directly in the HTML markup and styled via inline attributes for fill, stroke, and dimensions. The code references the React and ReactDOM libraries from a content delivery network, while the JavaScript file contains a minimal React component that renders a heading, though this component is not integrated into the displayed graphic.

PPipo
91% match
Loading thumbnail…

Smiling face

This example shows a simple smiling face rendered as an SVG graphic, consisting of a large pink circle for the head and two smaller black circles for the eyes. The face is drawn directly in the HTML markup using SVG elements such as `circle` and `svg`, with CSS controlling the page layout through a `message` class. The visualization is built with React, although the current page only loads the React library and logs it to the console, while the actual drawing relies on static SVG tags. The rendering approach is purely declarative, with no interactive behavior or data-driven updates.

Yyangioe
91% match
Loading thumbnail…

Smiley Face

This example displays a simple smiley face rendered as an SVG graphic. It shows a large yellow circle with a black outline as the face, and two smaller black circles positioned to represent the eyes. The illustration is created using raw SVG elements within an HTML page. The code defines the shapes using `<circle>` elements, setting the main face’s center, radius, fill, and stroke, while the eyes are positioned relatively based on the face’s center. The page uses CSS for basic layout, ensuring the SVG fits without margins or scrollbars. The rendering relies on the browser’s SVG support, with no additional JavaScript libraries.

Oooihuien
90% match
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
90% match