Betsy Reyes

100%

✓ Published0🌍 Public

Last edited Jun 6, 2022

Created on Jun 3, 2022

A playful abstract composition built entirely with SVG shapes rendered in a web page. The piece arranges geometric elements on a 1500-by-1500 canvas, including a RoyalBlue square, orange rectangles, yellow and grey polygons, and thin orange polylines that suggest radiating rays from a central point. A small text label reading "PANEL SOLAR" accompanies the grey polygon shape. The HTML document uses inline SVG markup directly, with each shape's fill, stroke width, and coordinates defined as attributes. The rendering relies on the browser's native SVG interpreter, with no external JavaScript libraries.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hola

This example displays a static SVG composition featuring a blue-outlined rectangle, a black circle, and a red diagonal line on a 1200 by 900 canvas. The single HTML file uses inline CSS and JavaScript-free markup to position each shape. The SVG is drawn directly in the document, with the rectangle’s stroke-width set to 20 and the line defined from the origin to the point (100,100). It demonstrates basic vector graphics rendering in a bare-bones web page.

DDavid Alarcón

66% match

Loading thumbnail…

Untitled

This example reproduces a Sol LeWitt art piece using raw SVG primitives. It shows a static composition of geometric shapes: a blue square, a green circle, a purple ellipse, a diagonal gray line, and red text reading “SVG TEXT,” arranged horizontally. The rendering relies entirely on hand-coded SVG elements within an `index.html` file, using direct `<rect>`, `<circle>`, `<ellipse>`, `<line>`, and `<text>` tags, without any JavaScript or external libraries beyond the declared D3 dependency, which is not actually invoked. The visual output is a simple, flat, non-interactive illustration.

Mmavercikalvin

66% 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

65% match

Loading thumbnail…

SVG shapes and animation sandbox

A playful sandbox demonstrates how SVG shapes and animation can compose a simple landscape. The viewport is filled with a sequence of horizontal `<rect>` elements using a palette of blue CSS color names to create a stylized sky. A pink flower is constructed from positioned `<circle>` and `<path>` elements, while two groups of cloud shapes (one light, one dark) are defined as reusable `<g>` elements. The clouds are set in motion using the SVG `<animateMotion>` element, which moves them along a defined cubic Bézier path with different durations and repeat counts, creating a gentle, looping drift.

KKirsten Lund

65% match

Loading thumbnail…

solLewitt

This example reproduces a Sol LeWitt-inspired drawing using raw SVG, creating a static geometric composition within a 960 by 500 pixel canvas. The code relies on the SVG API directly to render shapes, though the current script only includes JavaScript fundamentals and does not generate any visible artwork on the page. The SVG element is the primary rendering surface, with the body styled to hide overflow. The source material is a simple HTML file with embedded script, and no external visualization libraries are used.

Mmartina.dallamico.1@studenti.unipd.it

65% match

Loading thumbnail…

Sol LeVitt

A red circle with horizontal white stripes and vertical white stripes creates a grid-like pattern, demonstrating a minimalist geometric composition. The artwork uses inline SVG elements within an HTML page, including a circle filled with red and rectangles filled with white to form the stripes. The SVG canvas is fixed at 400 by 400 pixels, with the circle positioned accordingly. This example showcases how basic SVG shapes can be combined to recreate the visual style of Sol LeWitt's wall drawings, using only HTML and CSS with no JavaScript.

MmyN3RD

65% match

Loading thumbnail…

Sol Lewitt Reproduction

This reproduction of a Sol Lewitt art piece displays a grid of geometric shapes, including squares, triangles, and circles, arranged in a colorful, patterned composition. The SVG renders the artwork statically on a 960 by 500 pixel canvas, using plain HTML and JavaScript with no external libraries. The code includes only commented-out JavaScript syntax examples, so the visual is generated solely through the SVG markup, directly mimicking Lewitt’s instructional style.

JJOSHUA BUSINGE

64% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWITT wall drawing as an interactive SVG visualization. The page renders a 960-by-500 SVG canvas and uses plain CSS and JavaScript, with React as the framework, to generate geometric shapes. The drawing consists of vertical and horizontal lines in a grid pattern, executed in black and white. The code includes a minimal HTML wrapper and a script that logs to the console, but the core geometry is defined through the SVG elements. The rendering relies on React’s component structure and SVG’s native shape primitives to compose the artwork.

BBenLeathers

64% match