Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Fundamentals

Public visualization

Viewing a saved revision (read-only)

c79489ffd0b346f5901c9a2bed4b34b2

SVG Fundamentals

0 stars0🌍 Public
KKresna Satya
Last edited Feb 29, 2024
Created on Feb 28, 2024
Forked from HTML Starter

This example demonstrates the foundational use of SVG to generate abstract geometric patterns programmatically. It creates a series of 100 vertical rectangles that span the full height of the viewport, with each rectangle positioned sequentially along the x-axis. The rendering approach relies on the raw Document Object Model (DOM) API, using `document.createElementNS` to construct SVG elements in the `http://www.w3.org/2000/svg` namespace. The code explicitly sets attributes like `x`, `width`, and `height` on each `<rect>` element, then appends them to an `<svg>` container sized to match the window dimensions. No external libraries are used; the example illustrates how plain JavaScript and SVG can produce visual compositions inspired by minimalist art.

AI-generated description

SVG Fundamentals