Skip to main content
SimilarExport ZIP
100%

Make A Smiley Face

✓ Published0🌍 Public
DDraconis1992
Last edited Apr 23, 2022
Created on Apr 23, 2022
Forked from HTML Starter

A yellow circle with a black stroke forms the face, while two smaller black circles serve as eyes. The example demonstrates basic SVG shape rendering in React, using hardcoded coordinates and radius values. It initializes React 16.7.0 via a CDN script tag and lays out the graphic with inline SVG elements inside an HTML page. The code shows a simple composition of three circles without any interactive behavior 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…

MakingASmileyFace

A static SVG smiley face is drawn on a yellow circle with black outlines, featuring two black eye circles and an implied mouth. The example demonstrates basic React setup by loading React and ReactDOM from a CDN, though the rendering itself relies on plain SVG markup inside the HTML. The visualization uses hardcoded coordinates for the circle centers, radii, and stroke widths, with the main face centered at (480, 250) and eyes offset horizontally. No interactivity or data binding is present; the code simply displays the fixed graphic.

TTheodora Dowglass
93% match
Loading thumbnail…

Smiley face

A yellow circle with a black outline forms the face, and two smaller black circles serve as eyes. The example demonstrates static SVG rendering with React, using SVG circle elements directly in the markup. The code initializes React and logs a message to the console, but the visualization itself relies solely on SVG primitives without additional interaction or animation.

KKatarinaSavic
93% match
Loading thumbnail…

Smiley Face 1

This example displays a simple smiley face made of three SVG circles: one large yellow circle for the face and two smaller black circles for the eyes. The shapes are drawn directly in the HTML markup with hardcoded coordinates and styling. React is loaded from a CDN in the page, though the code only logs the React object to the browser console and does not use it for rendering. The SVG canvas is set to 960 by 500 pixels, with the face centered horizontally.

Rrmanonl
92% match
Loading thumbnail…

Smiley face

A yellow circle with a black stroke forms a smiley face, with two smaller filled circles placed as eyes. The entire graphic is rendered as static SVG elements inside an HTML page. The page loads React and ReactDOM from a CDN, though the visible drawing is done with direct SVG tags rather than through React components. The code uses the `circle` element with explicit `cx`, `cy`, and `r` attributes, and the main face has a `fill` of yellow and `stroke-width` of 5. The example demonstrates basic SVG shape composition in a minimal setup.

PPaula Donoso
92% match
Loading thumbnail…

Smiley face 1

A yellow circle with two smaller black circles forms a simple smiley face rendered as an SVG graphic. The example demonstrates how to create basic shapes using React, with the `App` component returning SVG elements like `<circle>` and `ReactDom.render` mounting it to the DOM. The code imports React and ReactDOM from their UMD builds via CDN, computing positions and radii from fixed width and height variables. The face uses three circles: a large yellow base and two black eyes, each with stroke styling.

Rrite-cmyk
92% match
Loading thumbnail…

Smiley Face

A yellow circle with a black outline and two black inner circles forms a simple smiley face. The face is drawn entirely with SVG circle elements, centered within a 960 by 500 viewport, using React's JSX syntax to render the markup. The code sets explicit pixel values for the face radius, eye offset, and eye radius, and relies on ReactDOM to mount the SVG into the page.

MMaulana Adam Sahid
92% match
Loading thumbnail…

Making a smiley face

This example shows a simple smiley face drawn with basic SVG shapes. The face consists of a large yellow circle for the head and two smaller black circles for the eyes, all defined directly in an `index.html` file. The rendering relies on raw SVG elements, with no additional JavaScript logic beyond loading the React libraries. The React framework is included, but the visualization itself is static, created purely through SVG markup, and provides a minimal demonstration of combining React with SVG output.

Aandresitopoloski
92% match
Loading thumbnail…

Let's Make a Face Part I

This example shows a simple yellow smiley face rendered as an SVG, with a large circular head, two small eyes, and a black outline. The face is drawn using basic SVG circle elements positioned relative to the center of a 960 by 500 viewport. The code uses React and ReactDOM to render the SVG structure, with hardcoded values for the head radius, eye offset, and stroke width. The visualization demonstrates how React can generate declarative SVG markup for straightforward geometric shapes.

Ttjcocucci
92% match