Skip to main content
SimilarExport ZIP
100%

Full Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
MMatheesha Yapa
Last edited Jun 27, 2023
Created on Jun 27, 2023

The example reproduces a Sol LeWitt–style composition using D3 and SVG, where 100 horizontal bars are layered over full-screen masks to create geometric patterns. It renders data generated from `d3.range(n)`, applying mask IDs via `selection.call(renderMask, ...)`. The masks use `d3.symbol` with symbol types from `symbols` to draw white shapes on black or inverted backgrounds, demonstrating D3 v7’s join and selection methods. The SVG output adapts to the viewport dimensions, with no external data source.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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
93% match
Loading thumbnail…

Full Sol LeWitt Reproduction in D3

This example recreates a Sol LeWitt-style geometric composition using overlapping horizontal and vertical grid lines rendered as SVG rectangles. The lines are selectively revealed or hidden through two complementary mask patterns, each containing a row of varied symbols that create organic interruptions in the strict grid. The visualization demonstrates D3’s data-joining capabilities and masking utilities, using `d3.select`, `d3.range`, and `d3.symbols` to generate the visual rhythm. A custom `renderMask` function builds the masks, with one mask using inverted fill logic to produce contrast across the full viewport.

Mmaciekawsq@gmail.com
91% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3 v3 with SVG rendering. It shows a grid of horizontal and vertical rectangles overlaid with two circular masks, one inverted, creating a dynamic interplay of lines and negative space. The code uses `d3.range`, `d3.select`, and `d3.symbol` with `symbols[1]` to generate the mask paths. Horizontal and vertical bars are drawn at regular intervals, then clipped by the masks to produce the final pattern against a full-window canvas.

Ttriciascully
91% 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
91% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3. It displays a grid of horizontal and vertical bars overlaid with two circular masks, creating a crosshatched pattern that alternates visibility within and outside the circles. The code uses D3 selections, `range()`, and SVG masks (`mask` elements) to generate the repeating rectangles. It employs `d3.select`, `append`, and `attr` with data-driven joins, rendering entirely as SVG in the browser. The art piece is recreated computationally, with the layout determined by the window dimensions.

XXuân Vinh
90% match
Loading thumbnail…

full Sol LeWitt Reproduction with D3

This example shows a full-screen abstract geometric composition inspired by Sol LeWitt, built with D3 v7 and rendered as SVG. Two sets of overlapping horizontal and vertical striped rects create a grid, while a diamond-shaped mask and a circular mask reveal different sections of the pattern. The code uses `d3.select`, `d3.range`, `d3.symbol` with a square symbol, and `.join()` to generate the shapes. The masks are constructed with `svg.append('mask')`, combining black and white rects and paths to control visibility.

Rroyable88
90% match
Loading thumbnail…

Full Sol LeWitt Reproduction with d3

This piece reproduces a Sol LeWitt art work as a full-screen SVG using D3.js version 6.6.1. It shows a grid of overlapping black vertical and horizontal bars, which are created by appending `rect` elements to two groups, each masked to partially hide the lines. The `renderMask` function uses D3’s `symbol` and `symbols` API to draw a large circular path within each mask, with inverted fill colors to selectively reveal or conceal the grid, producing a dynamic, layered composition without user interaction.

Bbjfmbeck
90% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

The visualization reproduces a Sol LeWitt art piece by layering horizontal and vertical bar patterns over two sets of symbol-shaped masks. It uses D3 v7 to create an SVG canvas sized to the browser window, with `d3.range` generating 100 bars in each direction, offset by 20-pixel intervals. Two masks, built with `d3.symbol` and SVG `mask` elements, alternate black-and-white fills to reveal the bar intersections, producing a geometric interplay of shapes and lines across the full viewport.

Xxinyuwangxyw
90% match