Skip to main content
SimilarExport ZIP
100%

Sol Lewitt Project in D3 Attempt #1 (using data & d3-shape)

✓ Published1🌍 Public
CCasualWanderer20XX
Last edited Sep 10, 2025
Created on Sep 9, 2025

This work uses generative shapes drawn with d3-shape’s `symbol` and `symbols` to create large mask patterns. Vertical and horizontal bands of rectangles are clipped via two SVG masks arranged over a full-window canvas, each mask containing a row of distinct symbols laid along the center line. The render uses D3.js 7.9.0 for selections, joins, and attribute updates.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Sol Lewitt Project in D3 Attempt #1 (d3-shape & function block)

A generative SVG composition draws on Sol Lewitt's geometric wall drawings, using striped vertical and horizontal bands overlaid with a central symbol. The code employs D3 v3's `select`, `range`, and `join` to create rect grids, while `d3.symbol` and `symbols[6]` define a star-shaped path. Function blocks `renderMask` apply inverted and normal SVG masks, combining the shapes to produce layered, intersecting patterns across the full viewport.

CCasualWanderer20XX
90% match
Loading thumbnail…

Sol Lewitt Project in D3 Attempt #1

This D3.js example uses SVG masks to create an abstract composition inspired by Sol LeWitt’s wall drawings. Vertical and horizontal striped rectangles, generated with `d3.range` and `d3.select().join()`, are each partially revealed through circular masks defined with `mask` elements. Two distinct mask configurations alternate the visual prominence of the stripes, producing a dynamic interplay of lines and negative space across the full browser viewport. The rendering is purely algorithmic, with no external data source.

CCasualWanderer20XX
87% match
Loading thumbnail…

Sol Lewitt Project in D3 Attempt #2

This D3.js (v7.9.0) visualization recreates a Sol LeWitt-inspired wall drawing using two perpendicular sets of vertical and horizontal strips. Each set is masked by a distinct pattern, with one mask inverted relative to the other, creating an interlocking grid of geometric symbols. The SVG output is rendered directly to the browser window, using D3’s selection, symbol, and mask APIs to compose the overlapping forms. The code employs `d3.select`, `d3.range`, `d3.symbol`, and mask definitions to generate the alternating shapes at fixed intervals.

CCasualWanderer20XX
87% match
Loading thumbnail…

Sol Lewitt with D3 Project (from Scratch)

This example recreates Sol LeWitt’s geometric wall drawings using D3.js, rendering a dense grid of thin vertical and horizontal lines across the full browser window. Two opposing masks, each containing five distinct symbols from D3’s `symbol` API, selectively hide or expose portions of the line grid, creating overlapping, patterned regions. The visualization uses `d3.select`, `range`, and `join` to generate 120 rectangles in each orientation, with SVG masks applied via `mask.append` and `attr('mask', ...)`. The result is a digital homage that blends generative code with minimalist art.

CCasualWanderer20XX
86% match
Loading thumbnail…

Sol Lewitt - D3 multi shapes

This example recreates Sol Lewitt-inspired geometric art using D3.js, rendering a grid of horizontal and vertical rectangles that are selectively masked by overlapping symbols. The visualization displays five distinct shapes—including circles, crosses, and diamonds—positioned at the center of the canvas. The code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to generate SVG paths, while SVG masks with inverted black-and-white fills determine which grid lines remain visible. The final pattern emerges from alternating mask states applied to the two perpendicular line sets.

Hhquazza@gmail.com
86% match
Loading thumbnail…

Sol Lewitt Project in D3 Attempt #1 (group method)

This D3.js (v7.9.0) example constructs an SVG composition inspired by Sol LeWitt's geometric art. It draws a grid of vertical and horizontal stripes, each set masked by overlapping circles centered on the canvas. The first group of vertical rectangles is clipped by a circular mask, while the second group of horizontal rectangles is clipped by an inverse mask, revealing a cross-like pattern. The project uses D3's `select`, `append`, `range`, and the `.join()` API to build the SVG elements programmatically.

CCasualWanderer20XX
85% match
Loading thumbnail…

Full Sol Lewit reproduction using D3

This example reproduces a Sol LeWitt-style geometric drawing using D3.js, combining SVG rectangles and mask elements to create layered visual patterns. It generates 100 horizontal and vertical striped rectangles, each masked by one of two masks that reveal D3’s built-in symbol shapes—including circles, crosses, diamonds, squares, stars, triangles, and wye—positioned across the canvas. The code uses `d3.range` and `d3.symbol` with `d3.symbols` to render the symbol paths, while `d3.select` handles SVG manipulation and the `mask` attribute applies the clipping patterns. The rendering is fully SVG-based within a full-viewport layout.

AAshwani Sajwan
85% match
Loading thumbnail…

D3 Sol Lewitt

This example generates a geometric composition reminiscent of Sol LeWitt's wall drawings, using a series of horizontal and vertical bands that are selectively revealed through SVG masks. The design employs two distinct masks, each containing a circle, triangle, and rectangle, to create overlapping positive and negative shapes against a full-screen canvas. Built with D3 v7 and rendered as SVG, the code defines shapes using `d3.symbol()` for the triangle path, while the masks apply `url(#circle-mask)` and `url(#circle-mask-2)` to alternating striped rectangles. The result is a dynamic interplay of primary colors in black and white, driven entirely by procedural generation.

Aadonisacruz0@gmail.com
85% match