Skip to main content
SimilarExport ZIP
100%

Fork of Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
Bbeyzadoganay
Last edited Aug 31, 2023
Created on Aug 31, 2023

This example generates an abstract visual composition inspired by Sol LeWitt, using D3 to create a grid of alternating horizontal and vertical bands. Two SVG masks, built with `d3.symbol` and `scaleBand`, modulate the bands with geometric symbol shapes. The code applies `select`, `range`, and `symbol` from D3 v6 to render the patterns, with the rendering handled entirely in SVG. The design reproduces the algorithmic, rule-based aesthetics of LeWitt’s wall drawings through code-driven geometry.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 to generate geometric patterns of horizontal and vertical bands. It employs `d3.select`, `d3.range`, `d3.scaleBand`, and `d3.symbol` to create SVG rectangles and symbols within two masks, alternating their fills to produce an interlocking striped composition. The code uses an SVG renderer with `window.innerWidth` and `window.innerHeight` for full-screen display. While mask creation functions are defined for both layers, only the initial band structures are rendered in the current setup.

Aaalyousfi
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js. It displays a grid of horizontal and vertical rectangles that are partially visible through a circular mask, creating an intersecting line pattern. The visualization uses D3’s `select`, `append`, and `join` methods to dynamically generate SVG `rect` elements and mask definitions. The code defines two SVG masks—one circular and one inverted—to selectively reveal the shapes, with the page sized to the full browser window. The rendering is entirely SVG-based, with no external data source.

Bbeyzadoganay
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece as an interactive SVG graphic. It generates a grid of 120 horizontal and vertical bands, each with a repeating pattern that shifts based on a mask. The code builds two alternating bands of white and black, then uses two masks, each applying a different pattern rotation. Using the D3 library, it leverages `select`, `range`, `symbol`, `symbols`, and `scaleBand` to construct the visual, with `symbol(d, size)()` generating the shape paths. The rendering is fully in SVG, defined entirely in `index.js` with `window.innerWidth` and `window.innerHeight` for dimensions and a `padding` constant.

JJaga-droid
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 to create a grid of horizontal and vertical stripes that alternate based on masks containing overlapping symbol shapes. Two sets of rectangular bands are drawn, each masked by a pattern of symbols (using `d3.symbol` and `d3.symbols`) arranged across the width via `d3.scaleBand`, with inverted black-and-white fills. The SVG rendering uses `select`, `range`, and `join` to generate 120 stripes per dimension, with masks (`<mask>`) controlling which areas of the two layers remain visible. The result is a geometric interplay of lines and icons derived from LeWitt’s conceptual style.

Jjsoudeer
92% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js, generating an intricate grid of overlapping horizontal and vertical bars. The visualization uses two mask layers to create alternating colored regions, with the second mask inverted to produce a dynamic contrast pattern. Rendered as SVG, the code employs D3's `scaleBand`, `range`, `symbol`, and `symbols` APIs to position and shape the elements, while `join` manages the data-driven rect and path creation. Layout adapts to the browser window size, with 120 bands across the full viewport.

Mmaximus2581
92% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization renders a generative art piece inspired by Sol LeWitt, using vertical and horizontal bands that create a grid-like pattern on an SVG canvas. The code employs d3’s `scaleBand`, `range`, and `symbol` to draw repeating line segments within two overlapping masks, filling the full window size. The masks alternate white and black fills based on position, producing a structured, geometric composition that echoes LeWitt’s minimalist style.

Cclara7227
92% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

A fork of a Sol LeWitt reproduction uses D3 to render intersecting horizontal and vertical line bands, each filtered by a mask that reveals a row of geometric symbols. The code generates 100 rectangles per axis, spaced at 20-pixel intervals, and applies separate masks created with D3’s `symbol` and `symbols` API. The SVG output relies on D3 selections, `range`, and mask definitions to alternate inverted fills, producing an abstract, generative pattern across the full viewport.

Ddalia.miliauskaite@me.com
92% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example visually recreates a Sol LeWitt wall drawing using only horizontal and vertical black lines, shaped by custom masks to form large geometric symbols. The piece uses D3.js (v6) with SVG rendering, generating 100 line groups across the canvas width and height. Two masks, one inverted, apply distinct patterns of D3’s built-in `symbols` (like circles and squares) to cut the lines, revealing positive and negative spaces. The code relies on `select`, `range`, `symbol`, and `join` from D3 to construct the composition dynamically.

Yyankesswang
92% match