LeWitt D3 More Symbols

100%

LeWitt D3 More Symbols

✓ Published0🌍 Public

Last edited Sep 28, 2023

Created on Sep 28, 2023

This example generates a geometric pattern of black bars overlaid on a white background using D3 version 7. It displays 100 horizontal and 100 vertical rectangles, each masked to reveal shapes: the horizontal bars are clipped by a wye symbol, while the vertical bars are masked by a star with a rectangular cutout. The code uses `d3.select`, `d3.range`, `d3.symbol`, and SVG `<mask>` elements to compose the layered effect, rendering fully in SVG with no external data source.

AI-generated description

A bare minimum HTML page demonstrating use of D3 following the course of Curran Kelleher on YouTube

MIT Licensed

Similar vizzes

Loading thumbnail…

LeWitt D3 Symbols

A generative geometric composition inspired by Sol LeWitt uses D3 v7 to render black bars across the full window. The SVG defines two masks—a circle and a star—and applies them to alternating horizontal and vertical bar groups, creating intersecting line patterns. `d3.range` and `d3.symbol` generate the shapes, while `select` and `join` manage the 100 rects per axis. The result is a minimal, modular artwork built entirely with scalable vector graphics.

MMarvin Frede

91% match

Loading thumbnail…

LeWitt Recreation w/ D3

This example recreates a Sol LeWitt-style geometric drawing using D3.js v7 and SVG rendering. It displays a grid of horizontal and vertical black bars overlaid on a full-window canvas, with a circular mask creating a central void. The code uses D3's `select`, `range`, and `join` to generate 100 rect elements in each orientation, while SVG `mask` elements with white and black shapes define the visible regions. The result is a minimalist pattern that demonstrates simple masking and data-driven shape generation.

MMarvin Frede

87% match

Loading thumbnail…

so lewit reproduction using D3.js inbuilt shape 3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js v7. It layers two sets of thin rectangles—one horizontal, one vertical—across the full viewport, creating a grid-like pattern. Two SVG masks, each containing a D3 symbol (a cross), selectively reveal or hide portions of the rects by applying alternating black and white fills. The code uses `d3.range` to generate data, `d3.symbol` with `symbolCross`, and `d3.select` to append elements and masks.

Ddeebanks77

85% match

Loading thumbnail…

D3 - LeWitt Full 3

This visualization uses D3.js to generate a layered composition of horizontal and vertical bands that interact through custom SVG masks. The code creates 100 alternating stripes across the canvas, with horizontal bars masked against circular symbols and vertical bars masked against their inverse, producing an intricate geometric interplay inspired by Sol LeWitt's wall drawings. Using D3's `select`, `range`, and `symbol` APIs, the example constructs two overlapping line grids whose visibility is modulated by the mask patterns, creating a dynamic Moiré-like effect. The piece is rendered entirely as SVG, with the mask system built through reusable functions that toggle between positive and negative space.

Ttomasnihlen

85% match

Loading thumbnail…

Sol LeWitt-d3-shape

This example generates an abstract grid of horizontal and vertical stripes that are selectively masked by two inverted symbol shapes, using D3 v6. It renders SVG rectangles across the full viewport, with 100 horizontal bars and 100 vertical bars, each assigned a mask. The `d3.mask` API combines a white or black background rect with a large `d3.symbol` path (symbols[4], a cross) translated to the center. Two masks, one inverted, create a dynamic interplay between the geometric grid and the central symbol.

Bbillzhou2005

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

85% match

Loading thumbnail…

D3 - LeWitt Full 5

This example generates a generative art composition in the style of Sol LeWitt, using an SVG canvas and D3.js. Horizontal and vertical striped bars are combined with two masks containing scaled D3 symbols, creating an intersecting interplay between the bar grid and the shapes. The code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` with `d3.symbol()` to render the masked paths. The output is a purely procedural, abstract visualization driven by layout and masking logic, with no external data source.

Ttomasnihlen

85% match

Loading thumbnail…

LeWitt with D3

Inspired by Sol LeWitt’s geometric wall drawings, this SVG visualization uses D3 to layer horizontal and vertical striped rectangles over each other. Two masks—one inverted—reveal and hide sections of the grid using D3’s `symbol` shapes (such as circles and crosses) as cutouts. Built with React and D3 v6, the code generates 200 stripes per direction and positions symbols across the canvas to create intersecting patterns.

Ggrassfluffy02

85% match