Skip to main content
SimilarExport ZIP
100%

ATS - Symbols, Lines, Layers

✓ Published1🌍 Public
Xxscotta@yahoo.com
Last edited Aug 9, 2024
Created on Aug 9, 2024

This example reproduces a Sol LeWitt-inspired generative drawing with animated D3 symbols, lines, and layers. It displays 70 circular symbols arranged in a row, with their vertical positions oscillating via a sine function, while three red Wye symbols highlight shifting indices over time. A semi-transparent black curve, computed with `d3.line()` and `d3.curveNatural`, connects all points. Using `d3.symbol` for shapes and `setInterval` for animation, the SVG updates every 100 milliseconds, incrementing a time variable to drive the motion.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

ATS - D3 Sol Lewitt with CSS animation

This example reproduces a Sol LeWitt drawing as an animated SVG. It uses D3 to generate a grid of horizontal and vertical black rectangles that form a base pattern, and then applies CSS keyframe animations to seven distinct geometric symbols from `d3.symbols`. Each symbol is translated vertically and given a delayed animation start, creating a looping, staggered motion. The animation toggles stroke width and uses alternating black and white fills within a mask, generating a dynamic, layered composition that mimics the artist's systematic, rule-based style.

Xxscotta@yahoo.com
86% match
Loading thumbnail…

ATS - D3 traversing a sine wave

A set of black circles arranged in a sine wave pattern moves across the screen, with every sixth circle highlighted in red and enlarged. The wave animates continuously as the horizontal position of each circle remains fixed while its vertical position shifts over time. The code uses D3 v6 selections, `range`, and `scaleBand` to generate and update the SVG circle elements. A `setInterval` triggers a redraw every 100 milliseconds, and a direction variable reverses the highlighted index when it reaches the edges of the data array.

Xxscotta@yahoo.com
79% match
Loading thumbnail…

Using Symbols/Symbol - D3 Version Sol LeWitt Reproduction

This D3.js reproduction of a Sol LeWitt artwork generates an intricate grid of overlapping horizontal and vertical lines. The piece creates a dynamic visual interplay where lines are selectively revealed through two inverted SVG masks, each containing a large circular symbol. The code uses `d3.select`, `d3.append`, `d3.range`, and `d3.symbol` from D3 v6.6.1 to construct the SVG output. It renders 100 rectangles in each direction, with widths and heights calculated from the window dimensions, positioning the circular mask symbols at the canvas center.

EEdgar Cortez
77% match
Loading thumbnail…

Sol LeWitt representation using multiple symbols in D3

This example visualizes a Sol LeWitt-inspired geometric composition using an array of 120 unique symbols. It renders 120 horizontal and vertical rectangular strips that use two different masks to reveal or hide portions of the symbol paths, creating an intricate crosshatch pattern. Built with D3 v7, the code leverages `d3.select`, `d3.range`, and `d3.symbol` APIs to generate and position paths. The SVG output uses mask elements with inverted black-and-white fills to control layer visibility across the full-window canvas.

PPetrescu Alexandru
77% match
Loading thumbnail…

Sol LeWitt reproduction with d3 (symbols)

This example recreates a Sol LeWitt-inspired drawing using D3.js by layering two perpendicular sets of striped rectangles. Horizontal bars appear only within a circular region defined by an SVG mask, while vertical bars are masked to the inverse shape, creating a clean intersection of stripes inside the circle. The code uses `d3.range`, `d3.select`, SVG `rect` elements, and `symbol` with `symbols[2]` to generate the circle mask paths. The visualization is rendered entirely in the browser with D3 v7, filling the viewport dynamically.

FFrancisco Ibelles
77% match
Loading thumbnail…

Full Sol LeWitt Reproduction With D3 with multi symbols

A generative artwork reproduces Sol LeWitt's geometric style using D3.js and React. The SVG canvas displays interlocking horizontal and vertical lines, masked by D3 symbols (circles, crosses, diamonds, squares, stars, triangles, and wye shapes) positioned across the middle. Two masks invert the symbol fills to selectively reveal the line grid, creating layered visual intersections. The code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to render 100 rows and columns with 10-pixel line weights.

Wwgloss
76% match
Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing as a generative SVG artwork. It renders a grid of alternating horizontal and vertical black lines, which are partially revealed through two SVG masks that use large geometric symbols to create the negative space. The code uses D3’s `select`, `range`, `join`, and `symbol` APIs to build the composition, with the `symbol` function generating the mask paths. The result is a dynamic, layered interplay of lines and shapes that fills the browser window.

AAaron
76% match
Loading thumbnail…

Adding symbols D3 Sol LeWitt

This example reproduces a Sol LeWitt wall drawing using D3.js (v7.8.5) and SVG rendering. It creates a grid of horizontal and vertical stripes, overlaid with two masks that cut out large geometric symbols from D3's built-in `symbols` gallery. The code uses D3's `select`, `range`, `symbols`, `symbol`, and `join` APIs to build the composition procedurally. The alternating black-and-white masks generate the negative and positive shapes, visually echoing LeWitt's instructional art.

CCameron Wehr
76% match