Lívia Rocha

@LiviaSR·3 public vizzes

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece, displaying a grid of horizontal and vertical stripes that intersect within two circular masks on a full-screen SVG canvas. The work uses overlapping masked rectangles to create the geometric pattern, with the horizontal lines visible inside one circle and vertical lines inside another, reversing the color relationship through complementary masks. The code builds the SVG entirely through the raw Document Object Model API, creating elements such as `rect`, `circle`, and `mask` with `createElementNS` and `setAttribute`. It generates 100 stripes in each direction, spacing them evenly to form the minimalist composition.

Sep 22, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt art piece, drawing 100 horizontal and 100 vertical rectangles across the entire viewport. It shows the interplay of overlapping lines masked to reveal a circular void in the center, where the horizontal bands cut through a white circle and the vertical bands appear around a black circle. The visualization uses D3 v6 selection methods and joins, with SVG mask elements, `range`, and `join` to bind data and render the geometric composition.

Sep 22, 2022

Loading thumbnail…

Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece as a series of thin vertical rectangles. The code generates 100 black SVG `<rect>` elements across the full screen width, each 10 pixels wide and spaced 20 pixels apart, creating a striped pattern. It uses the raw Document Object Model API with `document.createElementNS` and `setAttribute` to construct the SVG dynamically within an HTML page, with no external libraries or data sources.

Sep 22, 2022