Skip to main content
SimilarExport ZIP
100%

Smiley Face Part I

✓ Published0🌍 Public
VVíctor Sánchez
Last edited Aug 16, 2021
Created on Aug 16, 2021
Forked from HTML Starter

This example uses raw SVG to draw a simple smiley face. It presents a yellow circle as the face, with two smaller black circles for eyes and a green circle in the center, all positioned within an SVG canvas. The code creates the shape directly in the index.html file using SVG elements and CSS for basic page styling. React is listed as the framework, but the rendering relies on static SVG markup without any JavaScript computations or data binding.

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

This example draws a simple smiley face inside an SVG canvas. It shows a large yellow circle with a black outline, containing two smaller black circles as eyes. The code uses raw SVG elements—`<svg>`, `<circle>`, and their `cx`, `cy`, `r`, `fill`, and `stroke` attributes—to define the shapes directly in the HTML file. It also loads React via a UMD script tag but does not use any React components or API calls; the visualization is pure declarative SVG markup. The face is centered on a 960 by 500 canvas with no interactivity or animation.

KKvvadzo
95% match
Loading thumbnail…

Smiley Face Part I

This example shows a static smiley face drawn as a yellow circle with two black eyes and an empty space where a mouth will be added later. The code renders the SVG elements directly in the HTML file, setting the circle center, radius, and stroke properties. It uses React 17 with `react-dom` to mount the app, though the actual drawing lives outside the React component. The SVG viewport is 960 by 500 units, and the face uses basic geometric shapes without any data-driven visualization or interactive features.

BBobby Bowes
95% match
Loading thumbnail…

Smiley Face Part I

This example renders a static smiley face using raw SVG elements inside a React application. The visualization shows a yellow circle with a black outline for the face, plus two smaller unfilled circles positioned as eyes, all defined directly in the markup. The code loads React and ReactDOM from CDN and attempts to render a simple JSX heading into a root div, while the smiley face is drawn separately via an inline `<svg>` tag. It demonstrates basic SVG drawing without any interaction or data-driven mapping.

RRoberto Camberos
95% match
Loading thumbnail…

Smiley Face Part I

This example presents a static SVG smiley face consisting of a yellow circle with a black outline and two black eye circles. The visualization is constructed directly in HTML markup using inline SVG elements, with each circle positioned using `cx`, `cy`, and `r` attributes. CSS is applied only to remove the page margin and hide overflow. It demonstrates how to use raw SVG in a bare-bones React page without any additional libraries, serving as a first step toward building a more complex face.

CChukwuka Akibor
95% match
Loading thumbnail…

Smiley Face Part 1

This example shows a simple smiley face constructed from three SVG circles on a yellow background. The face is drawn using raw SVG elements, with a large yellow circle for the head and two smaller black circles for the eyes, all placed within a 960 by 500 viewport. The code uses React 18.2.0, loaded via a UMD script tag, and renders the shapes directly in the SVG markup. A separate JavaScript file imports React and logs it to the console, though it doesn't add any interactive behavior.

PPhan Nguyen
95% match
Loading thumbnail…

Smiley Face: Part 1

This example renders a static smiley face using SVG primitives. A large yellow circle with a black outline forms the head, while two smaller black circles serve as eyes. The visualization is built with basic SVG elements—`<circle>` tags for the shapes—directly inside an HTML file. Although the page includes React via a CDN script, the drawing itself does not use React or any JavaScript to construct the graphics; it remains a purely declarative SVG composition.

Ttmadara88
94% match
Loading thumbnail…

Smiley Face Part 1

This gallery example renders a static yellow smiley face in SVG, using two black circles for eyes and one larger yellow circle for the face. The drawing is built directly in an HTML page with inline CSS that removes margins and hides overflow. The code loads the React library from a CDN, though the actual drawing logic is purely declarative SVG markup, not React components. The example demonstrates a simple, hand-coded SVG composition with the canvas set to 960 by 500 pixels.

Vv-rahul
94% 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
94% match