Skip to main content
100%

Fork of D3 Starter

✓ Published0🌍 Public
HHaritscode
Last edited Aug 4, 2023
Created on Aug 4, 2023
Forked from D3 Starter

This example shows how D3 version 7 can create layered geometric patterns by combining SVG masks with repeated rectangles. The visualization produces four distinct regions: a striped horizontal pattern with a cut-out square, a vertical stripe pattern, and two sections where horizontal or vertical bars are masked by a circle and square. The code constructs SVG elements directly using the DOM API, building masks (mask1 through mask4) that define which parts of the rectangles are visible. The approach relies on creating rectangles of varying widths and heights, applying masks that contain contrasting black and white shapes, and iterating 30 or 60 times to generate the repeating bar patterns across the screen.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes