Skip to main content
SimilarExport ZIP
100%

Sol LeWitt exercise

✓ Published0🌍 Public
CC-Marfil
Last edited May 7, 2023
Created on May 7, 2023

This visualization generates a grid of horizontal and vertical rectangles on an SVG canvas, creating a woven pattern inspired by Sol LeWitt’s geometric art. Two masks, each containing a large D3 symbol shape, invert the fill of the intersecting lines to reveal the glyphs as negative space. The code uses D3 selections and data joins to render 100 rows and columns, with mask IDs applied via the `attr` method and custom mask rendering logic. The result is a dynamic interplay of line and form, driven entirely by D3’s `range`, `symbol`, and `symbols` APIs.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js and SVG. It displays a grid of vertical and horizontal rectangles overlaid with two masks that reveal alternating symbol shapes—including circles, crosses, and diamonds—arranged horizontally across the canvas. The code imports `select`, `range`, `symbols`, and `symbol` from D3 to generate the shapes and masks, rendering 100 rectangles per axis at 20-pixel intervals. The visualization uses the D3 `range` and `join` methods to bind data, with mask rectangles toggling between white and black fills to create the interlocking pattern.

Aabhineetsingh10
90% match
Loading thumbnail…

D3 Sol LeWitt 2

This visualization generates an abstract grid of horizontal and vertical stripes across the full browser window, inspired by Sol LeWitt’s geometric wall drawings. Two sets of one hundred rectangles each create the striped pattern, with each set filtered through a separate SVG mask. The masks incorporate D3’s `symbol` shapes—including circles, diamonds, and squares—positioned via `d3.range` and `selectAll().join()`. Using D3 v7 with a React setup, the code renders entirely as SVG, with masking inverted between the two layers to produce intersecting geometric cutouts.

JJMeltzer92
90% match
Loading thumbnail…

Sol LeWitt with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js in a React application, rendered as SVG. It shows a grid of horizontal and vertical rectangles that are partially revealed through two circular masks, creating an intersecting crosshatch pattern. The code uses `d3.select` and `d3.range` to generate 100 stripes in each direction, with alternating fills applied via SVG `mask` elements. Two separate masks—one inverting the circle’s effect—control visibility, producing a dynamic interplay between the grid lines and the central circular reveal. The visualization runs full-window, adapting to the viewport dimensions.

Ddalia.miliauskaite@me.com
90% match
Loading thumbnail…

Full Sol LeWitt D3

This example creates a grid of horizontal and vertical stripes whose visibility is selectively revealed through two SVG masks, positioned over symbol-shaped cutouts. The mask pattern is generated using D3’s `range` and `symbol` APIs, alternating between normal and inverted masks to produce a complementary crossover effect. The visualization renders entirely with SVG, using dynamic `mask` URLs applied to each rectangle. The code leverages D3 v7 selections, joins, and the `symbol` generator to construct geometric shapes across the full viewport.

JJamie
90% 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
90% match
Loading thumbnail…

Sol LeWitt-Inspired Shapes

A generative art piece inspired by Sol LeWitt’s geometric wall drawings, this visualization fills the browser window with an SVG grid of randomly colored rectangles and vertical slats. The code uses D3 v7’s symbol generators and masks to alternately reveal or hide each shape within alternating columns, producing a woven, layered composition. The rendering logic relies on SVG `<mask>` elements, `d3.range`, and `d3.selectAll().join()` to construct both horizontal and vertical bands, with the mask patterns cycling through D3’s built-in symbol types. The result is a dynamic, self-contained pattern generated from deterministic geometry and random color values.

Aadventuresenglish.info@gmail.com
89% match
Loading thumbnail…

Full Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using D3 to generate SVG shapes. Alternating vertical and horizontal striped rectangles are layered beneath two masks, creating a geometric composition where the pattern changes across the canvas. Each mask contains alternating black and white regions with D3 symbol paths—including circles, crosses, and diamonds—positioned at intervals. The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to build the visualization, with the masks inverted relative to each other for a contrasting effect.

MMatthew Bruffey
89% match
Loading thumbnail…

D3-Sol-LeWitt

This example pays homage to Sol LeWitt by using D3.js to generate a grid of horizontal and vertical rectangles, which are only visible within the intersection of two circular masks. The visualization renders 100 stripes in each direction, with the SVG `mask` elements defining a central circle that reveals the grid against a contrasting background. The code uses D3’s `select` and `range` to create the rectangles and applies the masks for a layered, geometric effect.

AAbdulafeez-okewunmi
89% match