Skip to main content
SimilarExport ZIP
100%

Refactored Symbol Mask - D3 Version Sol LeWitt Reproduction

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

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.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Refactored Rendering Masks - D3 Version Sol LeWitt Reproduction

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.

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
90% match
Loading thumbnail…

Using Symbols/Symbol - D3 Version Sol LeWitt Reproduction

This D3.js reproduction of a Sol LeWitt artwork generates an intricate grid of overlapping horizontal and vertical lines. The piece creates a dynamic visual interplay where lines are selectively revealed through two inverted SVG masks, each containing a large circular symbol. The code uses `d3.select`, `d3.append`, `d3.range`, and `d3.symbol` from D3 v6.6.1 to construct the SVG output. It renders 100 rectangles in each direction, with widths and heights calculated from the window dimensions, positioning the circular mask symbols at the canvas center.

EEdgar Cortez
89% 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…

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…

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

Full Sol LeWitt Reproduction with D3

This interactive SVG reproduction of a Sol LeWitt piece uses D3 to generate a grid of horizontal and vertical stripes. The code defines two masks that selectively reveal or hide the stripes based on a series of symbol-shaped paths, creating a dynamic and layered geometric composition. The program uses D3's `select`, `range`, `symbol`, and `symbols` functions to build the SVG elements and masks, with the rendering adapting to the window size. The artwork's behavior is driven entirely by the mask transformations and symbol generation.

Rrwata97
87% match