Skip to main content
SimilarExport ZIP
100%

Data Viz Smiley Face

✓ Published0🌍 Public
SShankar Ghimire
Last edited Apr 4, 2022
Created on Apr 4, 2022
Forked from Hello HTML

This basic SVG graphic draws a smiley face using two nested groups of circles. A large yellow circle forms the head, with a black outline, while two smaller black circles create the eyes. The example uses the SVG circle element within an 800-by-500 viewport, demonstrating minimal markup for geometric shapes without any interactive or data-driven features.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Viz - D3 smilie

A yellow smiley face rendered in SVG sits at the center of a 960-by-500 canvas. Two solid black circles form the eyes, while a thick black stroke outlines the face against a dark background. The visualization uses static SVG markup with `<circle>` elements and inline styling, not D3.js functions or data bindings. It demonstrates basic shape composition and stroke styling in a minimal HTML page.

Ssgc1026@gmail.com
90% match
Loading thumbnail…

smiley face

A simple SVG drawing renders a yellow smiley face on a black-stroked circle. Two black circles form the eyes, while the mouth is absent, leaving an incomplete expression. The code uses raw SVG elements—`circle` for the face and eyes—with explicit coordinates and stroke properties. No JavaScript libraries or data sources are involved; the visualization is purely static markup within an HTML page.

Ppankajiiitm
88% match
Loading thumbnail…

This is a Smiley Face

This example draws a simple smiley face using SVG circles. A large yellow circle forms the head, while two smaller black circles serve as eyes, all positioned within a 500 by 960 viewport. The visualization is built with plain HTML and CSS, using SVG `circle` elements to render each shape statically without animation or data binding.

DDraconis1992
88% match
Loading thumbnail…

Smiley Face Part 1

This example presents a static SVG rendering of a smiling face, featuring a large yellow circle with a black outline for the head and two smaller filled circles for the eyes. The visualization draws its shapes declaratively using SVG elements—specifically three `<circle>` tags—directly embedded in the HTML body. The first circle defines the face with explicit fill and stroke attributes, while the latter two circles position the eyes without additional styling. The code uses plain HTML and SVG markup, with no external libraries or JavaScript, and the page is set to hide overflow. The data source is the hardcoded coordinates within the SVG viewport.

Zzhangwbhi
88% match
Loading thumbnail…

Smily Face

A yellow circle with a black outline serves as a smiling face, with two smaller black circles positioned as eyes on a white background. The SVG is rendered at 960 by 500 pixels, with the face centered and the eyes placed symmetrically using explicit coordinate values. The markup uses basic SVG elements—`circle` for the face and eyes—with CSS styling for body margins and overflow. No interactivity or animation is present; the visualization is a static, minimal example of geometric shape composition.

YYumin Gui
88% match
Loading thumbnail…

Smily face

A simple SVG drawing depicts a smiling face as a large yellow circle with a black stroke, containing two smaller black circles as eyes. The face is centered on a white background within a 960 by 500 pixel viewport. The example uses raw SVG elements—`circle` tags with attributes for center coordinates, radius, fill, and stroke—embedded directly in an HTML page with CSS to remove page margins and hide overflow. No JavaScript libraries or data sources are involved; the visualization is purely static markup.

Rraghuprathap
88% match
Loading thumbnail…

Smiley Face Part I

A single large yellow circle with a black outline forms a smiley face, accompanied by two smaller black circles positioned as eyes. The visualization uses static Scalable Vector Graphics (SVG) shapes rendered directly in HTML, with no external data source or interaction. The face is centered on a 960-by-500 canvas, employing basic SVG circle elements with explicit coordinates and stroke styling to achieve the simple, iconic design. The example demonstrates minimal SVG markup for constructing a recognizable graphic without additional JavaScript libraries.

KKathleen Johnston
88% match
Loading thumbnail…

Smiley Face

A yellow circle with two smaller black circles forms a simple smiley face, centered within a 960-by-500 SVG canvas. The face itself is rendered as a primary `<circle>` element with a yellow fill and black stroke, while the eyes are separate black-filled `<circle>` elements positioned symmetrically. The example uses raw SVG markup directly in the HTML file, with no JavaScript libraries or data sources, relying solely on static circle coordinates and styling to achieve the composition. This minimal implementation demonstrates basic SVG shape and attribute usage without external dependencies.

CChristopher Cleland
88% match