Erika Tomakic

@escapologit·3 public vizzes

Fork of D3 Starter

This example demonstrates a generative grid of horizontal and vertical striped bars rendered as an SVG, overlaid with circular mask effects that reveal or conceal portions of the pattern. The code uses D3 v3’s selection, selection, range, symbols, and symbol APIs, appending rectangles to an SVG canvas sized to the window. Two masks are created via the renderMask function, each with a path drawn from the symbol API’s circle shape, applying inverted fill logic to produce contrasting visibility. The visualization is purely procedural, with no external data source.

Dec 11, 2024

Loading thumbnail…

D3 Starter

This example introduces D3.js by recreating a Sol LeWitt-inspired generative art piece. It demonstrates foundational SVG concepts and progressive coding techniques, from static shapes to dynamic, programmatic generation. The code uses D3's `select` and `range` functions to efficiently create a grid of horizontal and vertical rectangles, which are then masked by two overlapping circles. The rendering is done via SVG, and the final output is a visual pattern where the intersection of the circular masks creates a striking contrast. The example also includes a vanilla JavaScript version for comparison, highlighting the declarative power of D3's API.

Dec 11, 2024

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt drawing by layering two sets of striped rectangles over a central circular mask. A grid of horizontal and vertical bars is clipped to reveal a circle in the center, while the surrounding area shows only one orientation of stripes. Using plain JavaScript and the SVG API, it dynamically creates `rect` elements and applies two `mask` definitions with intersecting `circle` and `rect` shapes to alternate the visible stripes. The code runs entirely in the browser with no external libraries.

Dec 11, 2024