Skip to main content
SimilarExport ZIP
100%

Fork of Chapter 3 - D3 - uso clases

✓ Published1🌍 Public
SSergio
Last edited Sep 3, 2025
Created on Sep 3, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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

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.

SSergio
92% match
Loading thumbnail…

Fork of so lewit reproduction D3.js fundamental

This example manipulates SVG masks to create a dynamic visual composition of overlapping horizontal and vertical stripes. The main view is a grid of 100 rectangles that cycle through a circular mask, revealing a sunburst-like pattern from the center. A second set of rectangles uses an inverted mask to create a contrasting cross-hatch effect. The code uses the D3.js library (v7) to construct the SVG elements and apply the masking logic via the `append` and `attr` methods.

Yyoav95
85% match
Loading thumbnail…

Chapter 3 - D3

A full-screen compositional drawing uses horizontal bands with an SVG mask to reveal a circular window into the stripes. The code generates 100 rectangles via `d3.range` and data joins, then applies a mask defined with a circle element to clip the view. Built with D3 v6 and Vue, the SVG is rendered directly to the browser window, demonstrating simple geometric pattern-making through data-driven shape generation.

SSergio
85% 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
85% match
Loading thumbnail…

Fork of Episode 4: Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style geometric drawing using SVG masks to reveal distinct line patterns in four quadrants. The code uses D3 selections and `range(n)` to generate 100 horizontal, vertical, and diagonally rotated rectangles, each clipped by a rectangular mask. The `select` and `append` methods build the SVG canvas and mask elements, while `join` binds data to create the rects. The result demonstrates how D3 v3 and SVG masking can compose layered linear compositions.

CCurran Kelleher
85% 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 sol lewit reproduction assignment

This example reproduces a Sol LeWitt-inspired drawing using D3 v7 selections and SVG masks. Three alternating vertical and horizontal stripe patterns are overlaid on the page, each masked by a large circle that reveals or hides the lines through contrasting black and white mask fills. The code builds the SVG structure with `d3.select`, generates stripe counts via `d3.range`, and applies masks through D3’s `attr` method, rendering the final output as SVG.

KKerim
84% 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