Michael Bell

@Klokabell·2 public vizzes

First D3 Thing

A full-screen SVG composition layers 100 horizontal and 100 vertical strips, each masked by a central circle. Two SVG masks (`circle-mask` and `circle-mask-2`) define the visible regions: the first reveals a black circle on a white background, while the second inverts it. The strips alternate orientation, with horizontal bands shown through the first mask and vertical bands through the second, creating a cross-hatched grid with a circular cutout in the center. The code uses D3's `selection` API to build the scene by appending elements to the SVG container, with dimensions tied to the browser window size.

Dec 1, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates the visual impact of SVG masks, using them to selectively reveal or hide overlapping shapes. It creates a full-screen canvas filled with horizontal and vertical stripes by generating one hundred thin rectangles for each direction. A circular mask isolates a central area where the stripes remain visible, while a second, inverted mask produces a contrasting ring effect by revealing the vertical stripes outside the circle. The code builds the SVG document dynamically through the Document Object Model, creating elements like rectangles and masks using `createElementNS` and `setAttribute` within JavaScript.

Nov 29, 2023