elisabet@pitch.io

Circles Sine Wave Animation D3

Fork of D3 Starter

This example demonstrates how D3 v7 masks can create striking geometric patterns from overlapping shapes. It uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to render seven distinct SVG symbols (like crosses and diamonds) into two complementary masks, one inverted. Over these masks, it places grids of black horizontal and vertical rectangles via SVG `rect` elements, with `d3.join` managing data-bound elements. The resulting composition shows the symbols as cutouts or solid forms depending on mask polarity, producing a dynamic interplay of positive and negative space across the full browser window.

Fork of Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using a grid of thin horizontal and vertical lines, clipped by two circular masks to create a layered, geometric composition. The SVG rendering is built with D3’s `select`, `append`, and `range` APIs, which generate the rect elements and apply the mask attributes. Two distinct masks, one with a black background and a white circle, the other inverted, control which parts of the line grid remain visible, yielding the final intersecting pattern.

Fork of Sol LeWitt Reproduction

Fork of Introduction of SVG

This example demonstrates the visual possibilities of raw SVG path data, presenting a grid of abstract, gradient-filled geometric polygons and overlapping shapes across a 906x548 canvas. It showcases how SVG elements, including `<path>`, `<defs>`, and animated gradients with `<animate>`, can create complex layered compositions without external charting libraries. The code, part of a React project, uses declarative SVG markup with CSS and JavaScript in an HTML page, featuring rotating radial and linear gradients (e.g., `rebeccapurple` to `aliceblue`) for dynamic color transitions. The rendering is purely SVG, relying on hand-coded path coordinates to construct an intricate visual collage.