HTML1

100%

✓ Published0🌍 Public

Last edited Jul 27, 2022

Created on Jul 27, 2022

This example displays three circles layered on an SVG canvas. A red and a blue circle sit alongside a black outlined circle, with a large blue-bordered rectangle frame surrounding them. The page uses a raw SVG static drawing with no interaction or dynamic updates. The design emphasizes geometric positioning and color contrast, using basic SVG elements and attributes to create a simple visual composition.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello HTML

This example displays a simple static composition of three black-outlined circles on a yellow background, with a large central circle flanked by two smaller ones. The visualization is built using raw SVG elements embedded directly in an HTML page, with no external JavaScript libraries. It demonstrates basic SVG rendering by setting explicit coordinates, radii, fill colors, and stroke properties on circle elements within a fixed 960 by 500 viewport. The page uses minimal CSS to remove margins and hide overflow, focusing entirely on the vector shapes.

Ppurritola

87% match

Loading thumbnail…

First HTML

This example displays a single brown circle centered on a purple-outlined SVG canvas, demonstrating the foundational structure of an HTML page that integrates CSS and inline SVG markup. The circle is drawn directly using the SVG `<circle>` element with explicit `cx`, `cy`, and `r` attributes, and styled through SVG presentation attributes for fill and stroke. No JavaScript or external libraries are involved; the page relies solely on native HTML, CSS for margin and overflow reset, and JavaScript’s capability to render SVG within the browser, fulfilling the bare-minimum setup for a web-based visualization.

CClioTang

84% match

Loading thumbnail…

SVG

This example displays three circles positioned horizontally in an SVG container. The first circle is black, the second is red, and the third is green, with varying sizes to show basic SVG styling. It uses plain HTML and inline SVG elements, including the `<circle>` tag with attributes for center coordinates, radius, and fill color. The code demonstrates fundamental vector graphics rendering directly in the browser without any external libraries or data sources.

Nnguyenloan1506

84% match

Loading thumbnail…

Hello HTML

This example displays two black-outlined circles and a smaller pair of yellow circles on a blank 960 by 500 SVG canvas. The page uses raw HTML and inline CSS to remove default body margins and hide overflow. The circles are drawn using the SVG `circle` element, with coordinates and radius defined directly in the markup. No external libraries are used; the visualization relies on native browser rendering of the SVG.

Ssommerh

84% match

Loading thumbnail…

SVG Fundamental

This example demonstrates how to create basic SVG shapes, specifically circles, on an HTML page. The visualization renders a single row of three circles inside an SVG canvas, with the first circle unfilled and the second filled red. It uses the native SVG `<circle>` element and `cx`, `cy`, `r`, and `fill` attributes directly in static markup, with no JavaScript or external libraries involved.

AAlexHraven

84% match

Loading thumbnail…

Hello HTML

This example shows a single, unstyled circle centered in an SVG canvas, demonstrating the minimal structure needed to render a shape in a web page. The page relies on plain HTML and inline SVG, with no external libraries or JavaScript. The circle has a radius of 300 pixels and no fill or stroke, making it invisible against the white background. The SVG element is set to 900 by 500 pixels, and the body uses inline CSS to remove margins and hide overflow, ensuring the graphic fills the viewport without scrollbars.

Sspringsaga

84% match

Loading thumbnail…

Hello Html

This example presents a minimal HTML page that renders a single red circle inside an SVG element. The page sets the body margin to zero and hides overflow, creating a clean canvas for the graphic. The code uses a basic SVG `<circle>` tag with a radius of 200 and a red fill, positioned within a 500-by-1000 pixel viewport. It demonstrates the foundational interplay of HTML structure, inline CSS styling, and the SVG rendering API. The example serves as a starting point for more complex web-based visualizations.

FFrictionlessman

83% match

Loading thumbnail…

Hello HTML

This example shows a simple, static composition of three black-outlined circles on a yellow circle, arranged to suggest a face. It is a minimal HTML page that uses inline SVG within an `index.html` file, with the SVG canvas set to 960 by 500 pixels. The code relies solely on core HTML and SVG elements, such as the `<circle>` tag, to define the shapes, and it does not use any JavaScript libraries or external data sources. The presentation is a bare-bones demonstration of how Scalable Vector Graphics can be embedded directly into a web page.

AAbhimanyuGit447

83% match