SVG Demo

100%

✓ Published0🌍 Public

Last edited May 8, 2023

Created on May 6, 2023

This demo shows basic SVG shapes composed directly in HTML markup, including a circle, rectangle, line, and path. The SVG element uses a fixed 960x500 viewport with inline styling for stroke and fill attributes. It renders static vector graphics without any JavaScript libraries or data sources, relying solely on native SVG presentation attributes. The message styling suggests decorative intent, while the line element contains duplicated X1 attributes and the path draws a simple polyline.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Demo

This example demonstrates basic Scalable Vector Graphics (SVG) shapes, including circles, rectangles, lines, and paths, rendered directly in an HTML page. The visualization uses inline SVG elements within an `index.html` file, with styling applied via an external `styles.css` stylesheet. The SVG canvas is scaled and translated using SVG transform attributes, while CSS classes like `.lines` and `.c3` control stroke colors, widths, and fill properties for grouped elements. The code highlights how SVG’s native coordinate system and CSS cascading rules combine to define a static, vector-based graphic.

GGabrz

89% match

Loading thumbnail…

SVG

This example demonstrates basic SVG shape rendering within an HTML page, showing circles, rectangles, a line, and a custom path. The SVG element spans 960 by 500 pixels and uses inline attributes for styling, such as fill colors, stroke colors, and stroke widths. A circle with a red fill, a blue-stroked hollow rectangle, a gold-filled inner rectangle, a navy diagonal line, and a red triangular path all appear without interactive behavior. The code relies solely on native SVG elements—no external libraries—highlighting how static vector graphics can be defined directly in markup.

Mmanunair16

88% match

Loading thumbnail…

SVG demo

This demo shows basic SVG shapes—circles and rectangles—styled with colors, strokes, and a group transform. It uses inline SVG elements directly in the HTML, with CSS rules that set the page margin and overflow. Shapes are positioned via attributes like cx, cy, and x, y, while a <g> element applies a blue fill, black stroke, and a vertical translation to multiple shapes at once. No JavaScript libraries are involved; rendering relies entirely on the browser’s native SVG support.

Ssamawi.samadikun@gmail.com

88% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape elements, including circles, rectangles, lines, and paths, rendered directly on an HTML page. It shows how these primitives are defined with coordinates, dimensions, and styling attributes such as fill colors and stroke properties. The code uses native SVG markup inside an inline `<svg>` element with a width of 960 and height of 500. It illustrates fundamental vector graphics concepts without relying on external libraries, focusing on the core structure and attributes of SVG.

Vvalsorayksterob

86% match

Loading thumbnail…

SVG Demo

This example displays static geometric shapes composed of a red circle, a navy line, and a red rectangle with a thick navy border, all positioned on an 800-by-500 SVG canvas. The SVG markup defines each shape using standard `circle`, `line`, and `rect` elements, with explicit coordinates and styling attributes such as `fill` and `stroke`. It demonstrates the fundamental approach of creating vector graphics directly within an HTML document using inline SVG, without relying on JavaScript libraries or external data.

Mmikefmc2005

86% match

Loading thumbnail…

SVG

This example demonstrates a collection of basic SVG shapes, including circles, rectangles, lines, and a path, arranged in a scaled and translated coordinate system. The code uses raw SVG elements within an HTML document, applying CSS classes to style the line and path elements with black and green strokes. A white-filled group with black outlines is layered over earlier shapes to show overlap and composition. The visualization shows how SVG coordinates and grouping transforms can be combined to build simple geometric compositions without any external JavaScript libraries.

JJasonXu1244

86% match

Loading thumbnail…

SVG With HTML

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in groups with inline and CSS styling. It shows how SVG elements can be transformed using `scale` and `translate` attributes, and how CSS classes like `.lines` control stroke appearance and line joins. The code uses raw SVG markup with no external libraries, alongside a minimal HTML page and a console script that logs a message. The rendering approach relies entirely on SVG’s native coordinate system and styling properties.

Aalobry

85% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering in a static HTML document. The code draws a circle, rectangle, line, and path directly onto an SVG canvas using standard SVG elements. The shapes are styled with attributes such as fill, stroke, and stroke-width, showing fundamental geometric primitives. This approach relies solely on native SVG APIs, with no external JavaScript libraries or data sources, providing a minimal illustration of vector graphics construction.

PPhan Nguyen

85% match