Percivalnot

@Percivalnot·3 public vizzes

Fork of Full Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece by layering horizontal and vertical striped rectangles over a central circular window, creating a geometric grid with masked areas. Built with D3 v3 and rendered as SVG, it uses d3.select, d3.range, and data joins to generate 100 rect elements in each direction. Two SVG masks—one with a white circle on black, another inverted—control which stripes appear visible, producing a stark black-and-white composition that fills the entire browser viewport.

May 8, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using raw SVG and JavaScript, without any external libraries. It generates 100 horizontal and 100 vertical rectangles that intersect to form a grid across the entire viewport. Two SVG masks—a circular mask and an inverted circular mask—are applied to the rectangles, creating a sharp circular boundary with a single horizontal bar cutting through its center, while the surrounding area shows the full grid of vertical bars. The code uses `document.createElementNS` to build the SVG elements dynamically.

May 5, 2023

Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG shapes by rendering circles and ellipses on a gray-and-white canvas. The static composition uses absolute coordinates and fixed dimensions to position each primitive. The code directly employs React for structure, with SVG elements like `<circle>` and `<ellipse>` defining geometry, while CSS controls page layout and the overall visual presentation. The visualization serves as a bare-bones introduction to SVG markup within a web page.

May 5, 2023