Skip to main content
SimilarExport ZIP
100%

SVG Fundamentals

✓ Published0🌍 Public
Ssh_ip
Last edited Dec 3, 2024
Created on Nov 22, 2024
Forked from HTML Starter

This example reproduces a Sol LeWitt-inspired geometric composition using layered SVG elements and D3.js. It draws a grid of horizontal and vertical rectangles across the full viewport, with each line partially masked to create intricate overlapping patterns. The visualization uses D3’s `select`, `range`, `symbols`, and `symbol` APIs to generate two masks containing circular, triangular, and other symbol shapes. These masks apply inverse fill logic—one inverting the grid’s visibility—producing a dynamic interplay between the background lines and foreground symbolic cutouts. The rendering relies entirely on SVG attributes like `mask` and `fill`.

AI-generated description

A reproduction of a Sol LeWitt aart piece

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

An SVG-based visualization demonstrates how masking layers create intersecting geometric patterns. The code renders 100 horizontal and vertical rectangles using D3's `select` and `range`, each masked by a circular region. Two SVG masks invert their black-and-white fills, producing a visible cross-shaped overlap at the center where the circles align. The grid lines only appear within the masked circular areas, creating a dynamic interplay of light and dark stripes against a blank canvas.

GGeorgi Dimitrov
88% match
Loading thumbnail…

Full Sol LeWitt Reproduction in D3

This example recreates a Sol LeWitt-style geometric composition using overlapping horizontal and vertical grid lines rendered as SVG rectangles. The lines are selectively revealed or hidden through two complementary mask patterns, each containing a row of varied symbols that create organic interruptions in the strict grid. The visualization demonstrates D3’s data-joining capabilities and masking utilities, using `d3.select`, `d3.range`, and `d3.symbols` to generate the visual rhythm. A custom `renderMask` function builds the masks, with one mask using inverted fill logic to produce contrast across the full viewport.

Mmaciekawsq@gmail.com
88% match
Loading thumbnail…

Full of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js, rendering a full-screen SVG grid of overlapping horizontal and vertical bars. Two distinct masks, created with inverted black-and-white shapes from D3’s `symbol` API, selectively reveal or hide portions of the grid, producing layered, intersecting patterns. The code uses D3’s `select`, `range`, and `join` methods to efficiently generate and update the 100 rectangles per orientation, while the `mask` elements dynamically apply the symbolic clipping paths. The final visualization is a clean, generative art piece driven entirely by SVG and D3’s declarative API.

Jjmetzg11alpine
87% match
Loading thumbnail…

Sol LeWitt SVG

This example reproduces a Sol LeWitt-style drawing using D3.js and SVG, displaying a grid of horizontal and vertical striped bars that are partially revealed through circular masks. Two mask layers alternate between clipping the horizontal and vertical rectangles, creating a layered composition where the bars intersect and disappear within the central circle. The code uses D3’s `select`, `range`, and data joins (`join('rect')`) to generate 100 rectangles in each direction, with masks defined via SVG `<mask>` elements and applied through `attr('mask', 'url(#circle-mask)')`. The visualization renders full-window, with dimensions derived from `window.innerWidth` and `window.innerHeight`.

VValentine Solonechnyi
87% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates how D3.js SVG masks can combine overlapping rectangular grids with symbolic cutouts to create intricate geometric patterns. The visualization renders 100 horizontal and vertical bars whose intersection is selectively revealed through two complementary masks. The first mask shows white space around circle, triangle, and cross symbols, while the second inverts this effect. Using D3’s `select`, `range`, `symbol`, and `symbols` APIs, the code generates SVG paths and applies mask attributes dynamically. The result is a layered interplay of shapes, highlighting SVG’s masking capabilities for pattern composition.

HHenrique Peixoto
87% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates SVG fundamentals by drawing two sets of perpendicular parallel lines—horizontal bars from top to bottom and vertical bars from left to right—that intersect to form a grid. Two circular masks are applied to reveal or hide overlapping regions, creating a crossfade effect between the two line groups. The visualization uses D3’s `select`, `range`, and data join methods to generate the SVG elements, and defines two `<mask>` elements with black and white rectangles and circles to control visibility. The rendering relies entirely on SVG attributes like `width`, `height`, and `mask`, with no animation or interaction.

Ssugeelan@hotmail.com
87% match
Loading thumbnail…

Full Sol lewitt reproduction with D3 - exercise

This example reproduces a Sol LeWitt-style wall drawing using D3.js, rendered as an SVG of alternating horizontal and vertical grid lines. Two mask layers, each containing a different geometric symbol from D3’s symbol generator, selectively reveal or hide portions of the grid. The first mask is inverted to expose lines through one set of shapes, while the second uses a complementary fill to display the remaining pattern. The code relies on `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to construct the composition dynamically.

Kkakkanadjoy@yahoo.com
86% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates SVG fundamentals by layering horizontal and vertical striped rectangles that intersect to create a grid, with two masks applied to each set of stripes. D3’s `select`, `range`, `symbol`, and `symbols` APIs generate the stripes and position symbol paths within the masks. The `mask1` and `mask2` masks, filled with black and white respectively, reveal or hide portions of the grid based on the symbol shapes, producing a dynamic interplay of light and dark geometric patterns across the full canvas.

SSubhendu Karmakar
86% match