shape1

100%

✓ Published0🌍 Public

Last edited Dec 24, 2023

Created on Dec 20, 2023

Forked from Fork of Sol Lewitt vertical 2

This visualization uses D3 version 7.8.5 to render 100 horizontal and vertical rectangular bars as SVG shapes on a full-window canvas. The horizontal bars are layered with vertical bars, and each set is masked using SVG `<mask>` elements with D3's `symbols` API—the horizontal bars use a mask with black symbols on white, while the vertical bars apply an inverted mask with white symbols on black. The code constructs masks via a custom `renderMask` function that populates each mask with D3's built-in symbol paths (such as circles, crosses, and diamonds) at scaled 8000-pixel sizes, creating a geometric crosshatch pattern through the bar intersections.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Different Shape Reproduction with D3

Different Shape Reproduction with D3 demonstrates how SVG masks can be combined to create complex visual compositions. The visualization layers horizontal and vertical striped rectangles, each masked by a distinct pattern of D3 symbols. Using d3.select, d3.range, d3.symbol, and d3.symbols, the code generates 100 repeating bars in both directions, with a mask revealing symbol shapes in inverted and non-inverted forms. The React-framework example renders entirely in SVG, with masks applied via the renderMask function to produce the final overlapping effect.

Aahora

82% match

Loading thumbnail…

another Shapes SVG Fundamentals

This example uses SVG masks to create a circular reveal over a grid of horizontal and vertical filled rectangles. The visualization demonstrates how two complementary masks—one with a white circle on a black background and the other with a black circle on a white background—selectively show or hide the underlying stripes. Built with the D3.js library (v6), the code generates 100 horizontal bars and 100 vertical bars, then applies these masks to create an intersecting pattern of lines visible only within the defined circular regions. The data is procedurally generated in JavaScript using `range()` and a `for` loop, with rendering handled entirely through SVG elements.

Ssubratanp

82% match

Loading thumbnail…

box d3

This example displays a series of horizontal rectangular bars stacked vertically across the full screen, each referencing the same circular SVG mask. The bars are rendered as SVG `<rect>` elements created with D3's `selectAll` and `join` pattern, using a data array of 100 objects generated in a loop. The visualization relies on D3's `select` and `attr` methods to bind data and set position and dimensions, while the mask filters each bar to reveal a circular cutout effect.

MMahendra S H

81% match

Loading thumbnail…

Sol LeWitt-d3-shape

This example generates an abstract grid of horizontal and vertical stripes that are selectively masked by two inverted symbol shapes, using D3 v6. It renders SVG rectangles across the full viewport, with 100 horizontal bars and 100 vertical bars, each assigned a mask. The `d3.mask` API combines a white or black background rect with a large `d3.symbol` path (symbols[4], a cross) translated to the center. Two masks, one inverted, create a dynamic interplay between the geometric grid and the central symbol.

Bbillzhou2005

81% match

Loading thumbnail…

Visualization

This visualization creates a striped pattern of horizontal and vertical bars that are selectively revealed through two SVG masks. The masks use alternating black-and-white rectangles and D3 symbols to alternate visibility of the grid lines, producing an overlapping geometric composition. Built with D3 v7, the code uses `select`, `range`, `scaleBand`, and `symbol` to generate the shapes, while `append('mask')` and `attr('mask', ...)` control the clipping. The rectangles are sized based on `window.innerWidth` and `window.innerHeight`, with the pattern repeated 120 times across the screen.

DDaniel R Handoko

80% match

Loading thumbnail…

bar chart practice

This example creates an abstract geometric composition using D3.js within a React project. It draws 100 horizontal and vertical bars across the full screen, then applies two distinct circular masks to create cross-shaped and bordered effects. The SVG rendering uses D3’s `select`, `range`, and `join` APIs to generate the rectangles, while two custom masks—one with a black background and white circle, another inverted—produce the visual contrast against the dark background.

Cchiiii-beginner

80% match

Loading thumbnail…

D3 mask all shapes

This example demonstrates how D3.js mask elements can selectively hide or reveal overlapping shapes, creating a geometric grid pattern of 100 horizontal and vertical rectangles. The visualization uses two SVG masks with inverted color schemes—one black with white symbols and one white with black symbols—to control visibility across the layers. It employs `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate and position the mask paths, while SVG rects and mask attributes handle the rendering. The code adapts automatically to the browser viewport dimensions.

JJetlinZ

80% match

Loading thumbnail…

D3 starter

This example demonstrates a simple SVG-based visualization using D3 v7 within a React-compatible setup, rendering 100 horizontal bars across the full viewport width, each 10 pixels tall. The bars are created with `d3.range` and `svg.selectAll(...).join('rect')`, masked by a circular `mask` element with the ID `circle-mask`. The mask, appending a white background, visually clips the bars through SVG masking. The code imports `select` and `range` from the D3 library, though the HTML page is minimal and the JavaScript is designed to run in a browser environment.

Ggyan9427

80% match