Sol witt

100%

✓ Published0🌍 Public

Aamith-2001

Last edited Oct 5, 2023

Created on Oct 5, 2023

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Sol Lewwit

This example renders a minimalist generative composition inspired by Sol LeWitt’s geometric wall drawings. It creates 100 vertical rectangles of fixed width, evenly spaced across the viewport, with each rectangle’s height matching the full window height. The visualization dynamically adapts to the browser’s current dimensions using `window.innerWidth` and `window.innerHeight`. It constructs a raw SVG document via the Document Object Model (DOM) API, specifically `document.createElementNS` and `setAttribute`, without using any external libraries or frameworks.

PPeiyang Li

89% match

Loading thumbnail…

SVG Sol LeWitt

This example renders a grid of thin vertical rectangles across the full viewport using raw SVG elements. It creates 48 rectangles via `document.createElementNS` for the SVG namespace, positioning each at 20-pixel intervals with a fixed width of 10. The rectangles span the entire window height, producing a minimalist, repetitive pattern reminiscent of Sol LeWitt’s wall drawings. The code sets the SVG’s dimensions to `window.innerWidth` and `window.innerHeight`, and dynamically appends the SVG to the document body. No external libraries are used; only native JavaScript and SVG APIs.

Mmax-31

89% match

Loading thumbnail…

Sol LeWitt

This example generates a minimalist SVG composition inspired by Sol LeWitt, displaying 100 vertical rectangles evenly spaced across a 960-by-500-pixel canvas. Each rectangle maintains a fixed width of 10 pixels and spans the full height of the canvas, creating a rhythmic, striped pattern. The visualization is built programmatically using raw JavaScript and the SVG API, specifically creating SVG elements via `document.createElementNS` and appending them to the document. No external libraries are used; the rendering relies entirely on native browser support for SVG and scripting.

NNikki Masroor

87% match

Loading thumbnail…

Sol LeWitt in Vanilla JS

This example renders a generative art piece inspired by Sol LeWitt using vanilla JavaScript and SVG. It creates a full-screen SVG canvas and populates it with a series of vertical rectangles, each 10 pixels wide, spaced 20 pixels apart across the entire window width. The code uses `document.createElementNS` and `setAttribute` to construct SVG elements dynamically, looping to cover the viewport’s width. The result is a minimal, grid-based composition that directly translates the artist’s geometric aesthetic into a browser-based visualization.

Jjv

87% match

Loading thumbnail…

Sol Lewitt Reproduction

This example reproduces a Sol LeWitt-inspired wall drawing using raw SVG elements created directly through the DOM API. It shows a series of 100 thin vertical rectangles evenly spaced across the full height of the browser viewport, creating a minimalist striped pattern. The visualization uses `document.createElementNS` to generate SVG `rect` elements, setting each rectangle’s width to 10 pixels and its horizontal offset to 20 pixels apart. No external libraries are used, relying purely on vanilla JavaScript and CSS to render the geometric composition dynamically based on the window size.

HHéloïse Feldmann

87% match

Loading thumbnail…

Sol LeWtt Reproduction

This example reproduces a minimalist Sol LeWitt-inspired drawing using only SVG and JavaScript. It generates a series of 100 vertical rectangles with varying widths, creating a rhythmic grid pattern that spans the full height of the viewport. The code uses the Document Object Model (DOM) method `createElementNS` to construct SVG elements directly, with a simple `for` loop to position each rectangle horizontally. No external libraries are required—only standard JavaScript and CSS within a single HTML file. The result is a clean, geometric composition that fills the window dynamically.

DDanilo Moraes

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

86% match

Loading thumbnail…

Sol LeWitt Creation

This example generates a full-screen SVG that reproduces Sol LeWitt’s minimalist wall drawings. It creates a grid of 50 narrow vertical rectangles, each ten pixels wide and spaced twenty pixels apart, which collectively fill the entire browser viewport. The piece demonstrates the use of the Document Object Model (DOM) API’s `createElementNS` method to construct SVG elements directly through JavaScript, rather than employing a library like D3. The code iterates a loop, appending each rect to the SVG root, whose dimensions are set from `window.innerWidth` and `window.innerHeight`. The result is a clean, algorithmically generated abstract composition.

Ddexuzi

86% match