Fork of lewis art with D3

100%

Fork of lewis art with D3

✓ Published1🌍 Public

Last edited Jan 23, 2023

Created on Jan 22, 2023

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of lewis art

This example renders intersecting horizontal and vertical line patterns within a circular boundary on an SVG canvas. It uses the SVG Mask API and multiple `mask` elements to selectively reveal or hide line segments, creating a geometric art composition. The code constructs rectangles dynamically with `document.createElementNS` and positions them at regular intervals based on the canvas dimensions. The rendering logic relies on native JavaScript math functions like `Math.ceil` and `Math.min` to calculate line counts and spacing.

Pparag776

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

86% match

Loading thumbnail…

Fork of Full So LeWitt Reproduction with D3

This visualization generates a grid of thin, evenly spaced horizontal and vertical lines across the entire viewport. Using D3’s `select`, `append`, and `join` APIs, it draws 48 rectangles in each direction, with each set masked by a large circular path created via `d3.symbol`. The mask inverts the line pattern within the circle, producing a striking contrast between the masked and unmasked regions. The rendering is done as SVG within a React starter template.

Mmax-31

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

86% match

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

86% match

Loading thumbnail…

Fork of Sol LeWitt With D3

This example recreates a Sol LeWitt-style generative drawing using D3.js within a React framework, rendered as SVG. The code builds layered horizontal and vertical black rectangles, masking portions with white and black shapes to create intersecting bands, plus a set of concentric elliptical paths that peek through a central circular opening. It uses D3’s `select` and `range` functions to generate data and chain SVG element creation, with `mask` elements controlling visibility. The composition fills the browser window, producing a geometric, abstract pattern.

Ccraig harbottle

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

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