Fork of Fork of Chapter 3 - D3 - uso de group

100%

Fork of Fork of Chapter 3 - D3 - uso de group

✓ Published1🌍 Public

Last edited Sep 3, 2025

Created on Sep 3, 2025

Forked from Fork of Chapter 3 - D3 - uso clases

This example generates a Sol Lewitt-inspired geometric composition using D3 v6 and SVG. It draws 100 horizontal and vertical rectangles across the full viewport, then applies two complementary circle masks to cut out circular voids and reveal the grid within. The code uses D3 selections, `range`, and `join` to create the rect elements, while `append('mask')` constructs custom mask definitions that alternate black and white fills to control visibility.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Chapter 3 - D3 - uso clases

This example creates an abstract Sol LeWitt-inspired drawing using SVG masks. It renders a grid of alternating horizontal and vertical rectangles that are partially revealed through two circular masks, producing an interplay of visible and hidden stripes. The code uses D3's `select`, `range`, and `join` API to generate the rectangles and construct the masks. The visualization is built with a Vue-based D3 version (v3), rendering to SVG, with the masks defined as `mask` elements containing `rect` and `circle` shapes.

SSergio

92% match

Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-inspired geometric composition using D3's selection and data-join methods. It renders 100 horizontal and 100 vertical rectangles across the full viewport, with each set masked by a circular cutout at the center—one mask inverts the other, creating a striking interlocking grid pattern. The visualization uses D3 v6's `select`, `range`, and `append` APIs to construct the SVG elements and masks, with the circle radius fixed at 200 pixels. The code demonstrates how layered SVG masks can produce complex visual effects from simple rectangular primitives.

MMohammed

85% match

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js, rendering a grid of horizontal and vertical rectangles that intersect through SVG masks. The code creates 100 evenly spaced lines in each direction, then applies two complementary masks—one normal and one inverted—to reveal or hide the grid patterns. Using D3 selections, `range`, and symbol generators, the masks incorporate circular, triangular, and other symbolic shapes. The artwork is dynamically sized to the viewport and rendered as an SVG, demonstrating how D3’s data-join and mask primitives can build layered generative art.

XXuân Vinh

84% match

Loading thumbnail…

Fork of Sol lewitt d3

This example generates an abstract grid of 100 horizontal and vertical rectangles that intersect to form a full-screen pattern. Two SVG masks with circular holes are applied to the groups of rectangles, creating the illusion of a blank circular area at the center where the two mask types overlap. The code uses d3.select, d3.range, and SVG join operations to append the rect elements, along with mask and circle SVG elements to define the clipping effect. The visualization adapts to the browser window size by setting width and height from window.innerWidth and innerHeight.

Ddwikbtn

84% match

Loading thumbnail…

Fork of Fork of For of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, rendering a grid of horizontal and vertical SVG rectangles overlaid with two circular masks. The first mask creates a circular hole in the center of the horizontal lines, while the second mask reverses the effect, leaving a solid circle in the middle of the vertical lines. The code uses `d3.select`, `d3.range`, and the `.join()` method to construct the SVG elements, with masks defined via `append('mask')` and composed of `rect` and `circle` shapes.

Rroyable88

84% match

Loading thumbnail…

Fork of with D3 and group elements

This example generates an SVG grid of horizontal and vertical rectangles, precisely 960 by 500 pixels, using the D3.js library. The grid is composed of two groups of rectangles, each with a stroke width of 8 pixels, and is overlaid with circular masks to create a focal point in the center. The code leverages D3's `select`, `append`, `attr`, and `range` methods to build the structure, along with custom `setAttributes` and `join` helpers for efficient element creation. The visualization demonstrates how to combine SVG masks with D3's data-driven rect generation to produce a geometric pattern with a central spotlight effect.

Pparag776

84% match

Loading thumbnail…

Fork of Fork of Sol LeWitt with d3

This example generates a grid of thin horizontal and vertical lines using D3’s `select`, `range`, and `join` methods, rendered as SVG rectangles across the full browser viewport. Two circular masks invert the visibility of each set of lines: the first hides everything outside a 200-pixel circle centered on the screen, while the second hides everything inside its circle. The result juxtaposes a solid disk of vertical strips against an outer field of horizontal strips, creating a Sol LeWitt-inspired geometric pattern. The code runs in React and relies on D3 v7 for data binding and SVG manipulation.

Mmax-31

84% match

Loading thumbnail…

Fork of Following Along Sol LeWitt D3

This example generates an abstract geometric composition inspired by Sol LeWitt using D3 v6. It renders two sets of overlapping striped rectangles—horizontal and vertical—that intersect to create a grid pattern. Two SVG masks define a central circular region where the horizontal stripes remain visible while the vertical stripes are hidden, producing a contrasting visual effect. The code uses `d3.select`, `d3.range`, and `join` to bind data to SVG `<rect>` elements, with mask attributes controlling visibility.

PParker-D5

84% match