Fork of SVG Fundamentals

100%

Fork of SVG Fundamentals

✓ Published1🌍 Public

Eeric.r.thornhill@gmail.com

Last edited May 6, 2025

Created on May 6, 2025

This example generates a full-screen abstract composition by dynamically creating an SVG scene using the DOM API. It shows one hundred vertical rectangles, each 10 pixels wide, spaced 20 pixels apart across the viewport width, extending the full window height. The code uses the raw `document.createElementNS` method to build SVG `rect` elements without any external libraries, setting the SVG dimensions to the browser's `innerWidth` and `innerHeight`. The script then appends each rectangle sequentially, producing a rhythmic grid of uninterrupted lines.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates a full-screen display of 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the entire height of the browser window. The SVG is created entirely through JavaScript using the `document.createElementNS` method with the SVG namespace, appending each rectangle directly to an `<svg>` element sized to match the window's inner width and height. No data source is used; the visualization is purely algorithmic, showing how to generate SVG shapes programmatically without any external libraries.

Ssharmamilan632.m@gmail.com

90% match

Loading thumbnail…

Fork of Fork of SVG Fundamentals

This example reproduces a Sol LeWitt–style drawing by generating vertical black bars across the full browser viewport. The code creates an SVG element sized to the window’s inner dimensions and appends a series of `<rect>` elements spaced 20 pixels apart, each 10 pixels wide and as tall as the window. It uses the JavaScript DOM API (`createElementNS`, `setAttribute`, `appendChild`) to build the SVG programmatically. The resulting composition is a minimalist grid of alternating stripes, driven entirely by the current window size.

SSimon Krukowski

88% match

Loading thumbnail…

SVG Fundamentals

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.

KKresna Satya

86% match

Loading thumbnail…

Fork of SVG

A fork of SVG renders a full-screen canvas of one hundred vertical black bars. The visualization shows a rigid, rhythmic grid that fills the viewport, created entirely through the Document Object Model (DOM) and the SVG `rect` element. The script uses JavaScript’s `document.createElementNS` with the SVG namespace to dynamically generate each rectangle, setting its `x` position, fixed `width`, and `height` equal to the window’s height. The bars are placed sequentially every twenty pixels, resulting in a stark, minimalist composition that directly reflects the numeric loop in the code.

KKhanin Sisaengsuwanchai

84% match

Loading thumbnail…

SVG Fundamentals

This example introduces fundamental SVG rendering by generating a grid of 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, across the full browser window height. The code uses native DOM manipulation with `document.createElementNS` and the `http://www.w3.org/2000/svg` namespace to construct the SVG elements dynamically in a loop. It also demonstrates viewport sizing via `window.innerWidth` and `window.innerHeight`, with CSS applied globally to remove margins and hide overflow.

DDonald Bagwell

83% match

Loading thumbnail…

Fork of SVG Fundamentals - Sol LeWitt repro follow-along

This example reproduces a Sol LeWitt art piece using dynamically generated SVG rectangles. The code creates 100 vertical black bars, each 10 pixels wide, evenly spaced across the full window height, filling the browser viewport. It uses the Document API (`createElementNS`) to build SVG elements from scratch within JavaScript rather than a dedicated visualization library. The rendering approach directly mirrors LeWitt’s geometric, minimalist style by iterating through a fixed count of shapes.

MMichael Gomersall

83% match

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example displays a full-window SVG visualization of vertical black bars, creating an abstract, striped pattern that fills the viewport. It uses the raw Document Object Model (DOM) API, specifically `document.createElementNS` with the SVG namespace, to dynamically generate rectangles. The code calculates bar size and count based on window dimensions, then appends each `rect` element to the SVG root, which is itself appended to the body. No external libraries are used; the rendering is entirely driven by native JavaScript and SVG.

Ccaitlin-woods

83% match

Loading thumbnail…

Fork of HTML Starter

This example shows a full-screen SVG canvas generated entirely with vanilla JavaScript, without any external libraries. It creates 100 vertical rectangles, each 10 pixels wide, positioned at 20-pixel intervals across the viewport width. The code uses the Document Object Model (DOM) API methods `createElementNS`, `setAttribute`, and `appendChild` to build the SVG elements dynamically. The rectangles stretch to the full height of the window, producing a simple striped pattern that reacts to the browser’s current dimensions at load time.

SShannon Teoh

83% match