Skip to main content
SimilarExport ZIP
100%

Smiley face part 1

✓ Published0🌍 Public
Mmilesvw
Last edited Feb 18, 2022
Created on Feb 17, 2022
Forked from Hello HTML

This is a static React example of a simple smiley face rendered using inline SVG shapes. It displays a yellow circle with a black outline as the face, alongside two smaller circles for the eyes. The data source is hardcoded in the `index.html` file, and the app uses React and ReactDOM from a CDN, along with a minimal JavaScript entry point that renders a heading. The SVG itself is drawn directly in the HTML, not generated by React.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part I

This example renders a static smiley face using raw SVG elements inside a React application. The visualization shows a yellow circle with a black outline for the face, plus two smaller unfilled circles positioned as eyes, all defined directly in the markup. The code loads React and ReactDOM from CDN and attempts to render a simple JSX heading into a root div, while the smiley face is drawn separately via an inline `<svg>` tag. It demonstrates basic SVG drawing without any interaction or data-driven mapping.

RRoberto Camberos
95% match
Loading thumbnail…

Smiley Face Part I

This example shows a static smiley face drawn as a yellow circle with two black eyes and an empty space where a mouth will be added later. The code renders the SVG elements directly in the HTML file, setting the circle center, radius, and stroke properties. It uses React 17 with `react-dom` to mount the app, though the actual drawing lives outside the React component. The SVG viewport is 960 by 500 units, and the face uses basic geometric shapes without any data-driven visualization or interactive features.

BBobby Bowes
94% match
Loading thumbnail…

Smiley Face Part I

This example renders a static smiley face using SVG primitives within a React application. The face is constructed from three circles: a large yellow circle with a black stroke forms the head, while two smaller circles serve as eyes. The page is built with React 17, loaded via the UMD distribution, and ReactDOM, though the JavaScript file only logs the React objects. The SVG is hardcoded directly in the HTML file, with dimensions set to 960 by 500 pixels. No external data sources or interaction logic are present.

Gguohao77
94% match
Loading thumbnail…

Smiley Face Part 1

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.

JJoseph Connelly
94% match
Loading thumbnail…

Smiley Face Part 1

A static smiley face rendered as an SVG using React and ReactDOM. The example defines a yellow circle with a black outline as the face, then positions two smaller black circles as eyes using computed coordinates and offsets. The code calculates the face radius and center based on the SVG width and height, and uses React's JSX syntax to render the shapes declaratively.

Nnavshahi
94% match
Loading thumbnail…

Smiley Face Part I

This example creates a static yellow smiley face with black-outlined eyes and an implied mouth, rendered as SVG circles inside an HTML document. The face is centered on a 960 by 500 canvas, with two filled circles positioned as eyes and a large yellow circle serving as the head. React and ReactDOM are loaded via CDN, but the visible drawing is plain SVG markup. The accompanying `index.js` file renders a simple "Hello JSX" heading, showing the setup for a React component that is not yet integrated with the SVG face.

Mmatthamm@yahoo.com
94% match
Loading thumbnail…

Smiley Face part 1

A static SVG smiley face renders a yellow circle with black outline, two smaller unfilled circles for eyes, and no mouth yet. Built with React and ReactDOM, the example mounts an empty `App` component into the DOM root while the SVG elements are hardcoded directly in the HTML file. The visualization introduces basic SVG shape attributes such as `cx`, `cy`, `r`, `fill`, and `stroke` within a 960-by-500 viewport, serving as a foundation for a future interactive face.

Sshera1020
94% match
Loading thumbnail…

Smiley Face Part 1

This example shows a static smiley face rendered as an SVG graphic, with a yellow circle for the face, black stroke for the outline, and two smaller black circles for eyes. The code is a minimal React setup, loading React 18 from a CDN and including commented-out SVG elements that define the face’s dimensions and positions. While the SVG markup is present in comments, the actual display relies on the uncommented structure, using basic circle elements without any interactive or animated behavior. The rendering approach is straightforward, with hardcoded coordinates for the face and eyes.

Nnoncomplex
94% match