Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of D3 Starter

Public visualization

Viewing a saved revision (read-only)

08a4b7436a0f435ea2671a8c213de7e2

Fork of D3 Starter

0 stars0🌍 Public
HHaritscode
Last edited Aug 4, 2023
Created on Aug 4, 2023
Forked from D3 Starter

This example demonstrates a geometric masking effect by layering vertical and horizontal rectangles on an SVG canvas. Using D3 v7, it creates 100 vertical bars and 100 horizontal bars across the viewport, applying two SVG masks to reveal intersecting shapes. The first mask uses a white background with a black circle, while the second inverts the pattern, producing a cross-shaped visual interaction. The code relies on D3 selections, the `range()` generator, and SVG `mask` elements to achieve the composition.

AI-generated description

A demonstration of how to start using D3 version 6.