Refactoring of Sol LeWitt with functions in d3

100%

Refactoring of Sol LeWitt with functions in d3

✓ Published0🌍 Public

Last edited May 27, 2024

Created on May 27, 2024

Forked from Other Sol LeWitt Reproductions

This example reproduces a Sol LeWitt art piece using D3 v6. It creates a grid of horizontal and vertical rectangles that are selectively revealed through two SVG masks. The masks use D3’s `symbol` and `symbols` APIs to generate geometric shapes, which act as windows showing either the horizontal or vertical lines. Rectangles are generated with `range`, `selectAll`, and `join`, while `renderMask` is called via `svg.call` to apply the two mask layers.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

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…

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

90% match

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

90% match

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

89% match

Loading thumbnail…

Refactoring Sol Lewitt reproduction with d3

This example reproduces a Sol LeWitt-inspired drawing using D3.js and SVG rendering within a React framework. It creates a grid of 100 horizontal and 100 vertical rectangles, each with a 10-pixel thickness, that span the full width and height of the viewport. The piece applies two distinct masks, generated with the D3 `symbol` API using a circle shape, to reveal or hide portions of the grid. The code demonstrates D3’s functional chaining with `select`, `range`, and `join` to build and style elements efficiently, while the masks are configured conditionally with inverted fills.

Cclara7227

89% match

Loading thumbnail…

Full Sol Lewitt Reproduction with D3-2

This example reproduces a Sol LeWitt art piece using D3 version 6.6.1 with SVG rendering. It displays a grid of horizontal and vertical striped rectangles, overlaid with two masks that reveal or hide the stripes using D3’s `symbol` shapes. The code uses `select`, `range`, `symbols`, and `symbol` to generate mask patterns, and applies them via `attr('mask', ...)` to create the visual effect.

Yyejichun@naver.com

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

89% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js version 6.6.1 in an SVG rendering. It displays a grid of thin horizontal and vertical rectangles, masked so they only appear within two overlapping circular regions at the center of the screen. The code uses `d3.select` to append SVG elements, `d3.range` to generate data arrays, and the `.join()` pattern to bind data to `rect` elements. Two SVG masks (`circle-mask` and `circle-mask-2`) define visibility, with the first using a black background and white circle, the second inverted.

CCurran Kelleher

89% match