Patterns

100%

✓ Published1🌍 Public

Last edited Oct 3, 2023

Created on Oct 3, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Patterns solo witt vertical

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.

Gguts

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

83% match

Loading thumbnail…

Fork of SVG Fundamentals

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.

Eeric.r.thornhill@gmail.com

81% match

Loading thumbnail…

mySVGwork

This example displays a full-screen SVG canvas filled with one hundred vertical rectangles, each ten pixels wide and spaced twenty pixels apart. The code generates the graphic dynamically using the Document API's `createElementNS` method to construct SVG elements. The rectangles span the entire height of the browser window, creating a striped pattern that responds to the current viewport dimensions. The rendering approach uses a simple loop to position each shape incrementally across the horizontal axis.

DDonald Bagwell

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

80% match

Loading thumbnail…

API DOM

This example displays a full-screen abstract pattern of 100 horizontal and 100 vertical SVG rectangles, layered to create a grid. A white circular mask is applied to the horizontal bars, cropping them within a centered ring while the vertical bars span the entire viewport. The visualization is built entirely with the SVG DOM API, using `document.createElementNS` to construct each rect, mask, and circle, and relies on `window.innerWidth` and `window.innerHeight` to size the canvas. The code draws no explicit data, instead showcasing a programmatic composition inspired by a Sol LeWitt lesson.

Mmarc.chatton@outlook.com

80% match

Loading thumbnail…

Lecture 3

This example demonstrates a full-screen SVG visualization of 100 vertical rectangles, each with a fixed width of 10 pixels and spacing of 20 pixels, filling the entire viewport height. It uses the Document Object Model API’s `createElementNS` method to construct SVG elements—specifically the `<svg>` and `<rect>` tags—within the `http://www.w3.org/2000/svg` namespace. The rectangles are generated in a JavaScript loop, with their `x` positions advancing by 20 pixels per iteration, creating a striped pattern across the window. The code sets the SVG’s width and height to the browser’s inner dimensions, ensuring the visualization scales responsively.

Jjajinkyaa

78% match

Loading thumbnail…

SVG Fundamentals

This example illustrates fundamental SVG rendering by generating a grid of vertical rectangles that stretch across the full height of the browser window. The code creates 100 rectangle elements using the Document Object Model’s `createElementNS` method with the SVG namespace, setting each rectangle’s x-coordinate and width via attributes. It leverages vanilla JavaScript to dynamically append these shapes to an SVG container that is sized to match the viewport using `window.innerWidth` and `window.innerHeight`. The result is a simple, repeating pattern that demonstrates basic SVG shape creation without external libraries.

SSidney Oluoch

78% match