Skip to main content
SimilarExport ZIP
100%

Smilly face

✓ Published0🌍 Public
EERib99
Last edited Jun 29, 2023
Created on Jun 29, 2023
Forked from Hello HTML

This example renders a smiling face as a static SVG graphic using React and ReactDOM. The visualization shows a large yellow circle for the face with two smaller black circles positioned as eyes, all drawn on a 960x500 canvas. The code creates these shapes declaratively using SVG circle elements and React’s JSX syntax within an HTML wrapper. The rendering relies on React 16.9.0 and ReactDOM, both loaded from the unpkg CDN, to mount the app into a root div.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face 1

This example renders a static smiley face using SVG shapes composed through React markup. The visualization presents a yellow circle with a black border as the face, alongside two unfilled black circles representing the eyes. The code uses React and ReactDOM to structure the SVG elements directly within the HTML page, with the `bundle.js` file loaded for the React runtime. The face is positioned based on a 960 by 500 canvas, using fixed coordinates for the facial features.

TTiagoDnts
93% match
Loading thumbnail…

Smily Face

This example displays a simple smiling face rendered as a static SVG graphic, composed of a yellow circular head with black eyes. The visualization is created using React, with the SVG elements defined directly in the HTML markup and styled via inline attributes for fill, stroke, and dimensions. The code references the React and ReactDOM libraries from a content delivery network, while the JavaScript file contains a minimal React component that renders a heading, though this component is not integrated into the displayed graphic.

PPipo
93% match
Loading thumbnail…

Smilly face P1

A static yellow smiley face rendered as raw SVG circles, with a head and two eyes drawn on a 960x500 canvas. The example demonstrates direct SVG markup in an HTML file, alongside a separate React app that mounts a simple "Hello JSK" heading via `ReactDOM.render`. Although React and ReactDOM are loaded, the face itself is not generated by React—it is plain SVG embedded in the document. The code shows a minimal setup for combining declarative React components with hand-written SVG shapes.

DDamien Bafile
93% match
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, 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
93% match
Loading thumbnail…

Smiley Face

A smiling face rendered as a static SVG graphic uses React 17 and ReactDOM to mount an app, though the visible face is drawn directly in the index.html file with hardcoded circle elements. The yellow outer circle, two black eye circles, and implied curved mouth are laid out with explicit pixel coordinates on a 960×500 canvas. The code does not implement any interaction or data-driven logic; it simply outputs a fixed, pre-defined facial composition.

JJasprado23
93% 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…

Smilie Face with React

This example renders a yellow smiley face as an SVG graphic using React. It draws three circles—a large yellow face and two smaller black eyes—with explicit pixel dimensions for width, height, and stroke widths. The code creates a React component that returns JSX, using the `React` and `ReactDOM` libraries to mount the visualization into the DOM. All coordinates and radii are predefined constants, resulting in a static, purely declarative chart.

Vvishnubpg
92% match