sol lewitt2

100%

✓ Published0🌍 Public

Last edited Nov 14, 2022

Created on Nov 14, 2022

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.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

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

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

89% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3 v3 with SVG rendering. It shows a grid of horizontal and vertical rectangles overlaid with two circular masks, one inverted, creating a dynamic interplay of lines and negative space. The code uses `d3.range`, `d3.select`, and `d3.symbol` with `symbols[1]` to generate the mask paths. Horizontal and vertical bars are drawn at regular intervals, then clipped by the masks to produce the final pattern against a full-window canvas.

Ttriciascully

89% match

Loading thumbnail…

Sol LeWitt Reprod D3 symbols AG

This example recreates a Sol LeWitt-inspired geometric composition using D3.js. It shows a grid of thin horizontal and vertical rectangles layered to create a woven texture, with two central plus-shaped masks cutting away portions of the pattern. The code uses `d3.select`, `d3.range`, and `d3.symbol` to generate SVG elements, applying `mask` attributes to hide or reveal the intersecting lines. Two mask layers, one inverted, define the contrasting positive and negative spaces at the center of the piece.

Gguththered

89% match

Loading thumbnail…

Reproduction Sol Lewitt D3

This example reproduces Sol LeWitt-style geometric art using D3 version 7. It renders two perpendicular sets of horizontal and vertical striped rectangles, each masked by one of two complementary masks containing a large D3 symbol (circle, cross, diamond, square, and star) centered in the viewport. The code uses `d3.select`, `range`, `symbols`, and `symbol` within a custom mask-rendering function, then applies the masks to SVG `<rect>` sequences to create intersecting pattern effects. The visualization is generated programmatically with a blank SVG canvas sized to the window.

KKhanAzmat

89% match

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, showing intersecting horizontal and vertical line patterns constrained by two circular masks. It demonstrates how SVG mask elements can create layered visual effects with geometric precision. The code uses D3 selections with `join('rect')` to bind 100 data points from `range(n)`, while two distinct mask groups apply inverted black-and-white circles to reveal the gridlines. The visualization renders as an SVG using dynamic width and height based on the window size.

OOleg Zhernovoy

89% match

Loading thumbnail…

Sol LeWitt with D3

This example reproduces a Sol LeWitt-style drawing using D3.js, rendering two sets of horizontal and vertical striped rectangles that intersect within circular masks on an SVG canvas. The code generates 100 of each rectangle type, with the first mask revealing a solid circle and the second inverting the pattern, creating a layered geometric contrast. It uses D3’s `select` and `range` functions from version 6.6.1 to build the SVG dynamically, positioning elements based on window dimensions.

Aainhoadieruiz@gmail.com

89% match

Loading thumbnail…

Sol Lewitt Reproduction with D3 multiple symbols

This example reproduces a Sol LeWitt-style drawing using D3’s `symbol` and `symbols` API to generate five geometric shapes (circle, cross, diamond, square, and star) that act as masks. Two sets of horizontal and vertical striped rectangles are drawn, each masked by a different pattern of symbols; the first mask uses black-filled symbols on white, the second inverts this. The `renderMask` function appends SVG `mask` elements, mapping each symbol to a `path` via `symbol(d, 8000)()` at evenly spaced translations. The code relies on `select`, `range`, and `join` for data-driven rendering.

GGullyPlook

89% match