Skip to main content
SimilarExport ZIP
100%

Fork of sol lewit reproduction assignment

✓ Published0🌍 Public
KKerim
Last edited Aug 28, 2022
Created on Aug 24, 2022

This example reproduces a Sol LeWitt-inspired drawing using D3 v7 selections and SVG masks. Three alternating vertical and horizontal stripe patterns are overlaid on the page, each masked by a large circle that reveals or hides the lines through contrasting black and white mask fills. The code builds the SVG structure with `d3.select`, generates stripe counts via `d3.range`, and applies masks through D3’s `attr` method, rendering the final output as SVG.

AI-generated description

introduction to d3 with many useful tips

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol Lewitt Reproduction with d3

This example reproduces a Sol LeWitt wall drawing using D3 v7, generating a grid of horizontal and vertical stripes overlaid with a circular mask. The SVG rendering shows a black-and-white composition where two perpendicular striped layers intersect, with a central circle revealing horizontal bands while the outer area displays both orientations. The code uses `d3.select`, `d3.range`, and `join` to create rectangles, and applies SVG `<mask>` elements with circles to control which stripes appear in each region, with the circle radius derived from a fixed pixel step.

VVincent Leduc
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3 Method 1

This example reproduces a Sol LeWitt-inspired generative drawing as a full-screen SVG. It displays two sets of overlaid horizontal and vertical stripes, which are masked to reveal circular voids at the center. The artwork is built with D3 methods including `d3.select`, `d3.range`, and the `.join()` operator to create and position 100 rectangles in each direction. Two SVG masks (`circle-mask` and `circle-mask-2`) control which parts of the stripes remain visible, creating the interplay of lines and empty space.

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

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece, showing a grid of horizontal stripes confined to a circular region, with vertical stripes filling the surrounding area. It uses D3 v6 selections and data joins to generate the SVG rectangles, while SVG mask elements create the circular boundary and its inverse. The code builds two masks with `create_circle_mask`, applying them to the stripe groups to achieve the geometric composition. The rendering is entirely SVG-based, with dimensions fixed at 960 by 500 pixels.

Aamauris@outlook.com
91% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3’s `select` and `range` APIs to generate layered SVG rectangles. Two groups of 100 horizontal and vertical striped rects are rendered across the full viewport, each masked with circular clip regions. The first mask reveals a white circle on a black background, while the second inverts the effect, creating a central pattern of intersecting bands. The code constructs SVG masks and rects dynamically, with dimensions tied to the window size.

AAkinola Samson
91% match
Loading thumbnail…

Fork of Fork of Full Sol LeWitt reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v7 and SVG. It generates two sets of striped rectangles—horizontal and vertical—layered over each other. The code applies two complementary SVG masks, each containing a row of D3 symbol shapes, to selectively reveal or hide parts of the grid. The masks are created programmatically with the `renderMask` function, which uses `d3.range`, `d3.symbol`, and `d3.symbols` to position the mask shapes across the canvas. The final result creates an intricate, textured interplay between the geometric lines and the symbol cutouts.

ZzolboBatsaikhan
91% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, rendering a grid of horizontal and vertical stripes on an SVG canvas. The visualization shows overlapping line patterns where a circular mask inverts the stripes, creating a contrasting circular region in the center of the composition. The code uses D3’s `selection` API to append SVG elements, including rectangles and masks with white and black fills, to generate the alternating bands. It uses the `d3` library version 7.8.5 and dynamically sizes the canvas to the browser window.

Hhaithamradhi
91% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 v6, displaying a grid of overlapping horizontal and vertical stripes that form a circular pattern through SVG masks. The code uses `d3.select`, `d3.range`, and `join` operations to render 100 rect elements in each direction, with the stripes visible only through two circular mask regions. The first mask reveals alternating bands inside a white circle, while the second creates an inverse effect, producing a geometric interplay of lines. The rendering approach combines D3's data-join with native SVG mask and circle elements to achieve the Op-art style composition.

CCurran Kelleher
91% match