Skip to main content
SimilarExport ZIP
100%

Full Sol lewitt reproduction with D3 - exercise

✓ Published0🌍 Public
Kkakkanadjoy@yahoo.com
Last edited Dec 21, 2024
Created on Dec 21, 2024

This example reproduces a Sol LeWitt-style wall drawing using D3.js, rendered as an SVG of alternating horizontal and vertical grid lines. Two mask layers, each containing a different geometric symbol from D3’s symbol generator, selectively reveal or hide portions of the grid. The first mask is inverted to expose lines through one set of shapes, while the second uses a complementary fill to display the remaining pattern. The code relies on `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to construct the composition dynamically.

AI-generated description

A Sol Lewitt ReproductionSol Lewitt art piece

MIT Licensed

Similar vizzes

Loading thumbnail…

Full Sol LeWitt reproduction with D3 exercice

This example uses D3.js (v7) and SVG to reproduce Sol LeWitt's wall drawing 370. A series of 100 horizontal and 100 vertical lines create a grid, while two custom SVG masks—one inverted—are applied to these line groups. Each mask contains a set of symbols drawn with the D3 `symbol` API, positioned along a central row. The masks define where the grid lines are visible, resulting in the lines appearing only within the symbol shapes, while the separate masks show complementary regions of the pattern.

LLouis Astorg
94% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3 - exercises

This example reproduces a Sol LeWitt artwork using D3.js, rendering an SVG canvas that fills the browser window. It shows a grid of alternating horizontal and vertical stripes, with the stripes revealed through two distinct mask layers. The code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to draw the geometric patterns and mask paths. The masks, created via the `renderMask` function, use inverted black-and-white fills and paths from `symbols` to selectively hide or show the stripes, producing the final composition.

IIan Mac Moore
94% match
Loading thumbnail…

Full Sol Lewitt Reproduction with D3-excercise

This example reproduces a Sol LeWitt-inspired geometric composition using D3 to generate layered SVG elements. It draws horizontal and vertical rectangles across the full window, applying SVG masks that contain seven distinct path symbols—such as circles, crosses, and diamonds—from the `d3.symbol` API. A mask is also inverted for one layer, creating contrast. The code uses D3 selections, `range`, and `join` to efficiently bind data and render the repetitive pattern.

Yyejichun@naver.com
93% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces Sol LeWitt’s geometric wall drawings using D3 v3 and SVG, rendering a grid of horizontal and vertical stripes overlaid with two masks. The masks, created with SVG `<mask>` elements, cut out shapes from the stripes using D3 symbols such as circles, diamonds, and triangles. One mask inverts its fill to alternate visible and hidden symbol areas. The code leverages `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate the pattern dynamically at full window size.

SSami Friedrich
93% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing as a generative SVG artwork. It renders a grid of alternating horizontal and vertical black lines, which are partially revealed through two SVG masks that use large geometric symbols to create the negative space. The code uses D3’s `select`, `range`, `join`, and `symbol` APIs to build the composition, with the `symbol` function generating the mask paths. The result is a dynamic, layered interplay of lines and shapes that fills the browser window.

AAaron
93% match
Loading thumbnail…

Full Sol LeWitt reproductions with d3

This example reproduces a Sol LeWitt piece using D3.js by generating a grid of horizontal and vertical lines. Two SVG masks, defined as "inner-mask" and "outer-mask", are applied to these lines to reveal or hide portions of the grid, creating a complex geometric pattern. The masks are constructed using D3's `symbol` and `symbols` APIs to draw paths that form the mask shapes. The code uses D3's `select`, `append`, `attr`, and `join` methods to build the SVG structure and apply data-driven attributes. The rendering is done entirely in SVG, scaling to the browser window size.

AAngela Kochoska
93% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example replicates a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical stripes across the full browser viewport. Two SVG masks, each containing a large circle, selectively reveal the stripes: one mask shows the lines inside the circle, while the other hides them, creating an inverted pattern. The code uses `d3.select`, `d3.range`, and `d3.symbol` to construct the overlapping line groups and circular mask shapes, with the SVG output generated dynamically from JavaScript.

WWolfgang
93% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3 Draft

This example reproduces a Sol LeWitt wall drawing using D3.js, displaying a grid of thin, alternating horizontal and vertical strokes that cover the full canvas. The piece generates its geometric pattern by drawing 100 horizontal and 100 vertical lines, each masked with an inverted circular symbol from D3’s `symbols[1]` (a circle) to create a subtle ring-like fade at the center. The code relies on `d3.select`, `d3.range`, and D3’s `.join` API for efficient SVG element creation, applying masks via `svg.call` with a custom `renderMask` function. The rendering is entirely SVG-based, with the final output sized to the browser window.

AAndre J Denais
93% match