Skip to main content
SimilarExport ZIP
100%

Smiley face 1

✓ Published0🌍 Public
Aarimakhalil
Last edited Dec 7, 2021
Created on Dec 7, 2021
Forked from Hello HTML

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.

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

Smiley Face Part I

A yellow circle with a black outline and two smaller black circles for eyes forms the basic structure of a smiley face. The face is drawn using SVG elements created with React. The code defines the circle positions and sizes through variables, computes the face radius from the canvas height, and renders everything in a 960 by 500 pixel SVG canvas. The React component is mounted to the page using ReactDOM's render method.

YYeabkal Wondimu
93% match
Loading thumbnail…

Smiley Face Part1

A smiley face is drawn as a circle on a 960-by-500 SVG canvas, with a yellow fill and a thick black outline, plus two smaller unfilled circles for eyes. The face is centered and uses hardcoded offsets for eye placement. The code imports React and ReactDOM directly and renders the SVG via `ReactDOM.render`, with no external charting library, relying instead on raw SVG elements like `<circle>`. The data is entirely programmatic, with no external dataset.

AAlumanda Shakankale
93% 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
Loading thumbnail…

smiley face part 1

A yellow smiley face is drawn as a single large circle with a black outline, rendered in SVG. Two static black circles serve as eyes, positioned on the face. The code uses React with ReactDOM to render the SVG elements, specifying dimensions, center coordinates, and stroke width as constants. The example demonstrates a minimal setup for creating SVG graphics with React, relying on standard SVG circle elements rather than any data-driven or interactive features.

Kkish0e
93% match
Loading thumbnail…

Smiley face

A smiley face is rendered as an SVG graphic within a React application. The face consists of a large yellow circle with a black outline, representing the head, and two smaller black circles for the eyes. The visualization is created using React and ReactDOM, with the SVG elements defined declaratively in JavaScript. The head's size and position are calculated relative to the canvas dimensions, and the eye positions are offset from the center. The code renders the graphic directly into the page's root element using `ReactDOM.render`.

Ssuddhasheel
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