Skip to main content
SimilarExport ZIP
100%

Fork of Full Fork of Sol LeWitt with SHAPES Reproduction with D3

✓ Published0🌍 Public
PPedram
Last edited Oct 6, 2022
Created on Oct 6, 2022

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js with SVG rendering. It displays a grid of horizontal and vertical lines that are partially masked by two overlapping shapes, creating a layered visual effect. The code uses `select`, `range`, and `join` to generate the line elements, while `symbol` and `symbols[1]` define a star-shaped mask. A second circular mask further modifies the visibility of the lines, producing an intricate interplay between the drawn paths and the masked regions.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 version 7. It displays a grid of horizontal and vertical lines overlaid with two masks, each containing a row of distinct geometric symbols. The horizontal lines are masked by one set of symbols, while the vertical lines are masked by an inverted set, creating a layered, intertwined visual effect. The code uses `d3.select`, `d3.range`, and `d3.symbol` to generate SVG shapes and `append('mask')` to apply the masking logic dynamically.

Aajoua
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 SVG output. It draws a grid of horizontal and vertical rectangular strips across the full canvas, with each strip positioned iteratively. The visualization currently defines two mask elements for potential circular cutouts, though the mask-creation code is commented out. The artwork uses D3’s `select`, `range`, and `symbol` APIs to generate the ordered pattern, with the structure derived from a deterministic repetition of lines.

SShahin Alam
92% match
Loading thumbnail…

Fork of full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 to generate a grid of alternating horizontal and vertical rectangles. The rectangles are masked by two overlapping circular symbols, one inverted, to create the final visual composition. The code leverages `select`, `range`, `symbol`, and `symbols` from D3, rendering SVG shapes across the full window dimensions. The masks are built with appended `mask` elements and paths, using D3’s `join` for efficient data binding.

Rroyable88
91% match
Loading thumbnail…

Fork of Full Fork of Fork of Sol lewitt reproduction in d3 after consolidation

This example reproduces a Sol LeWitt-style drawing using D3 v7 and SVG. It creates a grid of alternating horizontal and vertical black bars, each layer masked by geometric symbols (circles, squares, and other shapes) generated with the d3.symbol API. Two separate masks with inverted fill logic reveal different bar orientations. The code uses d3.select, d3.range, and mask elements to compose the final visual pattern.

Ssheldonv2.0@gmail.com
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 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 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 Full of Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece renders a grid of thin horizontal and vertical rectangles across the full browser window. The code uses `d3.range()` and `d3.select` to generate 100 rows and columns, then applies two SVG masks to shape the overlapping lines. Each mask contains a large `d3.symbol` with a star shape, defined via `symbol(symbols[1], 100000)`, which cuts a circular diamond pattern out of the otherwise regular grid. The masked rectangles create a layered visual where lines appear through the star-shaped holes, demonstrating SVG mask composition with D3 selections.

IIgorGorin00
91% match