Simon Krukowski

@mxfilerelatedcache·7 public vizzes

Fork of Full Sol Levitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing as a generative SVG composition. It renders a grid of thin horizontal and vertical lines across the full browser window, using a mask to create overlapping geometric patterns. The code builds two masked layers with `d3.select`, `d3.range`, and a custom `renderMask` function, applying contrasting black-and-white fills to shape the visible linework. Built with D3 v6, the visualization demonstrates SVG shape construction and masking techniques.

May 29, 2024

Loading thumbnail…

Full Sol Levitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3.js, rendering a grid of horizontal and vertical bars that are partially masked to create an interplay of solid and negative space. The visualization fills the entire browser window, with each bar’s position and thickness calculated from the window dimensions. The code employs D3’s `select`, `range`, and `symbol` APIs to generate SVG shapes and masks. Two `mask` elements, one inverted, apply a large circular path as a cutout, alternating which set of lines is visible through the circle, demonstrating core SVG masking techniques within a generative art context.

May 14, 2024

Loading thumbnail…

Sol Levitt D3

This example reproduces a Sol LeWitt-style drawing using SVG shapes. It generates a grid of horizontal and vertical striped lines across the full width and height of the browser window. Circular masks, created with `svg.append` and D3's `range`, reveal or hide portions of the lines to form two overlapping circular patterns. The visualization uses d3-selection and d3-array, with each rectangle drawn explicitly in SVG.

May 13, 2024

Loading thumbnail…

Sol Levitt Animated

Two layered grids of horizontal and vertical bars animate in opposing rotations, creating a shifting moiré effect. The foreground grid spins left while the background grid spins right, with circular masks revealing and concealing portions of each layer. Built with raw JavaScript and SVG, the visualization generates rectangles dynamically and applies CSS keyframe rotations to groups with distinct mask IDs.

May 8, 2024

Loading thumbnail…

Fork of Fork of Fork of Sol Levitt Vertical

This generative art piece recreates a Sol LeWitt-inspired wall drawing using only SVG shapes. It shows a grid of horizontal and vertical black stripes confined to a central circular area. The code builds two SVG masks: one cuts a hole in a black circle, while the other inverts it, so overlapping stripes are visible only within the ring. The stripes are generated with JavaScript loops, each rect targeted to a specific mask via `url(#circle-mask)`. The artwork adapts to the browser window dimensions.

May 8, 2024

Loading thumbnail…

Fork of Fork of SVG Fundamentals

This example reproduces a Sol LeWitt–style drawing by generating vertical black bars across the full browser viewport. The code creates an SVG element sized to the window’s inner dimensions and appends a series of `<rect>` elements spaced 20 pixels apart, each 10 pixels wide and as tall as the window. It uses the JavaScript DOM API (`createElementNS`, `setAttribute`, `appendChild`) to build the SVG programmatically. The resulting composition is a minimalist grid of alternating stripes, driven entirely by the current window size.

May 8, 2024

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates a set of four identical, rounded rectangular paths stacked vertically, each filled with a distinct color from purple to pale pink and outlined with a dark stroke. The SVG code uses the `<path>` element with a complex `d` attribute that combines horizontal and vertical lines with arc commands to create the pill-like shape. The rendering relies on raw SVG APIs within an HTML page, with the body set to hide overflow and a plain background rectangle. The path commands define a consistent geometry, shifting only the starting y-coordinate for each band.

May 7, 2024