Skip to main content
SimilarExport ZIP
100%

Smily circle

✓ Published0🌍 Public
Rravender26
Last edited May 18, 2021
Created on May 18, 2021
Forked from Hello HTML

This example renders a smiling face as a static SVG graphic using React. A large yellow circle with a black stroke forms the head, while two smaller black circles serve as eyes. The code uses React’s production build and direct SVG elements (`circle`), with coordinates hardcoded in the JSX. The title references a “smily circle,” and the markup is embedded directly in an HTML page with minimal styling.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face

This example uses React and SVG to render a static smiley face. The face is drawn with three SVG circle elements on a 960x500 canvas: a yellow outer circle for the head and two black circles for the eyes, all with visible black strokes. The React component renders only a heading, while the SVG markup is placed directly in the HTML body, so the visualization is not generated through React itself. The code relies on the React and ReactDOM production libraries and a bundled JavaScript file, though no interactive behavior is implemented.

RRidhuparan
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

A yellow circle with a black outline forms the face, containing two smaller black circles as eyes. The example demonstrates static SVG rendering with React, though the React library is loaded but not actively used for drawing. Instead, the visualization is created directly using SVG elements like `circle` for the face and eyes, with hardcoded coordinates and styling. The page loads React and ReactDOM via UMD bundles, but the final graphic relies purely on raw SVG markup within the HTML.

Ffutureofworld
92% match
Loading thumbnail…

Smily Face

This example shows a single, static smiley face drawn as a yellow circle with two smaller black circles for eyes, rendered inside an SVG canvas. The React component returns the SVG markup directly, using `circle` elements with fixed `cx`, `cy`, and `r` attributes to position the face and eyes. It uses React 16.9 and `ReactDOM.render` to mount the component into the page’s root element. The rendering is purely declarative, with no animation or interactivity.

PPavankumar Kamath
92% 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
92% match
Loading thumbnail…

Smiley Face

This example shows a simple smiley face rendered as a static SVG graphic. A large yellow circle forms the head, with two smaller black circles representing the eyes; the mouth is not drawn in this version. The visualization uses React 18.2.0 via a UMD script tag, though the SVG elements are written directly in the HTML markup rather than generated through React components. The code sets the SVG viewport to 960 by 500 pixels and applies basic styling for the circle fills and stroke.

AAndres Perdomo
92% match
Loading thumbnail…

Smily Face Part 1

A simple static SVG rendering depicts a yellow circle with two smaller black circles for eyes, forming a smiley face on a plain background. The example uses React to structure the page, with the face defined directly in JSX inside the HTML file. The SVG `circle` elements are hard-coded with fixed coordinates, while the `index.js` file initializes a React app that renders a separate "Hello JSX" header, though this header is not visible in the displayed output.

Ssyhna
92% match
Loading thumbnail…

SMILEY FACE

This example shows a simple smiley face rendered as SVG circles on a yellow background. A large yellow circle forms the face, with two smaller black circles for eyes. The code uses React and ReactDOM, with basic SVG circle elements for rendering. Although an index.js file imports React and defines an App component, the actual SVG is placed directly in the HTML body, not generated by React. The page includes the React production bundle and a separate bundle.js script.

Hhjaitak
92% match