Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published1🌍 Public

Last edited Oct 22, 2022

Created on Oct 22, 2022

This example generates a grid of horizontal and vertical stripes that intersect to create a geometric pattern. It uses SVG masks with circles to reveal or hide different sections of the stripes, producing a composition reminiscent of Sol LeWitt’s wall drawings. The code leverages D3 v7 selection methods, including `select`, `append`, and `join`, along with `range` to create 100 rectangles for each direction. The visualization is fully responsive, sized to the browser window, and includes hover effects that change the fill color to magenta.

AI-generated description

Creating Sol LeWitt Art with SVG and D3. Get it As seen in Right in Black & White Episode 4

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This example shows a grid of horizontal and vertical stripes across the full viewport, with a circular region at the center appearing brighter against the surrounding dark mask. The code uses D3 v7 selections to append two groups of rectangles, each generated from a `range(100)` data array, and assigns SVG masks to each group. The first mask contains a black rect with a white circle, while the second uses inverse colors, creating the overlapping visual effect.

HHaritscode

91% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates how to create a geometric pattern using D3 version 7 with SVG masks, combining horizontal and vertical striped rectangles that intersect to form a cross-shaped design. The visualization uses `d3.range` to generate 100 rectangles in each direction, applying two complementary SVG masks with circles to reveal or hide portions of the stripes. Additionally, the page displays a small dataset of names and numbers as text elements positioned along the top of the viewport, using D3's data join pattern with `selectAll` and `join`. The code imports `select` and `range` from the D3 library.

Ccm

90% match

Loading thumbnail…

Fork of Fork of D3 Starter

This example creates a black-on-white striped pattern using 100 horizontal and vertical rectangles, with the stripes clipped by two D3 SVG masks. The masks are defined with a central symbol glyph (drawn via `d3.symbol`) surrounded by concentric ring symbols, where one mask uses a white glyph on a black background and the other inverts the colors. The clipped stripe grid reveals the layered symbol composition and demonstrates D3’s `selectAll`, `join`, and `range` API for generating repeated elements.

HHaritscode

89% match

Loading thumbnail…

Fork of Fork of Sol LeWitt-d3-3

This example generates a grid-based abstract pattern using D3.js version 6, rendering SVG rectangles in horizontal and vertical orientations. The visualization uses the d3.select and d3.range functions to create 100 stripes of each direction, layered with SVG mask elements to create two circular cutout effects at the center of the viewport. The first mask uses a white circle on black, while the second uses a black circle on white, producing contrasting visibility through the overlapping stripes. The visualization fills the entire browser window dynamically by setting the width and height to the inner dimensions of the viewport.

Bbillzhou2005

88% match

Loading thumbnail…

Fork of D3 Starter

Two overlapping sets of purple stripes, one horizontal and one vertical, form a decorative lattice pattern on an SVG canvas. The visualization applies two distinct masks to reveal alternating sections, with each mask containing a sequence of symbols from D3’s `symbols` array, such as circles and crosses, placed at regular intervals. Built with D3 v7, the code uses `select`, `range`, `symbol`, and `symbols` to generate paths and rectangles, while `join` handles enter and update selections. The result demonstrates reusable mask generation for creating complex visual effects from simple geometric shapes.

Jjesusgaitan2014@hotmail.com

87% match

Loading thumbnail…

Fork of D3 Starter

This example shows how D3 version 7 can create layered geometric patterns by combining SVG masks with repeated rectangles. The visualization produces four distinct regions: a striped horizontal pattern with a cut-out square, a vertical stripe pattern, and two sections where horizontal or vertical bars are masked by a circle and square. The code constructs SVG elements directly using the DOM API, building masks (mask1 through mask4) that define which parts of the rectangles are visible. The approach relies on creating rectangles of varying widths and heights, applying masks that contain contrasting black and white shapes, and iterating 30 or 60 times to generate the repeating bar patterns across the screen.

HHaritscode

87% match

Loading thumbnail…

Fork of D3 Implementation first day

This example demonstrates a minimal, full-screen grid of horizontal and vertical stripes that become visible only through two circular windows. Built with D3.js version 7, it uses the `select` API to append SVG elements, `range` to generate 100 coordinates, and iterative `join` operations to create and position the rects. Two SVG masks—one with a central white circle on a black field, the other inverted—define the circular reveal for the horizontal and vertical stripe layers, respectively.

NNyashaBradleymhepo

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

87% match