Fork of Sol Lewitt Reproduction

100%

Fork of Sol Lewitt Reproduction

✓ Published1🌍 Public

Last edited Aug 2, 2024

Created on Aug 2, 2024

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.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt 2

This example reproduces a Sol LeWitt wall drawing as an abstract, geometric visualization. It shows a series of 100 thin, horizontal rectangles stacked vertically across the full height of the browser window, forming a simple striped pattern. The piece is rendered using the SVG API, creating each `rect` element dynamically via `document.createElementNS`. The code sets the width of each rectangle to match the viewport width, while the vertical position and height are determined by a loop increment, producing a clean, repetitive composition in the style of the original artwork.

Jjisu9393@naver.com

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction T

This example reproduces a Sol LeWitt geometric artwork using raw SVG elements in a full-window canvas. It shows a grid of thin vertical and horizontal lines intersecting to form a striped pattern, with a central circular region and a small square cutout highlighted by masks. The code creates two SVG masks—one with a black background and white circle/square, another with white background and black circle—to selectively show line orientations: horizontal stripes appear inside the circle, while vertical stripes appear outside it. Using plain JavaScript DOM methods like `createElementNS` and `setAttribute`, it generates 100 rectangles in each direction without any external libraries.

IisTeamoor

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt–style geometric drawing using raw SVG and JavaScript. It displays a grid of alternating horizontal and vertical stripes that are revealed through two circular mask regions at the center of the canvas. The code creates an SVG element, defines two mask layers—one with a white circle on black and another with a black circle on white—and appends 100 horizontal and 100 vertical rectangles. Each rectangle is clipped by one of the masks, producing the contrasting stripe pattern without any external libraries.

Nnim@brejnholt.dk

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example renders a 960-by-960 SVG canvas and draws a single 100-by-100 rectangle in the top-left corner. It reproduces a Sol LeWitt art piece using the SVG API directly, creating elements with `document.createElementNS` and appending them to the page. The code is minimal, showing the initial stage of the geometric artwork without additional styling or interaction.

Pparaliterary@yahoo.com

89% match

Loading thumbnail…

Fork of Sol Lewitt Reproduction vertical

This example reproduces a Sol LeWitt-inspired drawing using raw SVG and JavaScript without any external libraries. It renders two sets of overlapping rectangles: 100 horizontal stripes and 100 vertical stripes, both evenly spaced across the full window size. A circular mask, defined via the SVG `mask` element, restricts visibility of the horizontal stripes to a centered circle, creating a layered geometric effect. The code dynamically creates SVG elements using `document.createElementNS` and appends them to the page, with all dimensions derived from `window.innerWidth` and `window.innerHeight`.

HHéloïse Feldmann

89% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using raw JavaScript and the SVG API. It generates a grid of horizontal and vertical stripes, masked by two inverse circular masks to create a composition of intersecting lines. The code directly creates SVG elements via `document.createElementNS`, setting attributes for rectangles and masks to control the visible pattern. The rendering is dynamic, adapting to the browser window's full width and height.

DDilara Bozkurt

89% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece by rendering a single vertical black rectangle against a blank canvas, echoing the minimalist geometric style of the original work. The code creates an SVG element sized to the full browser window and appends a rectangle positioned 100 pixels from the left, with a width of 10 pixels and a height matching the viewport. It uses the raw DOM APIs `createElementNS` and `appendChild` to build the SVG structure without any external libraries. The piece highlights the simplicity of SVG-based drawing, focusing on the interaction between the fixed shape and the responsive window dimensions.

JJulio Costa

89% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using an SVG rendering approach. The visualization displays a grid of horizontal and vertical lines that are masked to create concentric circular patterns at the center of the viewport. The code dynamically generates 100 rectangular strips for each orientation, using inline SVG mask elements to clip the lines into the circular shapes. The piece runs entirely with native JavaScript DOM manipulation, creating the `svg`, `rect`, `mask`, and `circle` elements without external libraries.

AAdekola Aliu

89% match