Skip to main content
SimilarExport ZIP
100%

Smiley Face 1

✓ Published0🌍 Public
TTiagoDnts
Last edited Nov 8, 2021
Created on Nov 8, 2021
Forked from Hello HTML

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part 1

This example displays a static smiley face rendered as a yellow circle with two black eyes, created using React and SVG elements. The code defines circle components with explicit attributes for positioning, radius, fill, and stroke, a minimal approach before adding the mouth in later parts. It uses React’s `ReactDOM.render` to mount the SVG into the page, with the face centered on a fixed 960×500 canvas. The visualization demonstrates basic SVG composition within a React component structure.

CCryton Sibanda
96% 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
95% match
Loading thumbnail…

Smiley Face

This example displays a static smiley face rendered as a yellow circle with two oval eyes, each containing a black pupil, and a curved mouth implied by the SVG shapes. Constructed with React 17 and plain SVG elements, the visualization uses hard-coded circle coordinates for the face and eyes, with yellow fill, black strokes, and thick stroke widths. The SVG canvas is set to 960 by 500 pixels, and the drawing is embedded directly in HTML without any interactive behavior or data-driven updates.

Rreshali35
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
95% match
Loading thumbnail…

Smiley Face

This example shows a static yellow smiley face drawn with two black eyes on a plain background. The face is rendered as SVG shapes inside an HTML page. The visualization uses React and ReactDOM libraries to render the SVG elements, with the page structured as a single `<svg>` containing three `<circle>` elements for the face and eyes. The simple geometric shapes and fixed coordinates define the entire graphic without any interactive or animated behavior.

CChin-Long Shu
95% match
Loading thumbnail…

Smiley Face Pt 1

This example displays a static smiley face composed of SVG shapes: a yellow circular head with a black outline and two black eyes. The face lacks a mouth, leaving the expression incomplete. Built with React and rendered as SVG, it uses fixed numeric coordinates to position the head at the center of a 960-by-500 viewport and the eyes symmetrically on either side. The code initializes constants for dimensions and offsets, then defines a functional React component that returns the SVG markup, which ReactDOM renders into the page.

TTom MacNamara
95% match
Loading thumbnail…

Smiley Face Part 1

This example shows a yellow smiley face rendered as a static SVG graphic, with a circular head, two eyes, and a visible black outline. Built with React and rendered through SVG elements, the code uses constants for dimensions, stroke width, and eye positioning to place each circle precisely on a 960 by 500 canvas. The implementation relies on React 18 and ReactDOM to mount the component, with all shapes defined as inline `<circle>` elements using explicit `cx`, `cy`, and `r` attributes.

YYuxi Chen
95% 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
95% match