Skip to main content
SimilarExport ZIP
100%

Smiley

✓ Published0🌍 Public
Jjoancena
Last edited Mar 30, 2021
Created on Mar 30, 2021
Forked from HTML Starter

This example shows a simple smiley face rendered as a static SVG circle, with its center positioned using the `cx` attribute and a fixed radius. The code uses plain SVG markup inside an HTML page, styled with a CSS rule that sets the body’s overflow property. No JavaScript libraries or dynamic data are involved; the visualization is entirely declarative, relying on basic SVG circle elements. The page is built for the React framework but contains no React-specific code in this minimal version.

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

This example shows a simple smiley face rendered as an SVG circle. The page uses a bare-bones HTML structure with a `<svg>` element containing a `<circle>` tag, demonstrating the foundational markup for creating basic shapes. The code also includes a `<div>` element with the class "root" that displays static text, and the react starter project is referenced as the framework context. The visualization relies on raw SVG display without additional JavaScript libraries, keeping the implementation minimal and focused on the visual output.

Nneelbanodiya
92% match
Loading thumbnail…

Smiley Face Pt 1

This example shows a simple smiley face drawn as a static SVG graphic: a yellow circle with a black outline, two black eye circles, and no mouth. The visualization uses plain SVG elements—three `<circle>` tags—embedded directly in an HTML page with CSS to remove the default margin and hide overflow. It demonstrates basic SVG rendering with React, using inline coordinates and attributes for positioning, sizing, and styling. No interactivity or data binding is present; the face is purely declarative markup.

MMatthew Heywood
91% match
Loading thumbnail…

Smiley Face

This example shows a simple smiley face, drawn as three SVG circles on a 1000 by 1000 canvas. It uses React via the `react.production.min.js` script and raw SVG markup for rendering, with no external data source. The face is composed of a large yellow circle outlined in red for the head, and two smaller black circles with red strokes for the eyes. The layout is static and hard-coded, with circles positioned using explicit `cx`, `cy`, and `r` attributes.

CChirag Bansal
90% match
Loading thumbnail…

Smiley Face

This example draws a simple smiley face using raw SVG elements within a single HTML file. It uses the `circle` element to create the face and eyes, with CSS setting the page margin to zero and hiding overflow. The face is rendered as a yellow circle with a black stroke, and two smaller black circles serve as the eyes; the code includes a typo in the `stroke` attribute of the eye circles. The visualization demonstrates basic SVG shape creation without any JavaScript or external libraries.

RRahul Raveendran
90% match
Loading thumbnail…

Smiley Face Part 1

This example shows a basic smiley face drawn as three circles in an SVG: a large yellow face and two smaller eyes, with black strokes for outlines. The code uses plain SVG elements—`<svg>`, `<circle>`, and CSS styling—inside an HTML page to achieve the rendering. The positioning of the eyes is hardcoded via `cx` and `cy` attributes. It demonstrates a minimal static visualization without interactivity or data binding.

JJohn Robison
90% match
Loading thumbnail…

Smiley face part 1

This example displays a static SVG smiley face constructed from three circles: a large yellow circle with a black stroke for the head and two smaller black circles for the eyes. The code renders the graphic by embedding the SVG markup directly in an HTML page, using raw SVG elements like `<circle>`. Although the page references React and includes a JavaScript file that imports the React library, no React components or rendering logic are actually used to generate the visualization, as the graphic is defined purely in static markup.

QQuino Terceño
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
Loading thumbnail…

Smiley

A yellow circle with a black outline sits centered in a 960×500 SVG canvas, resembling a simplified smiley face without facial features. The example demonstrates a minimal React setup using raw SVG elements—specifically a `<circle>` with explicit `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` attributes—rather than D3 or other visualization libraries. The styling resets body margins and hides overflow, while the static rendering shows a single geometric shape with no interactivity or data binding.

Mmike17061999
90% match