Skip to main content
SimilarExport ZIP
100%

Fork of lowis awesome

✓ Published0🌍 Public
Pparag776
Last edited Jan 23, 2023
Created on Jan 23, 2023

This example uses the d3 library to render geometric line patterns within outlined symbols. It creates a grid of masked horizontal and vertical rectangles, alternating masks to display a symbol’s shape in contrast with its inverse. The SVG output uses `d3.symbol()` and `d3.range()` to generate each symbol and line count, producing a tiled, monochrome composition.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of d3 sol lewit

This visualization generates a grid of horizontal and vertical rectangles on an SVG canvas, with two masks that reveal or hide different symbol shapes across the grid. The project uses D3 v6 APIs including `select`, `range`, `symbols`, and `symbol` to render the masked patterns. The two masks, created via `renderMask`, alternate between white and black backgrounds with the opposite fill for the symbols, producing a moiré-like interplay between the line grid and the overlaid symbol clusters. The code runs on a React framework and uses raw SVG rendering with dynamic window dimensions.

HHéloïse Feldmann
84% match
Loading thumbnail…

Fork of D3 beginning

This example displays an abstract geometric pattern of thin horizontal and vertical lines across the full browser viewport. The lines are selectively revealed or hidden through two SVG masks, each populated with D3 symbols (such as circles and crosses) arranged in a row. Using D3’s selection join, the code creates 100 rectangles per axis and applies the masks via `svg.call`. The rendering is done entirely with SVG elements in React, leveraging d3’s `symbol` and `range` APIs.

AAleOG
84% match
Loading thumbnail…

Fork of lewis art with D3

This example generates a geometric pattern of horizontal and vertical rectangles overlaid on an SVG canvas. The rectangles are masked by circular regions, creating an intersecting grid with a circular reveal effect centered within the 960 by 500 viewport. The code uses D3.js version 7.8.2 to build the SVG elements, compute range data for the grid lines, and apply SVG masks to control visibility. The pattern emerges from alternating masks: one with a white circle on a transparent background and another with a black circle on a white background, producing a crosshatch-like composition.

Pparag776
83% 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
82% match
Loading thumbnail…

Fork of Loop of Sol Lewitt reproduction with d3

This example reproduces Sol LeWitt’s looping wall drawing using D3 v6 and React. It renders 100 horizontal and 100 vertical SVG rectangles across the full browser window, each masked by a set of geometric symbols from the `symbols` array. The code uses D3’s `select`, `range`, and `symbol` APIs to generate the grid and apply two inverted masks, creating a layered, monochrome composition with alternating visual density.

IissaHalabi99
81% 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
80% match
Loading thumbnail…

Fork of d3-get-it-right-04

This example creates a hundred horizontal and vertical striped rectangles overlaid to form a grid, with a symbol-shaped hole cut through the pattern. The code uses d3.select, d3.range, and d3.join to bind data to SVG rect elements. Two SVG masks, one inverted and one normal, are built with d3.symbol and a d3.symbols[0] path (a circle) to punch a central circular reveal. The result shows layered d3.mask and d3.symbol APIs combined on a full-window SVG canvas.

Tthymdi
80% match
Loading thumbnail…

Fork of D3-Sol-LeWitt--2

This visualization creates an abstract geometric composition by layering two sets of grid lines—horizontal and vertical rectangles—each masked by distinct symbolic shapes. It renders 100 evenly spaced bars in each direction, using SVG masks to reveal the underlying grid only within the paths of predefined symbols. The piece is built with React and D3.js, leveraging the `symbols` and `symbol` functions to generate complex path data, and the `selectAll`/`join` API to efficiently manage SVG elements. The code directly responds to the browser window size, scaling the entire artwork to fill the viewport.

AAbdulafeez-okewunmi
80% match