Skip to main content
SimilarExport ZIP
100%

Smiley Face Part 1

✓ Published1🌍 Public
Oosaidhashmi31
Last edited Aug 30, 2021
Created on Aug 20, 2021
Forked from Hello VizHub

A yellow circle with a black outline forms the base of a smiley face, with two smaller black circles positioned as eyes. The face is drawn using React components that render SVG shapes, with dimensions and positions calculated from center coordinates and offset constants. React 16.9.0 and ReactDOM 17.0.2 are loaded via UNPKG, and the interactive-less, static visualization is generated through declarative JSX code. The current version shows only the head and eyes, omitting the mouth as indicated by the title and file comments.

AI-generated description

Half way towards the smiley face.

MIT Licensed

Similar vizzes

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

Smiley Face part 1

A yellow circle with a thick black outline forms the face, alongside two smaller unfilled circles positioned as eyes, rendered directly in SVG within an HTML file. The example uses React 16.9.0, loaded via a UMD script, and relies on static SVG markup for the shapes rather than dynamic data or programmatic drawing. The page is set to hide overflow and remove default body margins, making the visualization fill the viewport.

HHuhej
95% match
Loading thumbnail…

Smiley Face Part I

This visualization displays a yellow circle with a black outline and two unfilled circular eyes, forming the initial components of a smiley face. The SVG markup defines the shapes directly, positioning the central face at 480,250 with a radius of 245, and placing the eye circles at offset x-coordinates. The example uses React 16.9.0 loaded via UMD, with the React library logged to the console and bundled through a separate JavaScript file.

NnimbusFarzaneh
95% match
Loading thumbnail…

Smiley face part 1

A simple SVG smiley face is rendered in yellow with a black outline, featuring two solid black eyes on a blank background. The React application draws the face using three `<circle>` elements within an SVG viewport sized 960 by 500 pixels. Hardcoded coordinates place the head at the center, with the eyes offset horizontally from the midpoint. React 16.7.0 and ReactDOM 17.0.2 manage the component, while the embedded video from the README demonstrates the development process.

SSahaj Singh
95% match
Loading thumbnail…

Smiley Face Part 2

A yellow smiley face is drawn with React and rendered as SVG. It shows a large yellow circle with a black outline, plus two smaller black circles for eyes, all centered on a 960 by 500 canvas. The React code defines these shapes using JSX and constant variables for positioning and sizing. The face is rendered into a root div using ReactDOM.render, with the SVG elements directly described in the component.

AAman Singh
95% match
Loading thumbnail…

Smiley Face Part 1

A yellow circle with a thick black outline forms a smiley face against a white background, using two smaller black circles as eyes. The graphic is drawn entirely with SVG circle elements inside a fixed 960 by 500 viewport. This example uses React 17.0.2 to load the page, though the visual output itself relies on native SVG markup without additional data or interaction.

AAimiton Isaiah Oluwatobi
94% match
Loading thumbnail…

Smiley Face Part I

A yellow circle with a black outline forms the head of a smiley face, while two smaller black circles serve as eyes. The face is not yet complete, as the mouth is missing. Built with React and rendered as SVG, the component uses fixed pixel coordinates for positioning, with constants defining the face radius, eye offset, and eye size. The code imports React and ReactDOM and renders the SVG directly to the page.

LLiangyu Chen
94% match