Fork of SVG Fundamentals - Sol LeWitt repro follow-along

100%

Fork of SVG Fundamentals - Sol LeWitt repro follow-along

✓ Published1🌍 Public

Last edited Jun 9, 2023

Created on Jun 9, 2023

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.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

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

89% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using raw SVG and JavaScript, without any external libraries. It generates 100 horizontal and 100 vertical rectangles that intersect to form a grid across the entire viewport. Two SVG masks—a circular mask and an inverted circular mask—are applied to the rectangles, creating a sharp circular boundary with a single horizontal bar cutting through its center, while the surrounding area shows the full grid of vertical bars. The code uses `document.createElementNS` to build the SVG elements dynamically.

PPercivalnot

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

88% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-inspired geometric composition using raw SVG. It shows a series of 100 horizontal bars, each 10 pixels tall and spaced 20 pixels apart, filling the entire window. A circular mask clips the bars so that only the area inside a centered circle of radius 200 pixels is visible, creating the artwork’s distinctive striped disc. The code creates SVG elements programmatically via the DOM API, using `createElementNS` and `setAttribute` to build the mask and rectangles without any external libraries.

SShahin Alam

88% match

Loading thumbnail…

Vertical Fork of Fork of SVG Fundamentals - Sol LeWitt repro follow-along

This example reproduces a Sol LeWitt art piece using dynamically generated SVG. The visualization displays a grid of horizontal and vertical lines, with a central circular region where the lines are masked and inverted. The code creates an SVG canvas and uses two masks—a circle mask and an inverse mask—to selectively reveal the line patterns. Horizontal rectangles are drawn with a circle mask applied, while vertical rectangles use the inverse mask, creating an alternating visual effect. The rendering is purely code-driven, with no external data source, and relies on the Document Object Model (DOM) API for SVG element creation.

MMichael Gomersall

88% match

Loading thumbnail…

Fork of Sol LeWitt reproduction

This example reproduces the wall drawing style of Sol LeWitt using only SVG shapes and the native DOM API. It renders one hundred horizontal rectangles, each 10 pixels tall, evenly spaced down the screen, all clipped by a circular mask centered in the viewport. The page creates an SVG element dynamically, appends a mask with a white background and a black circle, then generates the rectangles in a loop without any external libraries. The result is a minimalist geometric pattern that highlights how simple SVG primitives can achieve a refined, artistic composition.

Aaidarshafeev1@gmail.com

88% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using raw SVG elements. It generates 100 vertical rectangles, each 10 pixels wide, that span the full height of the viewport. A circular mask, centered on the screen with a 200-pixel radius, limits the visible portion of these bars, creating a clean, geometric composition. The code uses the SVG `mask` element and dynamically creates rectangles and the circle via standard DOM APIs, with no external libraries or data sources.

Ssariyya-abdullayeva

87% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using raw SVG and JavaScript. It shows a grid of overlapping horizontal and vertical bands, where a circular area in the center is masked to reveal only the vertical lines, while the outer region displays only the horizontal ones. The code builds the SVG via `document.createElementNS`, creates two SVG `<mask>` elements with circle and rect primitives to control visibility, and renders 100 rectangles per axis. No external libraries are used; the rendering entirely relies on native browser SVG APIs.

PPurshotam Bohra

87% match