gianlucaguerra

@gianlucaguerra·4 public vizzes

Ex4

The visualization reproduces a Sol LeWitt art piece using D3.js (v6.6.1), rendering a grid of 100 horizontal and 100 vertical stripes across the full viewport. Two masks (`mask-1` and `mask-2`) alternately apply black and white stripes and glyph shapes—drawn via `symbols` and `symbol`—onto the rectangles, creating an interlocking pattern where each mask inverts the other’s fill. The SVG output is generated procedurally from D3’s `select`, `range`, `symbol`, and `symbols` APIs, with masks constructed using joined `rect` and `path` elements.

Dec 20, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

A fork of a Sol LeWitt reproduction uses D3 v3 to generate an SVG grid of horizontal and vertical rectangles. Two D3 masks, created via the `symbol` and `symbols` APIs, are applied to the grid’s layers, with one mask inverted to reveal the artwork’s pattern. The code sets the drawing to the full browser window size and renders 100 rows and columns of thin strips. The piece is implemented with `select`, `range`, and `join` to build the SVG elements dynamically.

Dec 20, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction

An SVG-based art reproduction draws from Sol LeWitt’s geometric wall drawings, displaying a full-viewport canvas filled with a grid of thin, vertical black stripes. A centered circular mask clips these stripes, so the visible pattern forms a crisp disk bounded by a soft edge. The code constructs the SVG and mask dynamically via DOM methods, setting stripe width and count directly (100 stripes at 20-pixel intervals), and assigns the mask to each rectangle through the `mask` attribute. The result applies LeWitt’s systematic design to responsive, full-window rendering.

Nov 24, 2022

Loading thumbnail…

Text example

A single SVG text element renders the word "Hello" centered on a 960×500 canvas, demonstrating basic SVG text placement and styling. The text uses 72-pixel Share Tech font, loaded via Google Fonts, and is positioned using the `x="50%"` and `y="50%"` attributes. The minimal example shows how CSS sets the font family and hides overflow, while the SVG itself handles the centered layout without JavaScript or data binding.

Nov 23, 2022