Skip to main content
SimilarExport ZIP
100%

Smiley Face

✓ Published0🌍 Public
RRamakrishna Katragadda
Last edited Jul 29, 2022
Created on Jul 29, 2022
Forked from HTML Starter

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.

AI-generated description

Halfway towards a smiley face!

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

Smiley Face

A simple SVG smiley face rendered with React and vanilla SVG elements. The code draws three circles: a large yellow head with a black outline, and two smaller black circles for eyes. It uses fixed coordinates and hardcoded fill and stroke attributes, with React loaded via UMD and React’s console log to verify the library. No facial expression beyond the eyes is included.

Nnataliabetancourt
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 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.

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

Smiley face 1

A classic smiley face drawn with React and SVG. The face consists of a large yellow circle for the head, outlined in black, with two smaller solid black circles positioned symmetrically for the eyes. The code uses React’s `ReactDOM.render` to mount the SVG into the DOM, with dimensions and positions defined by constants. The rendering relies on standard SVG circle elements, with stroke width and radius set through React JSX props.

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

Smiley face

This example draws a simple smiley face using SVG shapes. It shows a large yellow circle for the head, two smaller unfilled circles for eyes, and relies on the stroke and fill attributes from the React-created SVG markup. The code uses React 17 via the UMD production build to render the SVG directly in the HTML, with inline properties for positioning and styling. The face is centered on a 960×500 canvas, and the mouth is implied by the head’s bottom edge rather than drawn explicitly.

Rrikaami13
93% match