Mika Kutila

@mpkuti·2 public vizzes

Full Sol LeWitt Piece Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js to generate SVG shapes. It layers horizontal and vertical striped rectangles, each filtered by a separate mask. The masks are built from alternating black and white bands containing geometric symbols, such as arcs and lines, drawn with the `symbol` and `symbols` APIs. By inverting the mask colors, the piece creates intersecting patterns across the full browser window, with the rendering using D3’s `select`, `range`, and `join` methods for efficient SVG construction.

Jun 12, 2022

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates basic SVG shape composition by layering a rounded rectangle, a circle, and rotated text to create a simple monogram-like graphic. The code uses the SVG `<rect>`, `<circle>`, and `<text>` elements directly within an HTML document, with the text element anchored at the center and rotated slightly via the `transform` attribute. Styling is applied through CSS, setting a black stroke, a white fill for the circle, and the Averia Serif Libre font. The rendering approach is static SVG, with fixed dimensions of 250 by 250 pixels, showing a fundamental layout of overlapping geometric forms.

Jun 4, 2022