FFFF

100%

✓ Published1🌍 Public

Last edited Feb 25, 2023

Created on Feb 25, 2023

Forked from Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using overlapping striped grids and two circular masks. It renders 100 horizontal and 100 vertical rects in an SVG, with each set filtered through a distinct mask that reveals or hides portions of the lines. The masks are built with `d3.symbol` and the `symbols[2]` shape, creating two large circles that intersect to produce a dynamic, patterned interplay of light and dark areas. The code uses D3’s `select`, `range`, `join`, and `mask` APIs to generate the layered structure and the final visual effect.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

sol lewitt2

This example reproduces a Sol LeWitt-inspired geometric composition using D3 selections and SVG masks. It draws two intersecting sets of thin horizontal and vertical rectangles, each masked by a large circular symbol defined via `d3.symbol` and `d3.symbols`. The first mask uses a light-on-dark pattern, the second an inverted dark-on-light pattern, creating layered contrast across the full window. The code relies on `d3.select`, `range`, `symbol`, and SVG `mask` elements to generate the visual, with a hardcoded `n` of 100 for the line spacing.

Nneojournalist

88% match

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

87% match

Loading thumbnail…

Sol Lewitt Project

This example generates a geometric abstraction inspired by Sol LeWitt, layering horizontal and vertical striped rectangles over an SVG canvas. Two circular masks create a contrast where a central white circle reveals the full pattern, while the surrounding area inverts it. Using D3’s `select` and `range`, it appends over one hundred rect elements per axis, with widths and heights derived from window dimensions. The SVG `mask` elements, defined with white and black circles, control visibility, producing a precise, grid-based visual composition.

JJohnny Dodge

86% match

Loading thumbnail…

FFFSDASDASDAS

This piece reproduces a Sol LeWitt drawing as a generative grid of horizontal and vertical lines. The lines are masked by two complementary filters: one mask reveals a set of symbolic glyphs, while the inverse mask hides them, creating a complex interplay of line and form. The code uses the D3.js library, specifically `select`, `range`, `symbols`, and `symbol`, to build SVG elements and apply masks. The output is rendered as a single SVG.

JJeppeOEM

86% match

Loading thumbnail…

D3 Sol LeWitt reproduction

This example reproduces a Sol LeWitt-style geometric composition using D3 v7 and SVG. It layers two masks over intersecting grids: one mask reveals vertical stripes through alternating D3 symbols, while the other horizontally bands the canvas with a second symbol set. The code uses `d3.range`, `d3.symbols`, and `d3.symbol` to generate the mask shapes, then applies the masks via SVG `mask` attributes. The result combines generative patterns with minimalist grid structures, demonstrating mask-based compositing in a browser window.

HHtet Yan Oo

86% match

Loading thumbnail…

Sol LeWitt Reproduction with D3 Exercise

This visualization reproduces a Sol LeWITT-style geometric composition using overlapping horizontal and vertical line grids. Four mask layers alternate line orientations and symbol shapes—including circles, diamonds, crosses, and triangles—to create a rhythmic interplay of foreground and background elements. The code uses D3 selections, `range`, `symbol`, and `symbols` APIs to generate SVG rectangles and paths, with masks defined via `renderMask` to invert or combine patterns across the full viewport.

Kkathrynrbernard

86% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using overlapping horizontal and vertical striped rectangles, with two SVG masks revealing different symbol shapes at their intersection. The visualization generates 100 thin rectangular bands along each axis, then applies mask-1 and mask-2 to selectively display or hide regions based on d3 symbols. Built with D3 v6, the code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to create the masked effects, rendering entirely in SVG within a full-viewport canvas.

GGbemiga Atolagbe

86% match

Loading thumbnail…

Full Sol Lewit reproduction using D3

This example reproduces a Sol LeWitt-style geometric drawing using D3.js, combining SVG rectangles and mask elements to create layered visual patterns. It generates 100 horizontal and vertical striped rectangles, each masked by one of two masks that reveal D3’s built-in symbol shapes—including circles, crosses, diamonds, squares, stars, triangles, and wye—positioned across the canvas. The code uses `d3.range` and `d3.symbol` with `d3.symbols` to render the symbol paths, while `d3.select` handles SVG manipulation and the `mask` attribute applies the clipping patterns. The rendering is fully SVG-based within a full-viewport layout.

AAshwani Sajwan

86% match