Skip to main content
SimilarExport ZIP
100%

Fork of Full Sol Levitt Reproduction with D3

✓ Published0🌍 Public
SSimon Krukowski
Last edited May 29, 2024
Created on May 14, 2024

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.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

A Sol LeWitt-inspired generative drawing fills the browser window with a grid of horizontal and vertical black lines. The piece uses D3 to render two sets of rectangles, each masked by a custom SVG mask. One mask reveals a pattern of geometric symbols—circles, squares, and triangles—while the other inverts the effect, creating a layered, intersecting composition. The masks are built with D3's `symbol` API, and the SVG elements are positioned using `range` and `selectAll` with `join`. The rendering is entirely SVG-based, with the artwork sized to the viewport.

Wwspwll@gmail.com
92% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js, rendering a grid of horizontal and vertical rectangles that intersect through SVG masks. The code creates 100 evenly spaced lines in each direction, then applies two complementary masks—one normal and one inverted—to reveal or hide the grid patterns. Using D3 selections, `range`, and symbol generators, the masks incorporate circular, triangular, and other symbolic shapes. The artwork is dynamically sized to the viewport and rendered as an SVG, demonstrating how D3’s data-join and mask primitives can build layered generative art.

XXuân Vinh
91% 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
91% 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
91% match
Loading thumbnail…

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

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`.

Kkhaledakanan@gmail.com
91% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing as an interactive SVG visualization. Two sets of thin horizontal and vertical rectangles are drawn on a full-window canvas, with circular masks (drawn via D3 masks) applied to reveal a central circular region where the lines intersect. It uses D3 v3's `select`, `append`, and data joins with `range` to generate 100 strips in each direction. The rendering is pure SVG, with masks defining the visible geometry.

AAprilF
91% 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 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
91% match