Art

100%

✓ Published1🌍 Public

Last edited Jan 4, 2024

Created on Jan 4, 2024

This example demonstrates a static composition of SVG shapes, including overlapping red and green circles, a diagonal line, and two path elements. The rendering uses raw SVG syntax directly in an HTML document, with inline CSS setting the page margin to zero and hiding overflow. The artwork is generated through explicit coordinate attributes such as `cx`, `cy`, and `d` for paths, and includes a commented-out rectangle to show alternative shapes. The piece explores layering and stroke styling without any interactive or animated behavior.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Example

This example demonstrates a static composition of basic geometric shapes rendered as SVG, including green, blue, and red circles, a black-bordered rectangle, a thick navy line, and a single path. The visualization uses raw SVG elements defined directly in the HTML, without any JavaScript libraries or data-binding frameworks. CSS applies a 3000-millisecond transition to the rectangles’ stroke properties, though no animated changes are triggered dynamically. The layout is fixed within a 960-by-500 viewport, with a large margin around the canvas, emphasizing the simple arrangement of shapes over data-driven content.

Ssz2036

86% match

Loading thumbnail…

SVG Shapes Dude

A simple, static SVG composition displays overlapping geometric shapes: a large red-stroked blue circle, two yellow rectangles, a red diagonal line, and a white triangular path with rounded joins. The visualization relies entirely on raw SVG elements—circle, rect, line, and path—with stroke and fill attributes set directly in the markup. The embedded CSS file only styles a text class and is unused for the shapes. No JavaScript or data is involved; the rendering approach is purely declarative SVG within an HTML page.

Aarontha

85% match

Loading thumbnail…

svg3

This example demonstrates fundamental SVG shape construction using raw SVG elements within an HTML document. The page displays overlapping red and green circles, a navy diagonal line, a custom path forming a horizontal capsule shape, and a black polyline path with a right-angle turn. The SVG canvas is set to 960 by 500 pixels with hidden page overflow. The code uses literal SVG tags such as `<circle>`, `<line>`, and `<path>`, with explicit coordinate and styling attributes, including fill colors, stroke colors, and stroke widths. A commented-out rectangle shows an alternative shape configuration without rendering it.

Yyesyesnono01@yahoo.com

84% match

Loading thumbnail…

Just test

This example demonstrates a simple static composition of geometric shapes, including circles, rectangles, lines, and a path, rendered as inline SVG elements. The visualization is framed by a bold black stroke on the primary shapes, while the secondary line group uses a distinct orange stroke for its path. The page also includes styled HTML text, with a red highlighted list item, and relies on custom CSS for typography and layout. The HTML structure directly embeds the SVG markup, with no external JavaScript libraries required.

Mmimimichelle

83% match

Loading thumbnail…

SVG Fundamental

This example demonstrates fundamental SVG shape rendering, combining basic geometric elements to form a simple composition. It shows overlapping red and white circles with black centers, reminiscent of stylized eyes, alongside small brown and black circular details, a yellow rectangle with a navy border, and a black diagonal line. The code uses raw SVG elements in an HTML file, including `circle`, `rect`, and `line`, with attributes for positioning, sizing, fill colors, and stroke properties. The rendering relies entirely on the browser's native SVG support without any JavaScript libraries.

Sshirinmehrpouran

83% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates basic SVG shape construction using raw HTML and SVG markup. It displays overlapping red and green circles, a navy diagonal line, a filled path resembling a rounded bracket, and a black open path with sharp corners. The code uses standard SVG elements like `<circle>`, `<line>`, and `<path>` with inline attributes for positioning and styling. A commented-out `<rect>` shows an alternate shape, while the `<style>` block removes page margins and hides overflow for a clean canvas. The rendering relies entirely on native SVG, with no external libraries or data sources.

Mmgrannan3

82% match

Loading thumbnail…

SVG Playground

This example shows a collection of primitive SVG shapes—circles, a line, and two paths—arranged in a 960 by 500 viewport to create a small, static composition. Overlapping circles in maroon and green sit beside a navy line, while a curved path and a rectilinear path add contrast. The code uses plain SVG markup within an `index.html` file, defining shapes with attributes like `cx`, `r`, and `d`. A commented-out rectangle and inline CSS for full-bleed display are also present, but no external libraries or data sources are involved.

CCurran Kelleher

82% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes through a simple static composition. It shows two overlapping circles in red and green, a navy diagonal line, a horizontal path forming a rounded rectangular shape, and a black polyline with a sharp corner. The visualization uses raw SVG elements embedded directly in HTML, including `<circle>`, `<line>`, and `<path>`, all rendered with explicit coordinates and styling attributes. The code relies solely on the native SVG API without additional JavaScript libraries, and the rendering is entirely vector-based.

HHamim Rahman

82% match