Skip to main content
SimilarExport ZIP
100%

Fork of SVG FUNDAMENTALS

✓ Published0🌍 Public
AAamir Raza
Last edited Jun 26, 2022
Created on Jun 26, 2022
Forked from SVG FUNDAMENTALS

This example demonstrates a minimalist, abstract composition built from nested gray rectangles on a light background. The SVG canvas is 1440 by 1024 pixels, with a white base layer and a series of large, dark gray rectangles arranged in a cascading, offset pattern. The rendering uses raw SVG elements such as `rect` and `g`, applying a `clip-path` to constrain the drawing area. The visual effect relies on varying rectangle sizes and a high-opacity black fill to create a stark, layered geometric aesthetic.

AI-generated description

A demonstration of SVG shapes

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of SVG FUNDAMENTALS

This example demonstrates a minimalist, abstract composition built from nested gray rectangles on a light background. The SVG canvas is 1440 by 1024 pixels, with a white base layer and a series of large, dark gray rectangles arranged in a cascading, offset pattern. The rendering uses raw SVG elements such as `rect` and `g`, applying a `clip-path` to constrain the drawing area. The visual effect relies on varying rectangle sizes and a high-opacity black fill to create a stark, layered geometric aesthetic.

AAamir Raza
100% match
Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates the foundational structure of an SVG graphic, combining basic shapes to form a static, abstract composition. It uses a large, semi-transparent green circle as a background element, overlaid with a red, thick-stroked path that creates an organic, irregular line. Below these, three black rectangles are positioned to suggest a simple interface or layout block. The rendering relies purely on SVG elements (`circle`, `path`, `rect`) and CSS classes, with all coordinates defined via the `viewBox` attribute, resulting in a lightweight, code-driven illustration without external libraries.

Jjajinkyaa
86% match
Loading thumbnail…

Fork of SVG Fundamentals (Submission)

This example demonstrates basic SVG shape composition by layering a black circle with a white inner circle inside a square outline, all positioned within a 1000-by-1000 pixel viewport. The visualization uses raw SVG elements—`circle` and `rect`—directly in HTML, with attributes controlling fill colors, stroke properties, and coordinates. The rendering approach relies on static SVG markup without external libraries or JavaScript, showing how simple geometric forms can be combined to create a minimalist graphic. The square’s border and the circles’ contrasting fills highlight fundamental vector-drawing concepts.

OOdeforodds
84% match
Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates a grid-based color study composed entirely of SVG rectangles. The canvas is partitioned into distinct sections with varying cell sizes—large quadrants, medium sub-divisions, and smaller swatches—each filled with a different named HTML color. The composition uses raw SVG `<rect>` elements with explicit `x`, `y`, `width`, `height`, and `fill` attributes to construct a structured, geometric patchwork of hues. The rendering approach relies solely on the SVG format, with the layout defined directly in the markup and styled through inline attributes. The piece serves as a fundamental exploration of spatial proportion and color placement.

Mmugiwarafx
84% match
Loading thumbnail…

Fork of SVG fundamentals

This example demonstrates basic SVG shapes, including circles, a rectangle, a line, and a path, arranged on a 960-by-500 canvas. It shows how different fill colors, stroke properties, and coordinate points define each element’s appearance and position. The code uses raw SVG markup directly in an HTML document, with no external libraries or JavaScript. The rendering approach relies on the browser’s native SVG support to display these primitive geometric forms.

Mmecklybver@gmail.com
83% match
Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates a collection of basic SVG shapes arranged in an overlapping composition, including circles, rectangles, lines, and paths. The visualization uses raw SVG elements within an HTML document, with shapes styled through fill and stroke attributes. The code creates visual layering effects by placing semitransparent or fully opaque circles of different colors at various positions, alongside thickly stroked rectangles and geometric paths. The rendering relies entirely on the browser's native SVG support through the `<svg>` element, with no external JavaScript libraries or data sources involved.

Aadventuresenglish.info@gmail.com
83% match
Loading thumbnail…

Fork of SVG Fundamentals

A minimal fork of an SVG fundamentals demonstration renders two primitive shapes—a black circle and a purple rectangle with an orange stroke—directly inside a static SVG canvas. The example illustrates basic vector graphics construction using raw Scalable Vector Graphics (SVG) markup within an HTML document, with no external JavaScript libraries or data sources. It showcases how the `circle` and `rect` SVG elements define geometry and styling attributes such as fill, stroke, and stroke-width, serving as a clear starting point for understanding SVG syntax and rendering in a browser.

SShikhar Pachori
83% match
Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes placed on a large 2000-by-2000 canvas. It shows how circles and lines are rendered with explicit attributes for position, size, fill color, and stroke properties. The code uses raw SVG elements within a plain HTML file, with no external JavaScript libraries. Rendering relies on the browser’s native SVG support, applying hard-coded values such as yellow and grey fills, black strokes, and a red diagonal line. It serves as a minimal, static illustration of basic vector graphics syntax.

Ggeneralsuboncomp@proton.me
83% match