Skip to main content
SimilarExport ZIP
100%

Sol vertical

✓ Published1🌍 Public
Iionakeeley
Last edited Jan 27, 2023
Created on Jan 20, 2023
Forked from HTML Starter

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.

AI-generated description

Sol

MIT Licensed

Similar vizzes

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
85% match
Loading thumbnail…

Sol Lewitt picture

This example reproduces a Sol LeWitt-inspired geometric composition using raw SVG. The visualization shows a series of one hundred vertical rectangles evenly spaced across the full width of the browser window, each with a fixed width of 10 pixels and extending the entire height of the viewport. The code generates the SVG elements directly via the Document Object Model (DOM) API, using `document.createElementNS` and `setAttribute` to position and size each rectangle. The rendering relies on the browser’s native SVG support, with no external libraries or data sources involved.

FFrancisco Ibelles
82% match
Loading thumbnail…

Sol Lewitt in SVG

The example generates a minimalist geometric composition inspired by Sol Lewitt, using a series of uniformly spaced vertical silver rectangles that stretch the full height of the browser window. It shows a systematic grid of 100 thin bars created entirely with dynamic SVG elements. The code builds the visualization by appending SVG `rect` nodes to the document, setting each bar’s x-coordinate incrementally at intervals of 20 pixels with a fixed width of 10. It relies on the raw Document Object Model API, including `document.createElementNS` and `setAttribute`, to construct the scene in plain JavaScript without external libraries.

KKirsten Lund
82% 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
82% match
Loading thumbnail…

Sol LeWitt in JS

This example renders a full-screen SVG of 100 vertical rectangles, spaced incrementally across the width, to approximate a minimalist scatterplot or grid composition reminiscent of Sol LeWitt’s geometric art. The page sets up an SVG namespace using `document.createElementNS` and dynamically appends each `rect` element with fixed width and height equal to the viewport. The code directly uses the `window.innerWidth` and `window.innerHeight` properties to size the canvas, with no external libraries. The result is a clean, repeating pattern that emphasizes structure and rhythm over data variation.

Jjeremyyq@gmail.com
82% match
Loading thumbnail…

Sol LeWitt

This example reproduces a Sol LeWitt-inspired geometric drawing using SVG. A series of 100 horizontal rectangles, each 10 pixels tall and spaced 20 pixels apart, render across the full screen width. A circular mask centered on the viewport clips these rectangles, revealing only the lines inside the circle. The visualization uses plain JavaScript to create SVG elements dynamically, with no external libraries, and responds to the browser window’s dimensions for sizing.

Ttonkocorp
82% match
Loading thumbnail…

Sol witt

This example generates a full-screen SVG visualization inspired by Sol LeWitt’s geometric wall drawings. It creates 100 vertical rectangles, each 20 pixels apart and 10 pixels wide, spanning the entire height of the viewport using the `window.innerWidth` and `window.innerHeight` properties. The code directly manipulates the SVG DOM via `document.createElementNS` and `setAttribute`, appending the shapes to the page without any external libraries or data sources.

Aamith-2001
82% 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
82% match