Skip to main content
SimilarExport ZIP
100%

Fork of Fork of FULL sol l. reprod. w/ d3

✓ Published2🌍 Public
Kkhaledakanan@gmail.com
Last edited Jun 8, 2024
Created on Jun 8, 2024

This example recreates Sol LeWitt's generative art using an SVG canvas with D3.js. It shows a grid of horizontal and vertical lines whose appearance is modified by two masks, creating a dynamic interplay of shapes and negative space. The code uses D3's `select`, `range`, and `symbols` APIs to generate the geometry, and it defines custom mask elements with `mask.append()` to selectively reveal or hide parts of the line pattern. The rendering is purely vector-based, with dimensions derived from the browser window's `innerWidth` and `innerHeight`.

AI-generated description

A recreation of Sol LeWitt's Art

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of FULL sol l. reprod. w/ d3

This example recreates a Sol LeWitt-inspired geometric wall drawing using the D3.js library. It shows a grid of thin, white horizontal and vertical strokes that are selectively revealed through circular mask shapes on a black background, creating layered optical patterns. The code uses `d3.select`, `d3.range`, and `d3.symbols` to generate the lines and masks, which are rendered as SVG elements. The visualization is driven by D3’s data-join methods to append and position the rectangles and paths.

Kkhaledakanan@gmail.com
94% match
Loading thumbnail…

Fork of Fork of Fork of FULL sol l. reprod. w/ d3

This example recreates Sol LeWitt’s wall drawing using D3’s `range`, `select`, `symbols`, and `symbol` APIs. It renders horizontal and vertical stripes as SVG rectangles, masked by two overlapping masks that cut out a series of D3 symbol shapes across the canvas. The masks are generated programmatically, with the shape size proportional to the viewport’s dimensions. The code adjusts the symbol area based on window height, showing how parametric art can respond to display constraints while preserving the original geometric composition.

Kkhaledakanan@gmail.com
93% match
Loading thumbnail…

Unrelated Fork of Fork of Fork of FULL sol l. reprod. w/ d3

This piece recreates Sol LeWitt's wall drawing through layered SVG rectangles that intersect via mask patterns. The code uses d3's selection, range, and symbol APIs to generate alternating horizontal and vertical bands, with shape-based masks applied using circular symbol paths. The visualization continuously re-renders in a loop, resizing the mask area between iterations. It demonstrates generative art principles through geometric composition, where overlapping masked rectangles create the characteristic grid-and-circle interplay of the original work.

Kkhaledakanan@gmail.com
92% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece by rendering a grid of horizontal and vertical lines on an SVG canvas. The lines are masked to reveal a circular pattern, with the mask itself containing a defined symbol, creating an interplay between the geometric lines and the circular cutout. The visualization uses the D3 library, including its `select`, `range`, and `symbol` APIs, to generate the SVG elements and masks. It fills the entire browser window, with both horizontal and vertical lines each having a thickness of 10 pixels, spaced 20 pixels apart.

CCurran Kelleher
92% match
Loading thumbnail…

Fork of Fork of Full Sol LeWitt Reproduction Final with D3

This example draws a generative grid inspired by Sol LeWitt using SVG and D3. It fills the viewport with 100 horizontal and 100 vertical stripes, each masked so that only parts of the grid remain visible. Two separate masks, created with d3.mask, contain large D3 symbols (from d3.symbol) that act as cutouts or reveals, inverting their effect between the axes. The code uses d3.select, d3.range, and d3.symbol to build the composition programmatically, producing a layered geometric pattern that plays with visibility and form.

Kkwambokar
92% match
Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using a grid of thin horizontal and vertical lines, clipped by two circular masks to create a layered, geometric composition. The SVG rendering is built with D3’s `select`, `append`, and `range` APIs, which generate the rect elements and apply the mask attributes. Two distinct masks, one with a black background and a white circle, the other inverted, control which parts of the line grid remain visible, yielding the final intersecting pattern.

Eelisabet@pitch.io
91% match
Loading thumbnail…

Fork of Fork of Full Sol LeWitt Reproduction with D3

This visualization recreates a Sol LeWitt–style grid of horizontal and vertical lines, overlaid with two masks that reveal symbolic shapes in contrasting areas. The example uses D3 v6 to generate 100 rectangular strips in each direction, then applies SVG masks via `d3.select` and `append('mask')`. Each mask uses D3 symbol generators (`d3.symbol` and `d3.symbols`) to draw numbered geometric icons—circles, crosses, diamonds, and squares—in black or white, creating a layered optical effect. The code directly manipulates SVG elements and relies on the `range`, `join`, and `attr` APIs to build the repeating structure.

AAlpineStranger
91% match
Loading thumbnail…

Fork of Full Sol Levitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing as a generative SVG composition. It renders a grid of thin horizontal and vertical lines across the full browser window, using a mask to create overlapping geometric patterns. The code builds two masked layers with `d3.select`, `d3.range`, and a custom `renderMask` function, applying contrasting black-and-white fills to shape the visible linework. Built with D3 v6, the visualization demonstrates SVG shape construction and masking techniques.

SSimon Krukowski
91% match