Skip to main content
SimilarExport ZIP
100%

Smiley Face

✓ Published0🌍 Public
JjMarkillie
Last edited Aug 3, 2022
Created on Aug 3, 2022
Forked from Hello HTML

A simple smiley face rendered as a yellow circle with black outline and two eye circles, all defined by named constants for dimensions and positions. The React application computes the center, stroke, and eye offsets to place the shapes within an SVG canvas. It uses React 18.2.0 for component creation and ReactDOM 18.2.0 to render the SVG output to the page root, with no face animation or interactive features included.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

Smiley Face

A React application renders a simplified smiley face as a static SVG graphic. The face consists of a yellow circle with a black border, positioned at the center of a 960×500 viewport, and two smaller black circles representing eyes. Coordinates for the face and eyes are computed from width, height, and offset constants rather than loaded data. React 17 uses `ReactDOM.render` to mount the SVG elements defined in JSX, with styling applied directly through SVG presentation attributes.

Hhappylilem
94% match
Loading thumbnail…

Smiley Face

A static yellow smiley face rendered as SVG, drawn with three black-filled circles for eyes and a large yellow circle for the head, outlined with a black stroke. The example uses React 16.13.1, loaded via UMD, and relies solely on SVG primitives (circle) and inline CSS. No interactions or animations are present; fixed coordinate attributes position the elements on a 960×500 canvas.

Ffolbrich001
94% 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
94% match
Loading thumbnail…

Smiley Face

A simple smiley face rendered with React and SVG. Three circles create the face and eyes on a 960 by 500 canvas, with the main face filled in yellow and outlined with a thick black stroke. The code uses React 18.2.0 and ReactDOM to render a separate "Hello" heading, while the face itself is drawn as raw SVG markup within the HTML body. The SVG is generated from static coordinates, showing a basic composition of graphical primitives without interactive behavior.

RRamakrishna Katragadda
94% match
Loading thumbnail…

Smiley Face Part I

A single yellow smiley face head with two black eyes is rendered in an SVG canvas using React and ReactDOM. The face consists of three circle elements: a large yellow circle with a black stroke for the head, and two smaller black circles for the eyes. The component defines dimensions and centers programmatically, with hardcoded eye positions. This example demonstrates basic SVG shape rendering within a React component structure.

Eeinyhime
94% 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
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
93% match