Skip to main content
SimilarExport ZIP
100%

Refactored Rendering Masks - D3 Version Sol LeWitt Reproduction

✓ Published1🌍 Public
EEdgar Cortez
Last edited Feb 9, 2023
Created on Feb 9, 2023

This visualization reproduces a Sol LeWitt art piece by layering two sets of SVG rectangles—horizontal and vertical stripes—each restricted by a distinct mask. The masks use D3 symbols (from the `symbols` and `symbol` APIs) to carve geometric shapes into the stripes, creating intersecting patterns. The code generates 100 stripes in each direction, with the masks defined via `svg.append('mask')` and applied using the `mask` attribute. Rendering is done entirely through D3 v6 selections and joins, with the canvas size set to the full window dimensions.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Refactored Symbol Mask - D3 Version Sol LeWitt Reproduction

This piece reproduces a Sol LeWitt drawing using D3.js. It renders two masks—one inverted—that apply overlapping patterns of thick vertical and horizontal lines across the full canvas. The lines are generated as SVG rectangles, with each set filtered through a different mask to create the geometric interplay. Built with D3 v6, it uses `d3.symbol`, `d3.range`, and `d3.select` to construct the SVG output dynamically.

EEdgar Cortez
92% match
Loading thumbnail…

Refactored D3 Sol LeWitt

This example reproduces a Sol LeWitt wall drawing using D3 to generate a grid of horizontal and vertical stripes. It demonstrates how the `symbols` API creates a circular mask over two layered sets of rectangles, producing an interplay of striped patterns. The SVG is rendered full-window, and the code uses D3's `select`, `range`, `join`, and `attr` methods to construct the visualization. Two mask definitions alternate their inverted states to show how the same symbol can create positive and negative space.

CCameron Wehr
88% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3 and path masks refactored

This visualization reproduces a Sol LeWitt art piece using D3.js, displaying a grid of horizontal and vertical bars that are selectively revealed through two SVG path masks. The masks, created with the `symbol` function to generate complex paths, alternately invert their fill to hide or show different sections of the overlapping rectangles. The code uses D3’s `select`, `range`, and `join` APIs to efficiently build the SVG structure, with masks applied via the `mask` attribute. The artwork is rendered dynamically based on the browser window’s dimensions.

Gguts
88% match
Loading thumbnail…

hopefully close to original Full Sol LeWitt reproduction with D3

The visualization reproduces a Sol LeWitt art piece using D3.js, rendering a grid of horizontal and vertical bands that alternate in visibility. Two SVG `<mask>` elements, created via a reusable `renderMask` function, selectively hide or reveal these stripes using symbol shapes—drawn with `d3.symbol` and `d3.symbols`—as the mask pattern. One mask uses inverted fills relative to the other, producing a contrasting interplay of lines and geometric shapes across the viewport. The artwork is generated entirely from code, with no external data source.

ZzolboBatsaikhan
88% match
Loading thumbnail…

D3 Sol LeWitt reproduction

This example reproduces a Sol LeWitt-style geometric composition using D3 v7 and SVG. It layers two masks over intersecting grids: one mask reveals vertical stripes through alternating D3 symbols, while the other horizontally bands the canvas with a second symbol set. The code uses `d3.range`, `d3.symbols`, and `d3.symbol` to generate the mask shapes, then applies the masks via SVG `mask` attributes. The result combines generative patterns with minimalist grid structures, demonstrating mask-based compositing in a browser window.

HHtet Yan Oo
88% match
Loading thumbnail…

D3 Version Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece using D3 v6 to generate dense horizontal and vertical striped patterns across the full viewport. Through two circular SVG masks, the code selectively reveals horizontal lines in one circular region and vertical lines in an overlapping area, creating a striking crosshatch effect. The rendering employs D3 selections with `range(n)` to generate 100 rectangular bars per axis, applying masks via `attr('mask', 'url(#circle-mask)')`. The piece demonstrates minimalist geometric abstraction through programmatic SVG construction.

EEdgar Cortez
87% 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
87% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece renders a grid of horizontal and vertical striped rectangles across the full viewport. Two SVG masks, each combining a full-screen rectangle with a centered circle, restrict which stripes are visible. The first mask (circle-mask) reveals horizontal lines through a white circular opening on a black background, while the second (circle-mask-2) inverts the pattern for vertical lines. Using d3.select, range, and data joins, the code generates 100 rect elements per orientation, with masks applied via the mask attribute.

PPareel Amre
87% match