Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Sole le witt variant fullfullfull

✓ Published0🌍 Public
Ccaitlin-woods
Last edited Oct 4, 2021
Created on Oct 4, 2021

A pattern of thin vertical and horizontal bars forms a grid across the full screen, with alternating rows and columns interrupted by large d3 symbol shapes. Two SVG masks, one inverted and one not, reveal different symbol sets drawn with d3.symbol and d3.range. The bars are rendered as rectangles positioned via d3 selection joins, while the masks filter which symbol patterns appear in each direction. The visualization uses d3 v6.6.1 with an SVG rendering approach, creating a layered, rhythmic composition from simple geometric elements.

AI-generated description

Sunrise/sunset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sole le witt variant fullfull

A striped grid of thin vertical and horizontal lines is drawn across the full window, with overlapping circular masks revealing or hiding portions of the pattern. The visualization uses d3.range to generate line positions and d3.symbol with a square symbol to create the mask shapes. By applying two masks—one inverted and one not—the grid lines appear in a layered, cross-shaped intersection. The rendering is done in SVG, with line spacing determined by the window width.

Ccaitlin-woods
91% match
Loading thumbnail…

Fork of Fork of Full Sol LeWitt Reproduction with D3

This visualization recreates a Sol LeWitt–style grid of horizontal and vertical lines, overlaid with two masks that reveal symbolic shapes in contrasting areas. The example uses D3 v6 to generate 100 rectangular strips in each direction, then applies SVG masks via `d3.select` and `append('mask')`. Each mask uses D3 symbol generators (`d3.symbol` and `d3.symbols`) to draw numbered geometric icons—circles, crosses, diamonds, and squares—in black or white, creating a layered optical effect. The code directly manipulates SVG elements and relies on the `range`, `join`, and `attr` APIs to build the repeating structure.

AAlpineStranger
86% match
Loading thumbnail…

Fork of Full Sol Lewitt Reproduction with D3

This visualization creates a grid of horizontal and vertical bars across the full browser window, using SVG masks to reveal d3 symbols (shapes) from the d3-shape module. It uses the `select`, `range`, `symbols`, and `symbol` functions from D3 v6 to generate a striped pattern with four distinct symbol types as mask cutouts. The code renders 100 rectangles in each orientation, with two masks applied to alternate between light and dark shading on the revealed shapes. The rendering adapts to the window’s dimensions and uses `join` to bind data to SVG elements.

Mmaximus2581
86% match
Loading thumbnail…

Fork of Full Sol LeWitt reproduction with D3

A grid of alternating black and white horizontal and vertical bars forms a woven pattern, with a circular mask revealing a black star shape on one layer and a white star on the other. The visualization uses a D3 SVG rendering with two masked rectangle groups, each drawn from 100 equally spaced strips. The masks combine a full-screen rect with a `d3.symbol` path of type `symbols[1]`, translated to the center, to create the contrasting star overlays.

ZzolboBatsaikhan
86% match
Loading thumbnail…

Fork of Fork of Full Sol LeWitt Reproduction Final with D3

This example draws a generative grid inspired by Sol LeWitt using SVG and D3. It fills the viewport with 100 horizontal and 100 vertical stripes, each masked so that only parts of the grid remain visible. Two separate masks, created with d3.mask, contain large D3 symbols (from d3.symbol) that act as cutouts or reveals, inverting their effect between the axes. The code uses d3.select, d3.range, and d3.symbol to build the composition programmatically, producing a layered geometric pattern that plays with visibility and form.

Kkwambokar
85% match
Loading thumbnail…

Fork of Fork

An intricate geometric grid emerges as overlapping vertical and horizontal stripes alternate visibility through two SVG masks. Rendered with D3 v6 in React, the visualization layers 100 thin rectangles in each direction, with each mask containing all five D3 symbol shapes repeated across the canvas. The first mask reveals stripes through filled symbols, while the inverted second mask hides them, creating a woven optical effect where symbol outlines define the pattern. The result is a dynamic, mask-driven interplay of shapes and lines.

AAitorGD
85% match
Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with d3

This example reproduces a Sol LeWitt-style grid of black horizontal and vertical bars, using d3-selection, d3-range, and d3-symbol to generate rectangular stripes overlaid with circular and triangular mask shapes. The SVG rendering creates 100 vertical and 100 horizontal rectangles, each masked by a different pattern of d3 symbols, producing a layered geometric composition. The two masks alternate inverted fills to control which stripes remain visible, resulting in a dynamic interplay of line and shape across the full window.

Bbjfmbeck
85% match
Loading thumbnail…

Fork of Fork of Fork of SVG Fundamentals - D3

This example demonstrates a full-screen grid of horizontal and vertical bars revealed through two circular masks. The visualization uses D3’s `select`, `range`, and data joins to generate 100 rectangles in each orientation, with CSS masks defining a central circular viewport. Two SVG masks—one with a black background and white circle, another inverted—control which bar segments remain visible, creating a crosshatch pattern that fades at the edges. The rendering relies on the SVG `<mask>` element and D3’s `join` API.

SSidney Oluoch
85% match