Smiley Face part 1

100%

Smiley Face part 1

✓ Published1🌍 Public

Last edited Aug 14, 2021

Created on Aug 14, 2021

A smiling face is drawn with three SVG circles on a yellow background. The code uses raw SVG elements within an HTML file, rendering a large yellow circle for the face and two smaller black circles for the eyes. Included in the same page, a React app renders a simple “Hello JSX” message using the React and ReactDOM libraries, though the face itself does not rely on React for its display.

AI-generated description

Smiley face using html and css

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part 1

A smiling face is drawn in SVG with a large yellow circle for the head, two smaller black circles for eyes, and an incomplete mouth. The page combines static SVG markup with a React app that renders a separate "Hello JSX" heading via `ReactDOM.render`. The example uses React 17 production UMD builds and plain SVG elements like `circle` with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes, demonstrating basic shape composition without interactive behavior.

Aastr0cyt3

95% match

Loading thumbnail…

Smiley Face Part 1

This example displays a static smiley face rendered as three SVG circles: a large yellow face with a black outline and two smaller black circles for eyes. The visualization uses React 18 and ReactDOM to mount a simple “Hello JSX” app, while the face itself is drawn directly in the HTML markup with SVG circle elements, each specifying explicit cx, cy, and r attributes. The page includes CSS for centered text and hidden overflow, and loads the React libraries from CDN.

DDineth-Mudalige

94% match

Loading thumbnail…

Smiley face part 1

A yellow circle with a black outline and two black eye circles forms a smiley face, centered on an SVG canvas. The face is drawn using React with JSX, rendering SVG elements such as `<circle>` for the head and eyes. The code positions each circle using computed coordinates and fixed constants for offsets, radii, and stroke width. The example uses React 17 and ReactDOM to mount the SVG into the page, demonstrating basic component-based visualization without interactive behavior.

Eelizww

94% match

Loading thumbnail…

Smiley Face Part I

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.

VVíctor Sánchez

94% match

Loading thumbnail…

Smiley Face Part-1

A static smiley face is drawn with SVG shapes, featuring a large yellow circle for the head and two smaller black circles for eyes. The page uses React, though the visual is created directly in the HTML markup rather than through React components. React 16.9 and ReactDOM are loaded from a CDN, and the bundled JavaScript only renders a simple "Hello JSX" heading, leaving the SVG to display the graphic. The rendering approach relies on basic SVG circle elements with fixed coordinates and stroke styling.

RRigved Epur

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

94% match

Loading thumbnail…

Smiley face part 1

This example displays a static smiley face constructed from three SVG circles: a large yellow circle for the head and two smaller black circles for the eyes. The face is rendered directly in the HTML markup using inline SVG with fixed coordinates and styling, while React code initializes a minimal JSX component without affecting the visual output. The rendering is purely declarative, relying on SVG's circle elements and basic attributes.

Ddeepaktatineni

94% match

Loading thumbnail…

Smiley Face Part 1

A yellow circle with a black outline represents a smiley face, containing two smaller black circles as eyes. The example demonstrates basic SVG rendering within a React application, using hardcoded SVG circle elements positioned via `cx` and `cy` attributes. The page loads React from a UMD build and logs "Hello JavaScript" to the console. The visualization is static, with no interactivity or animation, serving as a simple introduction to combining React with SVG markup.

995shavinda

94% match