Patterns solo witt vertical

100%

Patterns solo witt vertical

✓ Published1🌍 Public

Last edited Oct 3, 2023

Created on Oct 3, 2023

Forked from Patterns

A stacked array of horizontal bands fills the browser window, with 100 rectangles of fixed height rendering as a full-screen vertical pattern. Each band spans the entire viewport width, creating a simple striped composition. The example uses plain SVG elements created via `document.createElementNS` and configured with setters for `width`, `height`, and `y` positions. No data source or animation is involved; the pattern is generated procedurally in JavaScript and appended directly to an SVG root element sized to the viewport.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Patterns

This example generates a full-screen abstract composition of 100 thin vertical rectangles. It uses the SVG namespace to create each rect element directly via JavaScript, setting the x position to increment by 20 pixels and giving each a fixed width of 10 pixels and a height equal to the window height. The visualization relies on `document.createElementNS` and `svg.appendChild` to build the pattern dynamically, without any external libraries.

Gguts

84% match

Loading thumbnail…

patterns masked

A grid of horizontal and vertical stripes is partially revealed through a circular mask, creating a layered pattern where the lines cross and overlap within the masked region. The visualization uses raw SVG APIs, including `document.createElementNS` to construct rectangles and a mask with a circle, alongside `setAttribute` to position elements. The stripes form a woven texture, and the mask highlights a central focal area while leaving the surrounding space empty.

Gguts

75% match

Loading thumbnail…

SVG + JS

This example uses JavaScript and the SVG API to construct a full-screen pattern of thin vertical and horizontal rectangles. It defines two SVG groups, each masked by a circle: one group displays vertical lines, the other horizontal lines, with the masks being inverses of each other. The resulting visualization shows a grid of perpendicular lines, with a circular region in the center showing only vertical lines, while the surrounding area displays only horizontal lines. The code programmatically creates SVG elements, including masks and groups, without using any external visualization libraries.

MMarta

74% match

Loading thumbnail…

Sol LeWitt vertical

A vertical grid of fine alternating strokes fills the screen, with a circular region in the center where the pattern's orientation flips from horizontal to vertical. The effect uses two SVG masks with reversed black-and-white circles to hide or reveal layers of rectangles. Written with D3 v7, it generates 100 horizontal and 100 vertical rect elements, each 10 pixels thick, and applies the masks via the `attr('mask', ...)` API. The full-viewport SVG is sized to the window, and no external data is used.

EEd Smale

74% match

Loading thumbnail…

Sol vertical

Sol vertical renders a vertical field of 100 static SVG rectangles, each 10 pixels wide and spaced 20 pixels apart, filling the full window height. The example uses the SVG namespace via `document.createElementNS` to construct the rectangles directly in JavaScript, with no external libraries. The visualization is purely geometric, showing a uniform grid-like pattern of striped bands that cover the browser viewport from top to bottom.

Iionakeeley

74% match

Loading thumbnail…

Sol lewitt vanilla js

A generative art piece renders a grid of horizontal and vertical rectangles as SVG elements, creating a striped pattern across the full browser viewport. The layout uses two SVG masks to selectively reveal the stripes: a circular mask exposes a central disk of horizontal bands, while an inverse mask reveals the remaining area filled with vertical bands. Built with vanilla JavaScript and the SVG DOM API via `document.createElementNS`, the visualization constructs all shapes procedurally without any external libraries, directly manipulating attributes like `x`, `y`, `width`, and `height`.

Ddwikbtn

74% match

Loading thumbnail…

Sol LeWitt

This example displays 50 vertical rectangles arranged in a repeating grid, filling the browser window with a pattern inspired by Sol LeWitt’s minimalist art. Each rectangle is positioned at an x-coordinate of 20 times its index, with a fixed width of 10 and a height equal to the full viewport. The visualization uses the SVG namespace and dynamically creates elements via `document.createElementNS`, setting width and height attributes from `window.innerWidth` and `window.innerHeight`. The code appends all shapes to a single SVG container without any interaction or data-driven updates.

Aavcwisesa

74% match

Loading thumbnail…

Sol LeWitt

This example generates a vertical field of narrow, evenly spaced black rectangles across the full height of the browser window, creating a rhythmic, striped composition reminiscent of Sol LeWitt’s wall drawings. It renders 100 SVG `<rect>` elements directly onto an `<svg>` created with the DOM API `document.createElementNS`. The rectangles are positioned incrementally along the x-axis at 20-pixel intervals, each with a fixed width of 10 pixels, while the height is set to match the window’s inner height. No external libraries are used; the visualization relies solely on native SVG parsing and JavaScript.

EEd Smale

73% match