Skip to main content
SimilarExport ZIP
100%

GiRiB&W_Ep4-Sol_LeWitt-FullRepo Ex

✓ Published1🌍 Public
JJimMaltby
Last edited Oct 11, 2021
Created on Oct 10, 2021

This example recreates a Sol LeWitt-inspired grid of horizontal and vertical lines that are partially revealed by two SVG masks containing geometric shapes and D3 symbols. The code uses D3 selections and data joins to draw one hundred alternating stripes across the screen, while the `renderMask` function builds each mask with rectangles and paths generated from `d3.symbol` glyphs. Rendered as an SVG, the piece uses black and white fills to create a dynamic interplay between the line grid and the symbolic cutouts.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

GiRiB&W_Ep3-Sol_LeWitt-FullRepo-pt5

This visualization reproduces a Sol LeWitt art piece using overlapping horizontal and vertical stripes. A grid of thin black rectangles is layered in both orientations, each masked by one of two complementary masks that reveal different symbol shapes. The code uses D3 selections, `range`, and `symbol` to generate the masks, with `svg.append('mask')` defining white or black fill areas. Rendered as SVG in the browser, it dynamically fills the viewport and cycles through D3’s symbol types at varying positions.

JJimMaltby
94% match
Loading thumbnail…

GiRiB&W_Ep4-Sol_LeWitt-FullRepo Ex V2

A generative black-and-white composition reproduces a Sol LeWitt-style grid, layering horizontal and vertical bars across the full viewport. The piece alternates masked regions filled with geometric symbols from the D3 symbol set, splitting the canvas into six equal sections with alternating inverted palettes. Using D3 v6 selection and data-join methods, the code constructs four SVG mask groups, each combining rectangles and paths to create overlapping positive and negative spaces. The visualization relies entirely on SVG rendering and D3’s `symbol` and `symbols` APIs to draw the abstract forms.

JJimMaltby
94% match
Loading thumbnail…

GiRiB&W_Ep3-Sol_LeWitt-FullRepo-pt3

This visualization reproduces a Sol LeWitt-style geometric composition using a grid of horizontal and vertical rectangles. The code generates 100 stripes in each direction, applying two distinct masks that reveal a white diamond shape within a black background and its inverse, creating overlapping layered effects. Built with D3.js (v6.6.1), it leverages `select`, `range`, `join`, and `symbol` APIs to construct SVG elements and masks. The rendering is entirely SVG-based, with dimensions matching the full browser window, and the masks are defined programmatically through D3’s `call` method.

JJimMaltby
94% match
Loading thumbnail…

GiRiB&W_Ep3-Sol_LeWitt-FullRepo-pt4

White and black horizontal and vertical stripes fill the entire browser window, but patterned mask regions interrupt them. Two separate groups of stripes intersect, producing a grid-like texture. The artwork uses D3 selections and joins to generate 100 rectangles in each orientation. A custom `renderMask` function builds two SVG masks, each containing a single D3-symbol shape, to reveal or hide portions of the stripes. The rendering is entirely SVG-based, with D3 v6.6.1 handling data binding and symbol generation.

JJimMaltby
92% match
Loading thumbnail…

GiRiB&W_Ep3-Sol_LeWitt-FullRepo-pt2

This visualization reproduces a Sol LeWitt-inspired geometric composition using alternating horizontal and vertical striped rectangles, masked by two overlapping circle shapes to create a dynamic intersecting pattern. The piece uses D3.js (v6.6.1) with specific imports including `select`, `range`, `symbols`, and `symbol` to generate the SVG output. It creates a 100-stripe grid where horizontal and vertical bands are each constrained by a separate SVG mask—one with a black background and white circle, the other inverted—resulting in a crossfading intersection of line directions. The code dynamically sizes elements to the window dimensions.

JJimMaltby
92% match
Loading thumbnail…

GiRiB&W_Ep3-Sol_LeWitt-FullRepo-pt1

A generative black-and-white composition reproduces a Sol LeWitt-inspired wall drawing using intersecting grids of horizontal and vertical bands. Two D3 masks define contrasting circular cutouts at the center, where one mask inverts the visible area and the other reveals it. Built with d3-selection, `range`, and `symbol` from D3 v6, the rendering uses SVG paths and rectangles to layer the striped fields. The artwork runs full-window in an HTML page with JavaScript.

JJimMaltby
91% match
Loading thumbnail…

GiRiB&W_Ep3-Sol_LeWitt

This example reproduces a Sol LeWitt-style geometric composition using only D3 selections and SVG masks. It shows a grid of alternating horizontal and vertical black bars, with a circular region in the center where the pattern reverses contrast. The horizontal bars use a mask that reveals them only inside the circle, while the vertical bars use an inverse mask, creating the interplay. The code leverages D3’s `select`, `range`, and `join` to generate the repeating rectangles, and SVG `mask` elements with `circle` shapes to define the visible areas.

JJimMaltby
91% match
Loading thumbnail…

GiRiB&W_Ep3-Sol_LeWitt-FullRepo-Exercise_1

This visualization reproduces a Sol LeWitt-inspired geometric composition using D3.js. It displays ten horizontal black rectangles stacked vertically across the left half of the SVG canvas, with each rectangle’s vertical position mapped through a linear scale from the data range to half the window height. The code uses `d3.range` and `d3.scaleLinear` to generate and position the shapes, applying an SVG mask that is defined but not fully rendered in the provided source. The artwork is generated programmatically in an SVG format, directly responding to the browser window dimensions.

JJimMaltby
89% match