Skip to main content
SimilarExport ZIP
100%

svg_stuff

✓ Published0🌍 Public
SSam Malloc
Last edited Mar 14, 2021
Created on Mar 14, 2021
Forked from Hello HTML

This example shows a yellow circle centered on an SVG canvas with two smaller unfilled circles, creating a simple smiley-face composition. Built with React 17 and rendered directly through SVG markup, the graphic uses circle elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The body is styled with zero margin and hidden overflow, while the `<svg>` is sized at 960 by 500 pixels. The illustration demonstrates basic vector shape construction within an HTML page.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smile face with SVG

This example displays a simple smiley face rendered as a yellow circle with a black outline on a 960-by-500 pixel SVG canvas. It demonstrates basic SVG shape drawing using React and SVG elements. The code defines a single `<circle>` element with explicit positioning (`cx`, `cy`) and styling attributes (`fill`, `stroke`, `stroke-width`), embedded directly in the HTML. It shows how static vector graphics can be created with minimal markup, using only SVG’s native geometry and CSS for layout.

Mmaricabertarini
89% match
Loading thumbnail…

HTML CSS SVG Emm

An SVG smiley face is drawn on a yellow circle with black strokes, featuring two eye circles on a 960 by 500 canvas. The code uses raw React and static SVG elements, manually positioning each circle via `cx`, `cy`, and `r` attributes. The example demonstrates basic vector shape composition without interactivity, relying on fixed coordinates for the face's features.

Eedrisimm
88% match
Loading thumbnail…

Smiley face partI

This example shows a simple yellow smiley face composed of three SVG circles: one large face and two smaller eyes, drawn on a 960x500 canvas. The visualization uses static React markup within an HTML page, with React and ReactDOM loaded from CDN. It relies on SVG circle elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes, producing a minimal demonstration of declarative component rendering without interactivity or data input.

Mmario-iurlaro
88% match
Loading thumbnail…

Hello HTML

This example shows a simple SVG smiley face composed of three circles on a yellow background, rendered within a fixed 960 by 500 pixel canvas. The page is a bare minimum HTML document that includes a heading and embeds the graphic directly. It uses raw SVG markup with circle elements, setting their center coordinates, radii, fill colors, and stroke properties. The page also imports the React library from a Content Delivery Network, though the visualization itself does not depend on React for its rendering.

OOlayemi
87% match
Loading thumbnail…

Heloo

This example displays a simple yellow smiley face drawn as a circle with two smaller black circles for eyes on a 960-by-500 SVG canvas. Rendered using React and ReactDOM within a single component, the visualization demonstrates the SVG `circle` element with props such as `cx`, `cy`, `r`, `fill`, and `stroke` for styling. The code draws only the face’s outline and eyes, leaving the mouth unfinished, as the README notes. The source uses static hardcoded coordinates rather than any data processing or animation library.

AACS264
87% match
Loading thumbnail…

Smiley Circle Part I

This example displays a simple smiley face drawn with three SVG circles on a yellow background. The main circle forms the face, while two smaller circles serve as eyes. The visualization uses React 17, loaded via UMD, and renders entirely through declarative SVG elements within an HTML page. The face is centered in a 960 by 500 viewport, with the body styled for large text display. No interactive behavior or data binding is implemented; the graphic is static, defined directly in the markup.

CConrad F D'Cruz
87% match
Loading thumbnail…

Smiley face

This example draws a simple smiley face using SVG shapes. It shows a large yellow circle for the head, two smaller unfilled circles for eyes, and relies on the stroke and fill attributes from the React-created SVG markup. The code uses React 17 via the UMD production build to render the SVG directly in the HTML, with inline properties for positioning and styling. The face is centered on a 960×500 canvas, and the mouth is implied by the head’s bottom edge rather than drawn explicitly.

Rrikaami13
87% match
Loading thumbnail…

Smiley face

A yellow circle with a black stroke forms a smiley face, with two smaller filled circles placed as eyes. The entire graphic is rendered as static SVG elements inside an HTML page. The page loads React and ReactDOM from a CDN, though the visible drawing is done with direct SVG tags rather than through React components. The code uses the `circle` element with explicit `cx`, `cy`, and `r` attributes, and the main face has a `fill` of yellow and `stroke-width` of 5. The example demonstrates basic SVG shape composition in a minimal setup.

PPaula Donoso
87% match