Fork of Fork of SVG Fundamentals

100%

Fork of Fork of SVG Fundamentals

✓ Published1🌍 Public

Last edited May 8, 2024

Created on May 8, 2024

This example reproduces a Sol LeWitt–style drawing by generating vertical black bars across the full browser viewport. The code creates an SVG element sized to the window’s inner dimensions and appends a series of `<rect>` elements spaced 20 pixels apart, each 10 pixels wide and as tall as the window. It uses the JavaScript DOM API (`createElementNS`, `setAttribute`, `appendChild`) to build the SVG programmatically. The resulting composition is a minimalist grid of alternating stripes, driven entirely by the current window size.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of SVG Fundamentals - Sol LeWitt repro follow-along

This example reproduces a Sol LeWitt art piece using dynamically generated SVG rectangles. The code creates 100 vertical black bars, each 10 pixels wide, evenly spaced across the full window height, filling the browser viewport. It uses the Document API (`createElementNS`) to build SVG elements from scratch within JavaScript rather than a dedicated visualization library. The rendering approach directly mirrors LeWitt’s geometric, minimalist style by iterating through a fixed count of shapes.

MMichael Gomersall

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

88% match

Loading thumbnail…

Fork of Sol LeWitt Vertical

This example recreates a Sol LeWitt-inspired wall drawing as a dense field of uniform vertical bars rendered in black on a full-window SVG canvas. It shows how simple repetition of a geometric primitive can produce a rhythmic, minimalist composition. The code uses the raw Document Object Model API, creating 100 `rect` elements via `document.createElementNS` and appending them to an SVG root. Each rectangle is positioned at twenty-pixel intervals, with a fixed width of ten pixels and a height matching the browser viewport, filling the entire display area.

Eeric.r.thornhill@gmail.com

87% match

Loading thumbnail…

Fork of Sol LeWitt practice

This example uses JavaScript and the SVG API to create a full-window, grid-like pattern of vertical bars. It calculates the number of bars needed based on the window’s width and a fixed bar length with padding, then dynamically generates and positions each SVG rectangle. The code uses `document.createElementNS` and `setAttribute` to construct the vector graphics, and `console.log` examples in the README illustrate basic variable reassignment with `let` and `var`. The result is a minimalist, striped composition that directly references Sol LeWitt’s geometric wall drawings.

Ppanthabuddhi@gmail.com

87% match

Loading thumbnail…

Fork of Fork of JS and d3

This example is a simple reproduction of a Sol LeWitt-inspired drawing, created with plain JavaScript and the SVG DOM API. It renders 100 vertical rectangles, each 10 pixels wide, spaced 20 pixels apart across a 960 by 500 pixel canvas, filling the viewport without margins. The code directly manipulates SVG elements via `document.createElementNS` and `setAttribute`, demonstrating a minimal, non-D3 approach to generative art. The static composition highlights the geometric repetition characteristic of LeWitt’s wall drawings.

Ppiekarczvk@gmail.com

86% match

Loading thumbnail…

Fork of SVG fundamentals

This example reproduces Sol LeWitt’s wall drawing from a 2021 CT Public article, using raw SVG elements in an HTML page with JavaScript. The code defines a simple static composition, relying on commented-out JavaScript lessons that explore variables, functions, and objects. The SVG canvas is 960×500 pixels, with margin and overflow styles reset for full view. No external libraries are loaded; the drawing depends entirely on the inline `<svg>` markup and the browser’s native rendering. The piece focuses on geometric structure typical of LeWitt’s conceptual art, presented without interactive behavior or data-driven updates.

Mmuhmdabdollahi@gmail.com

86% match

Loading thumbnail…

Fork of Sol Lewitt Reproduction

This example reproduces a Sol Lewitt-inspired drawing using a full-window SVG canvas. It generates 100 vertical rectangles, each 10 pixels wide, spaced 20 pixels apart and extending the full height of the viewport, creating a striped pattern. The code creates the SVG element with `createElementNS` and appends it to the document body, then iterates with a JavaScript loop to add each `<rect>` node directly. The visualization demonstrates basic SVG shape construction and DOM manipulation without external libraries or data sources.

Ssirenajbpearl@gmail.com

86% match

Loading thumbnail…

Fork of Sol LeWitt in vanilla js

This example generates an abstract, generative artwork inspired by Sol LeWitt using vanilla JavaScript and SVG. It creates 100 vertical rectangles, each positioned at increasing x-coordinates across the full browser window. The code uses the Document Object Model (DOM) API `document.createElementNS` with the SVG namespace to construct the elements, setting attributes like width, height, and position via `setAttribute`. The rendering approach relies entirely on procedural generation, with no external data source, producing a minimalist grid-like pattern of thin bars against a blank background.

Rrwata97

86% match