Sol Lewitt Viz-Part II

100%

Sol Lewitt Viz-Part II

✓ Published0🌍 Public

Last edited Aug 4, 2025

Created on Aug 4, 2025

This example demonstrates the fundamentals of programmatic SVG rendering through the creation of a single black vertical rectangle on a white canvas. The visualization combines an SVG element with a rectangle, both generated entirely through JavaScript’s `createElementNS` method and appended to the document body. The code specifies the SVG namespace, sets the canvas dimensions to 500 by 500 pixels, and positions the rectangle at an x-coordinate of 90 with a width of 10 and height of 300. The work is inspired by Sol LeWitt’s geometric art, using a minimal approach that highlights basic vector graphics construction.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol Lewitt Viz

This example reproduces a Sol LeWitt art piece as a static SVG visualization. It renders a 500 by 500 pixel SVG canvas containing text elements styled with the Roboto Mono font. The code uses vanilla JavaScript to construct the SVG structure, with commented-out examples showing basic programming concepts like functions, loops, and objects. The visualization relies on SVG's native text and styling capabilities rather than external data or libraries, emphasizing geometric and typographic composition inspired by LeWitt's conceptual art.

Rraturi22@gmail.com

86% match

Loading thumbnail…

Sol Lewitt in Vanilla JS Project Attempt #1

This example recreates a Sol Lewitt-inspired geometric drawing using nested, alternating black-and-white rectangles that shrink toward the center of an SVG canvas. The work is generated entirely with vanilla JavaScript, manipulating SVG elements through the Document Object Model (DOM) and the `createElementNS` API. It renders a grid of concentric rectangles with varying stroke widths and fill colors, producing a static, pattern-based composition. The code uses raw SVG string concatenation within a loop to build the shapes, with no external libraries or data sources involved.

CCasualWanderer20XX

85% match

Loading thumbnail…

Sol Lewitt reproduction

This example demonstrates the foundational construction of SVG graphics through JavaScript. It shows a single blue square rendered on an HTML page, created programmatically using the Document Object Model (DOM) API. The code first creates an SVG element with specified dimensions and a border, then appends a rectangle with set coordinates, size, and fill color using `createElementNS` and `setAttribute` methods. The example serves as a basic introduction to the SVG library's core functionality for positioning and styling shapes.

Aaaron.00366@gmail.com

84% match

Loading thumbnail…

Chapter 3 Sol Lewitt

This example reproduces a Sol LeWitt-inspired drawing by rendering 100 vertical rectangles in a loop, using the SVG API to create and append elements directly to the page. The code sets the canvas to the full window size and places each rectangle with a fixed width of 10 pixels and a horizontal spacing of 20 pixels, extending each shape to the full height of the viewport. The visualization demonstrates a minimalist, grid-like composition driven entirely by JavaScript and native SVG methods, with no external libraries or data sources.

SSergio

83% match

Loading thumbnail…

Sol Lewitt

This example renders a full-screen SVG composed of one hundred vertical rectangles, each ten pixels wide, spaced twenty pixels apart. The rectangles are created programmatically using the native Document Object Model API, with `document.createElementNS` and `setAttribute` to construct each SVG `rect` element. The `window.innerWidth` and `window.innerHeight` properties define the canvas dimensions, while the fixed loop count determines the layout. The result is a minimalist, grid-like pattern inspired by Sol LeWitt’s geometric wall drawings, though no data source or interaction drives the composition.

BBaptPoi

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

83% match

Loading thumbnail…

Sol Lewitt Reproduction

This example reproduces a Sol LeWitt drawing as a single black vertical rectangle spanning the full height of an SVG canvas. The work is rendered entirely through the native Document Object Model’s `createElementNS` and `appendChild` methods, without external libraries like D3. The script sets the SVG’s width and height attributes to fixed pixel values and appends the rectangle directly to the page body. The accompanying CSS hides page margins and scrollbars, focusing attention solely on the minimalist geometric form. The data source is the original LeWitt artwork.

Mmaxthamt

83% match

Loading thumbnail…

Sol LeWitt Reproduction

This example displays a Sol LeWitt-inspired geometric composition, rendering a series of vertical black bars across a white background. The code creates a full-screen SVG canvas using the native JavaScript `document.createElementNS` API. It draws 100 rectangles, each 10 pixels wide and spaced 20 pixels apart, with heights set to match the viewport’s inner height. The rigid, repeated pattern mirrors LeWitt’s minimalist wall drawings, and the approach directly translates a simple algorithmic grid into scalable vector graphics.

Rroyable88

83% match