Fork of SolLeWitt - convert from VanillaJS to D3

100%

Fork of SolLeWitt - convert from VanillaJS to D3

✓ Published2🌍 Public

Last edited Aug 17, 2022

Created on Aug 16, 2022

This visualization generates a geometric pattern using Sol LeWitt-inspired horizontal and vertical bars. It uses `d3.select` and `d3.range` to create rectangles, with SVG masks (`mask_bottom` and `mask_top`) that reveal or hide parts of the bars based on circular fill regions. The code computes bar positions based on window dimensions and uses the D3 `join` API to efficiently append and style `<rect>` elements. The final composition displays a grid of bars with a circular cutout effect in the center.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt-d3-2

This visualization generates a grid of horizontal and vertical bars across the full browser window, then applies circular SVG masks to reveal a bold geometric composition. Using d3 selections and `range()`, it appends 100 rectangles in each orientation, with a black-and-white mask pair creating a contrasting ring pattern at the center. The code uses D3 v6 with `select`, `range`, and `join`, rendering to SVG while dynamically sizing to the viewport. This mirrors Sol LeWitt’s minimalist wall drawings through a React-compatible, single-file example.

Bbillzhou2005

91% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces Sol LeWitt’s drawing as an animated grid of horizontal and vertical bars. The bars are revealed through masked symbol shapes, with alternating visibility that creates a dynamic interplay between line and form. Built with D3 v3 in React, it uses `select`, `range`, `symbol`, `symbols`, `scaleBand`, and `easeLinear` to generate SVG elements and animate transitions. A custom mask function applies white and black fills to alternate regions, while the underlying JavaScript drives the 50-second vertical bar animation.

KKj

91% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction D3

This visualization reproduces Sol LeWitt’s geometric art by rendering 100 horizontal bars of varying heights, arranged to form an abstract pattern. The bars are drawn as SVG rectangles, each with a fixed width and height, positioned vertically based on an index from `d3.range`. A circular `mask` clips the rectangles, creating a rounded composition. The code uses D3 v7’s `select` and `range` to bind data and join elements, with a minimal black-on-white aesthetic. The rendering is static, driven purely by the data values from the range, without interaction or animation.

DDyor69

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style grid of horizontal and vertical bars, with the pattern masked to reveal a central circle. It uses D3’s `select` and `range` to generate 100 rectangular strips in each direction, while two SVG `<mask>` elements—one inverted—combine to create the circular cutout effect. The code runs in a React environment and renders vector graphics as SVG.

Ccharlieronchetti@gmail.com

90% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt art piece using D3, generating a series of horizontal bars that are clipped by a circular mask. The visualization fills the entire browser window with alternating offset rectangles, creating a geometric pattern. The code uses D3's `select` and `range` functions to build SVG elements, though the mask and circle logic is present but commented out. The rendered output shows a grid of colored bands restricted to a central circular area.

Bbtlhgboy@icloud.com

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

89% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3. It displays a series of 100 horizontal bars overlaid with a circular mask that reveals only the central area of the pattern. Built with the D3 `select` and `range` APIs, the code constructs SVG elements via raw `document.createElementNS` calls and applies a mask to hide bars outside the circle. The design uses black rectangles on a white background, with the circle placed at the center of the viewport.

AAdeelah Mir

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

89% match