Skip to main content
SimilarExport ZIP
100%

Grouping Rect by <g>

✓ Published0🌍 Public
Llukasilg.sol@gmail.com
Last edited May 27, 2024
Created on May 27, 2024

This example reproduces a Sol LeWitt art piece, layering horizontal and vertical stripes that intersect to create a grid across the entire screen. The jagged, circular pattern emerges by using two SVG masks: one shows vertical lines through a white circle, while the other reveals horizontal lines outside a black circle, and their combined effect produces curved edges. Built with D3.js (version 6.6.1), the code uses `select`, `range`, and `.join()` to generate 100 rectangles in each direction, with masks defined via `append('mask')` and styled through fill colors. The stripes use fixed pixel offsets and dimensions, creating repeating, mathematically organized visuals.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Grouping Rect by <g>

A single-page web drawing reproduces a Sol LeWitt piece by layering two sets of parallel lines: horizontal stripes on even rows and vertical stripes on uneven columns. It uses D3.js functions `select`, `range`, and the `.join` method to append 100 `<rect>` elements to each of two `<g>` groups. Two SVG masks, each containing a circle with a contrasting fill, selectively reveal the stripes in a circular window at the center, while the surrounding area remains hidden. The entire canvas adapts to the browser's inner width and height.

Llukasilg.sol@gmail.com
94% match
Loading thumbnail…

group element D3 Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style drawing with layered horizontal and vertical stripes overlaid on a full-window SVG canvas. The piece shows a grid of thin, alternately oriented lines that are masked to reveal a central circular cutout, with the vertical and horizontal bands intersecting to create a woven pattern. Built using D3 v7, it employs `select().append()`, `range()`, and the `join()` operator to generate 100 rects in each group, while two SVG `<mask>` elements define the circular reveal and concealment for the line sets.

Mmegan-grannan
86% match
Loading thumbnail…

Sol LeWitt Reproduction (D3 groups)

This example reproduces a Sol LeWitt art piece using D3 groups to draw two sets of overlapping stripes. One group renders 100 horizontal rectangles, and another draws 100 vertical rectangles, each set filtered through a circular mask. The code uses `select`, `append`, and `join` from D3's API, with the masks defined via `svg.append('mask')` and styled using `rect` and `circle` elements. The artwork dynamically fills the browser window, showcasing a grid-and-circle motif.

LLohitB
86% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 and groups

This example reproduces a Sol LeWitt-style drawing using overlapping horizontal and vertical striped rectangles, with a central circular region revealed through two complementary SVG masks. The code uses D3’s `select`, `range`, and `.join` API to generate 100 rects in each direction, setting their positions and dimensions from the window size. A `mask` element with a black background and white circle creates a circular window for the horizontal bars, while a second mask with inverted colors applies to the vertical bars, producing a contrasting intersection at the center.

PPetrescu Alexandru
84% 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
84% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 using group elements

This example recreates a Sol LeWitt-inspired geometric composition using D3.js, displaying a grid of horizontal and vertical bars that intersect to form a pattern. The visualization uses two groups of rectangles, one arranged horizontally and one vertically, each masked to reveal a circular area in the center of the screen. SVG masks defined with `mask` and `circle` elements control the visibility, creating a layered effect where the bars appear only within the circular regions. The code leverages D3 selections and data joins with `select` and `range` to generate the rectangles dynamically.

Ttriciascully
83% match
Loading thumbnail…

Sol Lewitt Project in D3 Attempt #1 (group method)

This D3.js (v7.9.0) example constructs an SVG composition inspired by Sol LeWitt's geometric art. It draws a grid of vertical and horizontal stripes, each set masked by overlapping circles centered on the canvas. The first group of vertical rectangles is clipped by a circular mask, while the second group of horizontal rectangles is clipped by an inverse mask, revealing a cross-like pattern. The project uses D3's `select`, `append`, `range`, and the `.join()` API to build the SVG elements programmatically.

CCasualWanderer20XX
82% match
Loading thumbnail…

Sol LeWitt art

This example recreates Sol LeWitt-inspired geometric art using D3.js to generate a grid of horizontal and vertical SVG rectangles. The piece shows alternating full-width and full-height bands intersecting across the entire viewport, creating a woven pattern. Two SVG masks with circular cutouts are applied to these band groups, revealing the underlying shapes only within circular regions. The code constructs 100 rectangles in each direction using `d3.range` and `selectAll().join()`, with masks defined via appended `mask` elements containing `rect` and `circle` nodes.

SSumit Ningolli
82% match