Fork of TD_Sol_Lewitt_D3_c0ndensed

100%

Fork of TD_Sol_Lewitt_D3_c0ndensed

✓ Published0🌍 Public

Last edited Oct 22, 2022

Created on Oct 22, 2022

A generative art piece inspired by Sol LeWitt renders a grid of horizontal SVG rectangles, clipped by a circular mask to reveal a central disc of lines. Using an inverted second mask, vertical rectangles appear only outside the circle. The code employs D3’s `select`, `range`, and chained `join` methods to create and style the shapes, with the SVG `mask` element handling the clipping. The visualization relies on static data generation, filling the viewport with a minimalist, geometric pattern.

AI-generated description

Reproduce Sol Lewitt art TD_Sol_Lewitt

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt with d3js

This visualization generates a grid of horizontal and vertical SVG rectangles that collectively form a geometric pattern inspired by Sol LeWitt’s minimal art. The code uses d3’s `select` and `range` to create 100 lines in each direction, then applies two circular masks to reveal or hide portions of the grid, producing a layered, cross-shaped effect. The rendering relies on SVG masks and fills, with the viewport sized to the full window.

Iinnocent thomas

89% match

Loading thumbnail…

Fork of Fork of Full Sol LeWitt Reproduction with D3

This visualization recreates a Sol LeWitt–style grid of horizontal and vertical lines, overlaid with two masks that reveal symbolic shapes in contrasting areas. The example uses D3 v6 to generate 100 rectangular strips in each direction, then applies SVG masks via `d3.select` and `append('mask')`. Each mask uses D3 symbol generators (`d3.symbol` and `d3.symbols`) to draw numbered geometric icons—circles, crosses, diamonds, and squares—in black or white, creating a layered optical effect. The code directly manipulates SVG elements and relies on the `range`, `join`, and `attr` APIs to build the repeating structure.

AAlpineStranger

88% 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

88% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3. It renders a grid of horizontal and vertical SVG rectangles, each masked to reveal a circular cutout in the center. The visualization uses two overlapping D3 selections with `mask` attributes to create alternating stripes visible only in the circular region. The code leverages D3’s `select`, `range`, and data joins to generate elements efficiently. The full-screen SVG canvas displays 100 horizontal and vertical bands, with the second mask inverting the visibility pattern to achieve the final layered effect.

CCurran Kelleher

88% match

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

A Sol LeWitt-inspired generative drawing fills the browser window with a grid of horizontal and vertical black lines. The piece uses D3 to render two sets of rectangles, each masked by a custom SVG mask. One mask reveals a pattern of geometric symbols—circles, squares, and triangles—while the other inverts the effect, creating a layered, intersecting composition. The masks are built with D3's `symbol` API, and the SVG elements are positioned using `range` and `selectAll` with `join`. The rendering is entirely SVG-based, with the artwork sized to the viewport.

Wwspwll@gmail.com

88% match

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js, rendering a grid of horizontal and vertical rectangles that intersect through SVG masks. The code creates 100 evenly spaced lines in each direction, then applies two complementary masks—one normal and one inverted—to reveal or hide the grid patterns. Using D3 selections, `range`, and symbol generators, the masks incorporate circular, triangular, and other symbolic shapes. The artwork is dynamically sized to the viewport and rendered as an SVG, demonstrating how D3’s data-join and mask primitives can build layered generative art.

XXuân Vinh

87% match

Loading thumbnail…

Fork of TD_Sol_Lewitt_FINAL

This interactive SVG artwork reproduces a Sol LeWitt-style drawing, displaying two overlaid grids of horizontal and vertical black bars. The horizontal bars appear inside a centered circle, while the vertical bars appear outside it, creating a contrast between the two regions. Using inverse masking via the SVG `mask` element, the code defines two complementary circular masks to selectively reveal each grid. The presentation is generated entirely through JavaScript and the native SVG DOM API, with a black-and-white geometric aesthetic.

TTatjana Dzambazova

87% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 to generate a grid-like pattern of horizontal and vertical lines. The lines are rendered as SVG rectangles, with two circular masks applied to create a central circular viewing window. The horizontal bars are masked by a black rect with a white circle, while the vertical bars use an inverse mask, producing a crosshatched effect within the circle. The code uses d3-selection’s `select`, `append`, and `join` methods alongside `range` to efficiently create the marks.

Iibrarmunircoder

87% match