Fork of Sol LeWitt Reproduction

100%

Fork of Sol LeWitt Reproduction

✓ Published0🌍 Public

Last edited Jul 11, 2024

Created on Jul 11, 2024

This example reproduces a Sol LeWitt artwork as an interactive SVG visualization. It shows a grid of horizontal and vertical lines masked into two overlapping circular areas, creating a geometric pattern. The code uses the SVG API to create elements programmatically, with `mask` elements defining the circular boundaries for each line set. Rectangles are generated in loops to build the pattern, and a CSS transition on `hover` shifts individual rectangles horizontally, adding a subtle interactive dimension. The rendering relies entirely on native browser SVG support rather than external libraries.

AI-generated description

A reproduction of a [Sol Lewitt art piece]

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using dynamically generated SVG elements. It displays a grid of horizontal and vertical lines whose visibility is constrained by two circular masks: one reveals the horizontal lines inside a circle, while the other reveals vertical lines outside the same circle. The code uses the SVG `mask` and `mask` attribute to layer the intersecting line patterns. All elements are created programmatically with `document.createElementNS`, and the layout responds to the window’s dimensions. The artwork relies entirely on SVG primitives, without external libraries.

IIsabella Reyna

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

93% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece using an SVG rendering approach. It displays a grid of horizontal and vertical lines that intersect within two circular masks, creating a nested geometric pattern centered on the screen. The code constructs SVG elements dynamically via the Document API, using `createElementNS` to build rectangles and circles. Two masks (`circle-mask` and `circle-mask-2`) control visibility: the first reveals horizontal stripes inside a 200-pixel-radius circle, while the second exposes vertical stripes in the surrounding area, producing a layered, minimalist composition.

NNeel Mehta

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

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt artwork using procedural SVG rendering. It displays a grid of horizontal and vertical stripes that intersect within two circular masks, creating a geometric pattern where lines are visible only inside the circles. The code generates 100 rectangles in each direction, using SVG `mask` elements with `circle` shapes to constrain the drawn areas. A full-screen SVG canvas is built dynamically with `createElementNS`, and the composition is generated entirely through JavaScript without external libraries.

Eeverybitmihaly

92% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired geometric composition entirely through SVG elements. It shows a grid of horizontal and vertical bands that intersect within a centered circular boundary, creating a patterned interplay of lines and negative space. The code constructs the visualization using raw JavaScript and the SVG DOM API, creating two masks—one with a black background and white circle, the other with the inverse—to alternately reveal horizontal stripes inside the circle and vertical stripes outside it. One hundred rectangles are generated for each orientation, each masked to produce the final layered effect.

AAWLGAWLG

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

91% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece, showing intersecting grids of horizontal and vertical lines with a circular mask that cuts through them, creating a dynamic interplay between geometric structure and negative space. The code generates SVG rectangles directly using the DOM API, and employs two SVG masks—one to reveal the lines inside the circle and another to hide them outside—producing the layered effect. The piece is built with vanilla JavaScript and SVG elements, while the imported d3 library is present in the code but not utilized in the rendering logic.

Rrose3d@gmail.com

91% match