Skip to main content
SimilarExport ZIP
100%

Fork of full Sol LeWitt Reproduction with D3

✓ Published1🌍 Public
Rroyable88
Last edited Dec 14, 2022
Created on Dec 14, 2022

This example reproduces a Sol LeWitt art piece using D3 to generate a grid of alternating horizontal and vertical rectangles. The rectangles are masked by two overlapping circular symbols, one inverted, to create the final visual composition. The code leverages `select`, `range`, `symbol`, and `symbols` from D3, rendering SVG shapes across the full window dimensions. The masks are built with appended `mask` elements and paths, using D3’s `join` for efficient data binding.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 version 7. It displays a grid of horizontal and vertical lines overlaid with two masks, each containing a row of distinct geometric symbols. The horizontal lines are masked by one set of symbols, while the vertical lines are masked by an inverted set, creating a layered, intertwined visual effect. The code uses `d3.select`, `d3.range`, and `d3.symbol` to generate SVG shapes and `append('mask')` to apply the masking logic dynamically.

Aajoua
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3. It draws a grid of horizontal and vertical rectangles that are masked by two circles, creating a pattern of alternating lines within circular cutouts. The code uses D3’s `select` and `range` functions to generate SVG elements, and applies SVG masks with `circle` elements to clip the rectangles. The artwork is rendered as an SVG, filling the browser window.

Rrwata97
94% match
Loading thumbnail…

Fork of Full of Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece renders a grid of thin horizontal and vertical rectangles across the full browser window. The code uses `d3.range()` and `d3.select` to generate 100 rows and columns, then applies two SVG masks to shape the overlapping lines. Each mask contains a large `d3.symbol` with a star shape, defined via `symbol(symbols[1], 100000)`, which cuts a circular diamond pattern out of the otherwise regular grid. The masked rectangles create a layered visual where lines appear through the star-shaped holes, demonstrating SVG mask composition with D3 selections.

IIgorGorin00
94% match
Loading thumbnail…

Fork of Fork of full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7 with SVG rendering, layering horizontal and vertical striped rectangles over masked symbol shapes. The code generates 50 horizontal and vertical bars positioned incrementally, then applies two masks—one containing a row of D3 symbols (circles, crosses, diamonds, etc.) and another with a large central triangle. The masks alternate inverted fills, creating intersecting cutout effects where the stripes show through the symbol shapes. The visualization updates dynamically to the browser window dimensions, demonstrating D3’s `range`, `symbol`, and `join` methods for procedural art.

Rroyable88
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js version 6 and SVG rendering. The visualization shows a grid of horizontal and vertical rectangles, with two circular masks creating a layered geometric pattern where the lines alternate visibility. The code employs `d3.select`, `d3.range`, and the `join` method to generate 100 rect elements for each orientation. SVG masks—defined with distinct IDs and circles of white and black fills—control which line segments appear within the overlapping circular regions.

PPeter Prevos
94% match
Loading thumbnail…

Fork of Fork of For of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, rendering a grid of horizontal and vertical SVG rectangles overlaid with two circular masks. The first mask creates a circular hole in the center of the horizontal lines, while the second mask reverses the effect, leaving a solid circle in the middle of the vertical lines. The code uses `d3.select`, `d3.range`, and the `.join()` method to construct the SVG elements, with masks defined via `append('mask')` and composed of `rect` and `circle` shapes.

Rroyable88
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 v6, rendering 100 horizontal and 100 vertical rectangles as SVG elements. The rectangles are masked to reveal only a circular region at the center of the canvas, creating an overlapping grid pattern reminiscent of the original work. The code uses D3’s `select`, `range`, and `join` methods to bind data and generate the SVG shapes, with two `mask` definitions controlling the visibility of the crossing bars.

DDyor69
94% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

A fork of a Sol LeWitt reproduction uses D3 v3 to generate an SVG grid of horizontal and vertical rectangles. Two D3 masks, created via the `symbol` and `symbols` APIs, are applied to the grid’s layers, with one mask inverted to reveal the artwork’s pattern. The code sets the drawing to the full browser window size and renders 100 rows and columns of thin strips. The piece is implemented with `select`, `range`, and `join` to build the SVG elements dynamically.

Ggianlucaguerra
94% match