Skip to main content
SimilarExport ZIP
100%

Full D3 Sol LeWitt Reproduction

✓ Published1🌍 Public
Mmegan-grannan
Last edited Aug 10, 2023
Created on Aug 10, 2023

This example reproduces a Sol LeWitt-style geometric drawing using D3 v7 in an SVG. It shows a grid of alternating vertical and horizontal rectangles overlaid with two circular masks, creating a crosshatched pattern with a central starburst-like cutout. The code uses D3 selections, `range`, `join`, and `symbol` with `symbols[1]` to generate shapes, while `select` appends the SVG to the body. Masks are built via a custom `renderMask` function that toggles fill colors based on an `inverted` parameter. Data is generated procedurally with `range(n)` for 100 iterations.

AI-generated description

Reproduction of Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Full Sol LeWitt Reproduction with D3.js

This example reproduces a Sol LeWitt art piece using D3.js and SVG. It generates a grid of horizontal and vertical rectangles, then applies two masks that shape the visible pattern. The masks are created with D3’s `symbol` and `symbols` APIs, placing geometric symbols in alternating black-and-white fills to selectively hide or reveal parts of the grid. The code uses `select`, `range`, and `.join()` to efficiently render the elements, with the rendering confined to the full browser viewport.

MMarcus Vinicius da Silveira Richa
92% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3 v3 with SVG rendering. It shows a grid of horizontal and vertical rectangles overlaid with two circular masks, one inverted, creating a dynamic interplay of lines and negative space. The code uses `d3.range`, `d3.select`, and `d3.symbol` with `symbols[1]` to generate the mask paths. Horizontal and vertical bars are drawn at regular intervals, then clipped by the masks to produce the final pattern against a full-window canvas.

Ttriciascully
92% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric drawing using D3 and SVG. It renders two sets of alternating horizontal and vertical rectangles that cover the full viewport, with each set clipped by a mask. The masks combine a white or black background with a large diamond-shaped symbol path, creating a starburst effect where the grid lines are selectively revealed. The code uses D3’s `select`, `range`, `symbol`, and `symbols` APIs, with SVG `<g>` groups and `mask` elements. The drawing is generated dynamically to match the browser window’s dimensions.

Ccardoza-IPH
92% match
Loading thumbnail…

Sol LeWitt Reproduction - D3

This example reproduces a Sol LeWitt-style geometric drawing using D3 version 7.8.5 in an SVG rendering. It shows a grid of 100 horizontal and vertical lines, with two circular masks creating a central overlap effect: one mask reveals lines through a black rect and white circle, while the other inverts the pattern. The code imports `select` and `range` from D3 to generate the line data, appends rectangles with calculated positions, and applies masks defined as SVG elements to produce the layered visual.

MMatheesha Yapa
91% match
Loading thumbnail…

Full Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using D3 to generate SVG shapes. Alternating vertical and horizontal striped rectangles are layered beneath two masks, creating a geometric composition where the pattern changes across the canvas. Each mask contains alternating black and white regions with D3 symbol paths—including circles, crosses, and diamonds—positioned at intervals. The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to build the visualization, with the masks inverted relative to each other for a contrasting effect.

MMatthew Bruffey
91% match
Loading thumbnail…

Full Sol LeWitt Reproduction in D3

This example recreates a Sol LeWitt-style geometric composition using overlapping horizontal and vertical grid lines rendered as SVG rectangles. The lines are selectively revealed or hidden through two complementary mask patterns, each containing a row of varied symbols that create organic interruptions in the strict grid. The visualization demonstrates D3’s data-joining capabilities and masking utilities, using `d3.select`, `d3.range`, and `d3.symbols` to generate the visual rhythm. A custom `renderMask` function builds the masks, with one mask using inverted fill logic to produce contrast across the full viewport.

Mmaciekawsq@gmail.com
91% match
Loading thumbnail…

Full Sol LeWitt reproductions with d3

This example reproduces a Sol LeWitt piece using D3.js by generating a grid of horizontal and vertical lines. Two SVG masks, defined as "inner-mask" and "outer-mask", are applied to these lines to reveal or hide portions of the grid, creating a complex geometric pattern. The masks are constructed using D3's `symbol` and `symbols` APIs to draw paths that form the mask shapes. The code uses D3's `select`, `append`, `attr`, and `join` methods to build the SVG structure and apply data-driven attributes. The rendering is done entirely in SVG, scaling to the browser window size.

AAngela Kochoska
91% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3 version 7 and SVG rendering. It draws 100 horizontal and 100 vertical rectangular strips across the full viewport, each masked by a circular pattern that alternates between black and white fills. The masks are created with d3.symbol and a square symbol, transformed to the center, and applied via the `mask` attribute. The code uses `d3.select`, `d3.range`, and `join` to generate the grid.

Aadityapalliyil0@gmail.com
91% match