Skip to main content
SimilarExport ZIP
100%

A smiley face

✓ Published0🌍 Public
Aaditya-ux27
Last edited Apr 12, 2023
Created on Apr 12, 2023
Forked from HTML Starter

This example shows a simple smiley face constructed from basic geometric shapes. The yellow circle forms the face, two smaller black circles create the eyes, and a short black line acts as the mouth. The chart is rendered using Scalable Vector Graphics (SVG) within an HTML page, with each shape defined as a separate SVG element. The code directly specifies positions, radii, and stroke properties for all elements.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

A smiley face

This example shows a simple smiley face rendered as a static SVG graphic, composed of a yellow circular head, two black eyes, and a curved line for the mouth. The visualization uses plain SVG elements—`circle`, `line`, and a `g` group—within an HTML page, styled with attributes like `fill`, `stroke`, and `stroke-width`. The React framework is not actively used despite being listed; the code relies directly on the browser’s native SVG support to draw the face on a 960×500 canvas.

Aankxxit
92% match
Loading thumbnail…

A Smiley Face

This example shows a smiley face constructed from geometric shapes, with a yellow circular head, two black eyes, and a straight mouth line on an SVG canvas. The visualization uses React 18.2 and D3.js conventions through hardcoded SVG elements, including the `circle`, `line`, and `g` tags, all rendered directly in the DOM via a pre-bundled script. The face demonstrates basic SVG coordinate positioning (using `cx`, `cy`, `x`, and `y` attributes) and styling through fill and stroke properties, with the entire figure centered at (400, 250) on a 960×500 canvas.

Mmeghagoyal17
92% match
Loading thumbnail…

Creating a smiley face

This example shows a simple smiley face constructed from three SVG circles: a large yellow circle for the head and two smaller black circles for the eyes. The head is drawn with a black stroke and a fill of yellow, while the eyes use only a black fill. The code uses plain SVG elements rendered directly in HTML, with CSS styling applied to remove page margins and hide overflow. The face is centered using explicit x and y coordinates (cx and cy) and sized with radius attributes, with no interactive or animated behavior.

NNarottam Medhora
92% 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…

Smiley Face

This example shows a static yellow smiley face drawn with two black eyes on a plain background. The face is rendered as SVG shapes inside an HTML page. The visualization uses React and ReactDOM libraries to render the SVG elements, with the page structured as a single `<svg>` containing three `<circle>` elements for the face and eyes. The simple geometric shapes and fixed coordinates define the entire graphic without any interactive or animated behavior.

CChin-Long Shu
90% match
Loading thumbnail…

Smiley Face

This example displays a static smiley face rendered as a yellow circle with two oval eyes, each containing a black pupil, and a curved mouth implied by the SVG shapes. Constructed with React 17 and plain SVG elements, the visualization uses hard-coded circle coordinates for the face and eyes, with yellow fill, black strokes, and thick stroke widths. The SVG canvas is set to 960 by 500 pixels, and the drawing is embedded directly in HTML without any interactive behavior or data-driven updates.

Rreshali35
90% match
Loading thumbnail…

Making a smiley face

This example shows a simple smiley face drawn with basic SVG shapes. The face consists of a large yellow circle for the head and two smaller black circles for the eyes, all defined directly in an `index.html` file. The rendering relies on raw SVG elements, with no additional JavaScript logic beyond loading the React libraries. The React framework is included, but the visualization itself is static, created purely through SVG markup, and provides a minimal demonstration of combining React with SVG output.

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