Skip to main content
SimilarExport ZIP
100%

Smiley Face Part I

✓ Published0🌍 Public
RRafal Krohne
Last edited May 6, 2022
Created on May 6, 2022
Forked from HTML Starter

A minimalist smiley face rendered as a static SVG graphic. The visualization uses two black circles for eyes and a large yellow circle with a black outline for the head, all centered within a 960 by 500 pixel canvas. The drawing is constructed declaratively with SVG elements inside an HTML document, positioned using percentage-based coordinates for the `cx` and `cy` attributes. The design relies solely on basic vector shapes and CSS styling, with no interactive or animated features.

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

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

Smiley Face part 1

A static yellow smiley face rendered with three SVG circles appears on a blank white canvas. The largest circle forms the head with a yellow fill and black stroke, while two smaller black unfilled circles serve as eyes. The visualization uses raw SVG elements defined directly in the HTML, with React included as a script dependency but not actively driving the rendering. The code displays a simple, fixed geometric composition without any interactive or animated features.

AAngus Clark
93% match
Loading thumbnail…

Smiley Face I

This visualization shows a classic smiley face rendered as a static SVG graphic. The face consists of a large yellow circle for the head, outlined with a black stroke, and two smaller black circles for the eyes. The code uses inline SVG elements (`<svg>`, `<circle>`) defined directly within the HTML structure, with CSS applied to style the page body. The example demonstrates a minimal approach to creating simple vector graphics without additional JavaScript libraries or data sources.

EEdward Chung
93% match
Loading thumbnail…

Smiley Face Part 1

A single static SVG scene depicts a yellow smiley face centered on a 960-by-500 canvas. The face consists of a large yellow circle with a black outline, and two smaller black circles for eyes, positioned symmetrically. The rendering uses raw SVG elements—`circle`, `fill`, `stroke`, and `stroke-width` attributes—defined directly in the HTML markup. No data source or external library is used; the drawing is produced entirely by static SVG shape definitions within the page.

Ppsun88
93% match
Loading thumbnail…

Smiley Face Part I

A static SVG smiley face rendered without React, despite the gallery’s framework metadata. The code uses raw SVG `<circle>` elements inside an inline `<svg>` tag, with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes to draw a yellow head and two black eyes on a 960×500 canvas. No interactive behavior or data binding is present; the visualization is purely declarative markup, as shown in the included `index.html` file.

EElvira Nassirova
93% match
Loading thumbnail…

Smiley Face Part 1

A static smiley face rendered as a yellow circle with two smaller black eyes sits centered within an SVG canvas. The graphic uses three raw SVG `circle` elements with explicit `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` attributes to draw the face and eyes, while the page also imports React and ReactDOM, though the React code only renders a separate "Hello JSX" heading. The example demonstrates a minimal, framework-agnostic SVG drawing alongside a basic React setup in the same HTML file.

Zzepedrobessa
93% match
Loading thumbnail…

Smiley Face Part I

A static smiley face rendered with SVG, composed of a yellow circle for the head and two black circles for the eyes. The code uses plain JavaScript embedded in an HTML page, making no use of React despite importing it in the separate `index.js` file, which only logs the React object. The SVG elements are positioned with explicit pixel coordinates (e.g., `cx="480"`, `cy="250"`) and styled via attributes like `fill` and `stroke-width`. The rendering relies directly on SVG’s native circle elements rather than a charting library.

MManfredChen
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