gaudi84

@gaudi84·5 public vizzes

full_sol_lewitt_test_with_D3

This example generates an abstract geometric composition inspired by Sol LeWitt using D3.js, rendering horizontally and vertically striped rectangles across the full browser window. It employs SVG masks with `d3.symbol` and `d3.range` to create two distinct mask patterns—one containing the seven symbol types and another with a duplicated symbol—which selectively reveal the layered line grids. The `select`, `append`, and `join` APIs structure the SVG elements, while the `call` method applies the mask-rendering functions. The code uses D3 version 6.6.1 and dynamically sizes the output to the viewport.

Oct 31, 2022

Loading thumbnail…

sol_lewitt_test_with_D3

This example renders a generative geometric composition inspired by Sol LeWitt, using D3.js to create intersecting grids of thin horizontal and vertical rectangles. A circular mask, defined with SVG `mask` elements and `circle` shapes, reveals the grid pattern in the center while hiding it elsewhere. The code uses `select`, `range`, and `join` from D3 to efficiently generate and bind data to SVG `rect` elements, with the second mask inverting the visibility to produce a layered effect. The visualization fills the browser window and updates with the viewport size.

Oct 31, 2022

Loading thumbnail…

animate_test

A single SVG circle bounces vertically in an infinite loop, moving from a center point down and back up over a five-second cycle. The example demonstrates basic SVG animation using the native `animate` element, which specifies the `cy` attribute’s keyframe values, duration, and indeterminate repetition. The scene is rendered entirely with JavaScript-created SVG elements on a blank 960×960 canvas, with no external libraries or data sources involved.

Oct 31, 2022

Loading thumbnail…

sol_lewitt_test2

This visualization creates a dynamic, grid-based composition inspired by Sol LeWitt’s geometric art. It uses SVG masks to alternate which quadrants show vertical or horizontal lines, while the `animate` API pulses the line widths over a five-second loop. The code constructs all elements programmatically with raw SVG namespace methods, producing a subtly shifting checkerboard pattern of animated stripes.

Oct 31, 2022

Loading thumbnail…

sol_lewitt_test

This example generates a procedural drawing of vertical and horizontal hairlines, creating a grid-like pattern. The code uses a mask to hide the horizontal lines outside a central circle, while vertical lines are masked by the inverse shape, producing a dynamic interplay of intersecting strokes. The result is a derivative of Sol LeWitt’s generative art aesthetic. The drawing is created entirely with SVG elements, using JavaScript to append rectangles and mask definitions to the document.

Oct 30, 2022