Let's make a viz

100%

Let's make a viz

✓ Published0🌍 Public

Last edited Jun 9, 2023

Created on Jun 9, 2023

This example shows how a smiley face made of two eyes and a yellow circular head is constructed using inline SVG elements. The visualization renders a static graphic directly in the browser, with the head centered at (480, 250) and two dark eye circles placed symmetrically. The code uses raw SVG `<circle>` elements with explicit attributes for position, radius, fill, and stroke, alongside minimal CSS to hide page margins and overflow. No JavaScript libraries or data processing are involved; the visualization is purely declarative markup.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Viz Smiley Face

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.

SShankar Ghimire

85% match

Loading thumbnail…

Let's Make a Smiley Face - Part 1

A static SVG smiley face rendered with two dark eye circles on a large yellow circular face, outlined with a black stroke. The HTML page contains three `<circle>` elements drawn directly in SVG markup, with coordinates and radii hard-coded to position the face and eyes at fixed locations. No JavaScript libraries or data sources are used; the visualization relies entirely on raw SVG shapes and inline CSS for layout.

Aakumawave

84% match

Loading thumbnail…

Let's Make a Face Part I

A static SVG smiley face rendered as a simple data-visualization exercise. The code uses raw SVG circle elements to draw a yellow head with a black outline and two black eyes, positioned via explicit `cx`, `cy`, and `r` attributes. The face is centered on a 960 by 500 pixel canvas, with the head radius and eye coordinates manually calculated from the center point and stroke width. No external libraries or JavaScript APIs are used; the visualization relies entirely on declarative SVG markup in the HTML file.

SSundaram Agnihotri

84% match

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

84% match

Loading thumbnail…

Hello VizHub

A bright yellow smiley face rendered in SVG with D3.js v5. The visualization uses D3's `select`, `append`, and `attr` methods to construct circles for the face and eyes within a centered group. A D3 `arc` generates the mouth path, while the SVG canvas is sized from the markup. The styling relies on an external Google Fonts import via CSS.

VVijay

83% match

Loading thumbnail…

Let's Make a Face Part I

This example uses raw SVG elements to construct a simple smiley face with two eyes and a yellow circular head, drawn directly in an HTML document. The code defines one large circle for the face and two smaller black circles for the eyes, setting attributes like center coordinates, radius, fill color, and stroke width. No JavaScript or external libraries are involved, only static SVG markup. The rendering uses a fixed 960 by 500 pixel coordinate system, with the face centered at 480, 250 and the eyes positioned symmetrically around it.

Ssriramvsharma

83% match

Loading thumbnail…

Let's Make a Face Part I

Two yellow circles with black outlines serve as eyes for an unfinished face drawn on an SVG canvas. A large yellow circle with a thick black stroke forms the head, while two smaller solid yellow circles sit symmetrically to the left and right of center. The code uses raw SVG elements—`circle` with `cx`, `cy`, `r`, `fill`, and `stroke` attributes—embedded directly in HTML, with no JavaScript libraries or data binding. The visualization is a static, hand-coded step toward a smiley face.

Pp-d-c

83% 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

83% match