Skip to main content
SimilarExport ZIP
100%

Smily Face Part I

✓ Published1🌍 Public
TTim Martinez
Last edited May 22, 2021
Created on May 22, 2021
Forked from HTML Starter

This example renders a smiling face as a set of overlapping SVG circles using React and ReactDOM. It draws a large yellow circle with a black stroke for the face, plus two smaller black circles for the eyes, all positioned via fixed coordinates on a 960×500 viewBox. The code uses React’s JSX syntax to declaratively define each circle element, mirroring an equivalent static SVG markup commented out in the HTML file.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part 1L

This example shows a simple smiley face constructed from three overlapping SVG circles on a yellow background. The largest circle forms the face, with two smaller circles representing the eyes, all rendered using React elements within an SVG container. The code defines fixed dimensions for the canvas, positions the circles relative to the center, and uses ReactDOM to render the component into the DOM. It uses React 18 and SVG, with no data source or interactive behavior.

MmarkAndrewRay
94% match
Loading thumbnail…

Smiley Face Part I

This example draws a yellow smiley face using static SVG circles: a large filled circle for the head and two smaller stroked circles for the eyes. It uses plain SVG markup inside a React-rendered HTML page, with React and ReactDOM loaded from CDN. The head’s dimensions and eye offsets are noted in comments, and the page suppresses scrolling for a clean, focused display.

Xxpdnt1
94% match
Loading thumbnail…

Smiley Face Part I

This example shows a static smiley face built from three SVG circles: a large yellow face, and two smaller black eyes. The face is rendered using React 17 and SVG elements defined directly in the HTML, with the React library loaded via CDN. It demonstrates basic SVG circle positioning and styling within a fixed 960 by 500 coordinate system. The code includes minimal React setup, though the rendered output does not depend on React’s rendering logic for the visible drawing.

Qqueens-lab
94% match
Loading thumbnail…

Smily Face Part1

This example renders a simple smiley face using React and SVG. A large yellow circle with a black stroke forms the head, while two smaller black circles positioned at the upper left and right serve as eyes. The code uses React 16.13.1 with ReactDOM to manage the DOM, though the SVG markup is written directly in the HTML file rather than as JSX. The face is static, with no mouth or interactive behavior, and outputs at 960 by 500 pixels.

RronnGh
94% match
Loading thumbnail…

Smiley Face Part I

This example shows a circular face rendered as a yellow SVG circle with a black stroke, centered on a 960×500 canvas. The code uses React 18 to define a functional component that outputs an SVG `<circle>` element, with dimensions calculated from the viewport’s center and half the stroke width. ReactDOM renders this component into the `#root` div, resulting in a simple smiley-face base without features. The rendering uses React’s JSX syntax and SVG primitives, with no additional data or interaction.

RRidaHwn
94% match
Loading thumbnail…

Smiley Face Part I

This example renders a simple smiley face using React and SVG, displaying a yellow circle with a black stroke and two smaller circles as eyes. The face is centered within a 960 by 500 pixel viewport, with eye positions offset horizontally and vertically from the center. The code uses ReactDOM.render to mount the component and draws shapes with circular SVG elements, specifying dimensions and coordinates as constant values.

IIvan Kok
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 II

This example shows a yellow smiley face drawn as a set of SVG circles, with a large circular face and two eye circles positioned symmetrically around the center. The face is rendered using React and ReactDOM, with all shape properties—such as the face radius, eye offset, and stroke width—defined as JavaScript constants. The code builds an SVG element with a group transform to center the face at the midpoint of a 960 by 500 canvas, and it includes a commented-out static SVG version as an alternative starting point.

JJjavellana
94% match