Skip to main content
SimilarExport ZIP
100%

Sol Lewitt in only JS

✓ Published0🌍 Public
Ppirani.sabah@gmail.com
Last edited Nov 12, 2024
Created on Nov 12, 2024

This example recreates Sol LeWitt’s geometric wall drawings using only JavaScript and D3. It renders a series of abstract, rule-based compositions—lines, arcs, grids, and color bands—on an SVG canvas. The code implements each drawing as a separate function that generates SVG elements using D3’s selection and data-binding methods, with shapes built from `d3.line`, `d3.arc`, and `d3.area` generators. Coordinates are computed mathematically, and the drawings are displayed in a grid layout, showcasing how algorithmic instructions translate into visual form without external data sources.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt in Vanilla JS

This example recreates Sol LeWitt’s geometric wall drawings using only vanilla JavaScript and SVG, with no external libraries. It generates a series of lines and shapes directly in the DOM via `document.createElementNS` to build an SVG canvas. The code demonstrates manual SVG construction by creating a root `svg` element, appending a background `rect`, and drawing minimal geometric forms. It highlights fundamental browser APIs for creating and manipulating SVG elements without D3’s helper functions.

TTobi Olabode
89% match
Loading thumbnail…

Sol LeWitt With D3

This example recreates a Sol LeWitt wall drawing using D3.js to render layered geometric abstractions in SVG. The visualization combines horizontal and vertical striped rectangles with concentric arc paths, all filtered through SVG masks that selectively reveal or hide portions of each shape across the viewport. The code uses D3 selections with `range()` to generate repeated elements, `.join()` for data binding, and `mask` attributes to composite intersecting forms. The result is a dynamic, generative composition that responds to the browser window dimensions while echoing LeWitt’s systematic, rule-based artistic style.

Jjony6290
87% match
Loading thumbnail…

Sol Lewitt with JS

This example generates an abstract geometric composition inspired by Sol LeWitt, using only JavaScript and the SVG API. It creates two nested masks—a circular cutout and a circular fill—to render a grid of vertical and horizontal rectangles that intersect only within a central circle. The vertical rectangles are visible outside the circle, while the horizontal ones appear only inside it, producing a clean, mask-based interaction. The code sets the SVG dimensions to the browser window size and constructs all shapes procedurally via the DOM API.

Ppirani.sabah@gmail.com
87% match
Loading thumbnail…

Sol LeWitt reproduction

This example reproduces a Sol LeWitt wall drawing as an SVG visualization. It shows a geometric composition of parallel lines and arcs within a square boundary, following the artist’s instructional aesthetic. The rendering is generated procedurally using plain JavaScript within an inline `<script>` tag, targeting an SVG element with fixed width and height. The code does not rely on external libraries or data sources; instead, it draws the artwork directly through SVG coordinates and path commands. The result is a clean, minimalist interpretation of LeWitt’s conceptual art, emphasizing rule-based visual output over data-driven input.

DDilara Bozkurt
86% match
Loading thumbnail…

Sol LeWitt reproduction

This example reproduces a Sol LeWitt wall drawing as an SVG visualization. It shows a geometric composition of parallel lines and arcs within a square boundary, following the artist’s instructional aesthetic. The rendering is generated procedurally using plain JavaScript within an inline `<script>` tag, targeting an SVG element with fixed width and height. The code does not rely on external libraries or data sources; instead, it draws the artwork directly through SVG coordinates and path commands. The result is a clean, minimalist interpretation of LeWitt’s conceptual art, emphasizing rule-based visual output over data-driven input.

DDilara Bozkurt
86% match
Loading thumbnail…

Sol Lewitt Reproduction javascript in html

This example reproduces a Sol LeWitt wall drawing using JavaScript and dynamically generated SVG. It shows a grid of horizontal and vertical stripes, with a circular area in the center where the pattern is inverted due to two overlapping SVG masks. The code creates the SVG namespace via `document.createElementNS` and builds the composition procedurally. The first mask hides the vertical lines within a 200-pixel radius circle, while the second mask hides the horizontal lines in that same region. The rendering relies entirely on core SVG and JavaScript APIs, with no external libraries.

GGullyPlook
86% match
Loading thumbnail…

Sol Lewitt with D3 Project (from Scratch)

This example recreates Sol LeWitt’s geometric wall drawings using D3.js, rendering a dense grid of thin vertical and horizontal lines across the full browser window. Two opposing masks, each containing five distinct symbols from D3’s `symbol` API, selectively hide or expose portions of the line grid, creating overlapping, patterned regions. The visualization uses `d3.select`, `range`, and `join` to generate 120 rectangles in each orientation, with SVG masks applied via `mask.append` and `attr('mask', ...)`. The result is a digital homage that blends generative code with minimalist art.

CCasualWanderer20XX
86% match
Loading thumbnail…

Sol Lewitt Piece

This example reproduces a Sol LeWitt-style drawing using only JavaScript and the Document Object Model (DOM). It generates a full-screen SVG canvas and fills it with 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, creating a rhythmic, wall-like grid pattern. The code uses `document.createElementNS` to construct SVG elements directly, without any external libraries, and sets the canvas dimensions to the browser window’s inner width and height. The rendering is purely algorithmic, based on a loop that iterates through horizontal positions, with no external data source.

Yyejichun@naver.com
86% match