Smiley Face Part 1

100%

Smiley Face Part 1

✓ Published0🌍 Public

Last edited Nov 18, 2021

Created on Nov 18, 2021

A static SVG smiley face shows two black eyes on a yellow circle outlined in black, with no mouth yet. The drawing is hardcoded as three `<circle>` elements directly in the HTML, while the React app in `index.js` renders only a simple "Hello JSX" heading. The example uses React 16.9 and ReactDOM, with SVG coordinates centered at 480×250 on a 960×500 canvas. The file’s README notes this is half of a complete smiley face.

AI-generated description

Half way to a smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part One

This example renders a static smiley face using React 17 and SVG. It draws three circles on an SVG canvas: a large yellow head with a black outline, and two smaller black eyes positioned symmetrically around the center. The code defines the SVG markup directly in the HTML file, while the React app simply renders a placeholder “Hello JSX” heading. The visual output does not yet include a mouth, reflecting the “half way” status noted in the README.

Nnj889

95% match

Loading thumbnail…

Smiley Face Part 1

A static smiley face rendered as a yellow circle with two smaller black eyes sits centered within an SVG canvas. The graphic uses three raw SVG `circle` elements with explicit `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` attributes to draw the face and eyes, while the page also imports React and ReactDOM, though the React code only renders a separate "Hello JSX" heading. The example demonstrates a minimal, framework-agnostic SVG drawing alongside a basic React setup in the same HTML file.

Zzepedrobessa

95% match

Loading thumbnail…

Smiley Face Part I

This example shows a static smiley face rendered as a simple SVG graphic. The face consists of three circles: a large yellow circle for the head and two smaller black circles for the eyes, all drawn directly in the HTML markup. The code uses React 16.9.0 and ReactDOM to mount a separate “Hello JSX” component, though the smiley face itself is plain SVG without React involvement. The rendering approach relies on explicit SVG attributes for positioning and styling, with a viewport of 960 by 500 pixels.

Bbartlomiejkoszek

95% match

Loading thumbnail…

Smiley Face Part 1

This example shows a static smiley face drawn with three SVG circles: a large yellow circle for the head and two smaller black circles for eyes, all positioned within a 960 by 500 pixel viewport. The HTML file defines the SVG elements directly in markup, while the React files contain only a minimal “Hello JSX” component that is not rendered. The face itself is created using basic SVG attributes like `cx`, `cy`, `r`, and `stroke-width`, with React 18 and ReactDOM loaded via CDN but not actively used for the visualization.

Wwjnaramore

95% match

Loading thumbnail…

Smiley Face (Part 1)

A static SVG smiley face is drawn with a large yellow circle for the head, two colored circles for eyes, and no mouth yet. The React app uses JSX to define the SVG elements, setting the head’s radius to `centerY - 2` and positioning the left eye via `eyeOffSetX`. ReactDOM renders the component into the DOM, creating the simple face layout.

AAlexandra Florea

95% match

Loading thumbnail…

Smiley Face Part I

A static SVG smiley face displays a yellow circle head with black outline and two dark eye circles, rendered via React components. The code uses React 16.9 and ReactDOM to mount the visualization, computing circle positions from width, height, and offset constants. The face remains incomplete, missing a mouth, as noted in the source README. SVG elements are directly authored as JSX, with hardcoded geometric properties for the head and eyes.

DDuckGorilla

95% match

Loading thumbnail…

Smiley Face Part 1

This example shows a static smiley face composed of a large yellow circle with a black stroke, plus two smaller black circles for eyes, positioned against a minimal white background. The face is rendered directly in SVG markup within the HTML page, while a separate React app, using `ReactDOM.render`, attempts to display a simple “Hello JSX” heading. However, the React code is incomplete and does not return valid JSX, so the visible smiley face comes solely from the inline SVG elements, not from any React-generated output.

JJulia Kho

94% match

Loading thumbnail…

Smily Face Part 1

A simple static SVG rendering depicts a yellow circle with two smaller black circles for eyes, forming a smiley face on a plain background. The example uses React to structure the page, with the face defined directly in JSX inside the HTML file. The SVG `circle` elements are hard-coded with fixed coordinates, while the `index.js` file initializes a React app that renders a separate "Hello JSX" header, though this header is not visible in the displayed output.

Ssyhna

94% match