Skip to main content
SimilarExport ZIP
100%

Full Sol Lewitt D3

✓ Published1🌍 Public
Ppirani.sabah@gmail.com
Last edited Nov 18, 2024
Created on Nov 13, 2024
Forked from Sol Lewitt D3 v2

This example uses D3’s selection and join API to create a grid of black rectangles overlaid with geometric shapes. Solid black bars are drawn repeatedly, masked by a set of white star-like symbols, while a second mask inverts the shapes to create a cutout effect. The code relies on `d3.select`, `d3.range`, `d3.symbol`, and SVG `mask` elements, with rectangle positions computed from screen width and thickness. The rendering is entirely SVG, driven by JavaScript that calculates layout from `window.innerWidth` and `window.innerHeight`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Sol lewitt in d3 after consolidation

This example reproduces Sol LeWitt’s geometric wall drawings using D3.js with an SVG rendering. It draws a grid of black horizontal and vertical rectangles, then applies two masks—one normal and one inverted—to selectively reveal or hide parts of the lines. The masks use d3.symbol and d3.symbols to create white or black shape cutouts positioned across the canvas. The code relies on d3.select, d3.range, and d3.join to bind data and construct the SVG elements dynamically.

Mmarc.chatton@outlook.com
90% match
Loading thumbnail…

Full Sol Lewitt D3 changing rect dir

This example, built with D3.js (version 6.6.1), dynamically generates a Sol LeWitt-inspired drawing of alternating vertical and horizontal black rectangles. The code uses D3's `select`, `range`, `symbols`, and `symbol` APIs to construct SVG elements and masks. It creates two layers of rectangles, each masked by a group of three geometric symbols (like circles or squares), producing a complex, intersecting pattern. The rectangles are generated programmatically based on screen dimensions, with mask shapes positioned horizontally across the canvas.

Ppirani.sabah@gmail.com
89% match
Loading thumbnail…

Full of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js, rendering a full-screen SVG grid of overlapping horizontal and vertical bars. Two distinct masks, created with inverted black-and-white shapes from D3’s `symbol` API, selectively reveal or hide portions of the grid, producing layered, intersecting patterns. The code uses D3’s `select`, `range`, and `join` methods to efficiently generate and update the 100 rectangles per orientation, while the `mask` elements dynamically apply the symbolic clipping paths. The final visualization is a clean, generative art piece driven entirely by SVG and D3’s declarative API.

Jjmetzg11alpine
89% match
Loading thumbnail…

Sol Lewitt D3

This example reproduces a Sol LeWitt-inspired drawing using D3.js to render SVG rectangles in a browser. It shows a grid of alternating vertical and horizontal bars that are masked to create a circular focal point, with bars inside the circle appearing inverted relative to those outside. The code uses D3’s `select` and `range` APIs to generate and join the rectangles, while custom SVG masks (`circle-mask` and `circle-cutout-mask`) control visibility. The visualization resizes to the full window and uses only the built-in D3 library (v6.6.1).

Ppirani.sabah@gmail.com
89% 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
89% match
Loading thumbnail…

Full Sol LeWitt with D3

This example reproduces Sol LeWitt’s geometric wall drawing using D3 and SVG. It builds a grid by rendering horizontal and vertical rectangles, each filtered through a mask that reveals alternating symbol shapes. The code uses `d3.select`, `range`, `symbols`, and `symbol` to draw the mask patterns, with `join` for data-driven elements and `mask` attributes for clipping. The visualization fills the entire browser window, with parameters like `n = 100` controlling the grid density and symbol spacing.

Ddalia.miliauskaite@me.com
89% 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
88% match
Loading thumbnail…

Sol Lewitt D3 v2

A grid of vertical and horizontal striped rectangles, generated with D3 v6, covers the screen. The full-width and full-height strips use `select` and `range` to map data to `rect` elements. Two SVG masks reveal overlapping circular regions: a white-filled circle on a black background shows the horizontal lines, while an inverted cutout mask displays the vertical lines, creating a cross-shaped intersection at the center. Rendering is via SVG with D3's `join` method.

Ppirani.sabah@gmail.com
88% match