Sol LeWitt in Vanilla JavaScript

100%

Sol LeWitt in Vanilla JavaScript

✓ Published2🌍 Public

Last edited Mar 16, 2023

Created on Mar 8, 2023

This example recreates a Sol LeWitt wall drawing using only Vanilla JavaScript and the SVG API, with no external libraries. The SVG dynamically adapts to the browser window’s dimensions, generating a composition of alternating horizontal and vertical bars. It uses SVG `<mask>` elements with circles to clip the bar patterns, revealing a circular region in the center where the orientation of the lines shifts, mimicking the geometric interplay found in LeWitt’s conceptual art. The code builds all shapes procedurally via `createElementNS`.

AI-generated description

A reproduction of a Sol LeWitt art piece.

  // creating a mask
  const mask_front = document.createElementNS(
    'http://www.w3.org/2000/svg',
    'mask'
  );
  mask_front.setAttribute('id', 'mask_front');
  svg.appendChild(mask_front);

  // creating a circle in this mask
  const circle = document.createElementNS(
    'http://www.w3.org/2000/svg',
    'circle'
  );
  circle.setAttribute('cx', width / 2);
  circle.setAttribute('cy', height / 2);
  circle.setAttribute('r', 250);
  circle.setAttribute('fill', "white");
  mask_front.appendChild(circle);
  
  // creating horizontal bars
  const m = 100;
  for (let i = 0; i < m; i++) {
    const rect = document.createElementNS(
      'http://www.w3.org/2000/svg',
      'rect'
    );
    rect.setAttribute('y', 20 * i);
    rect.setAttribute('width', 1000);
    rect.setAttribute('height', 10);
    rect.setAttribute("mask", "url(#mask_front)");
    svg.appendChild(rect);
  }

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Vanilla JavaScript

This example reproduces a Sol LeWitt wall drawing using only Vanilla JavaScript and the SVG API. It constructs an SVG scene with a white rectangle and a black circle defined as a mask, then renders 100 horizontal stripes as individual SVG `<rect>` elements. Each rectangle’s visibility is filtered through the circular mask, creating the artwork’s characteristic banded composition within a circular boundary. The code dynamically sets the canvas to the browser’s full window dimensions and uses no external libraries or data sources.

Ppeter@attachmentdivision.com

92% match

Loading thumbnail…

Sol LeWitt Repro w/ vanilla JS

A full-screen SVG reproduction of a Sol LeWitt wall drawing displays two interlocking sets of thin vertical and horizontal bars. A central circular mask inverts the visibility of the two grids, creating a stark contrast between the denser vertical lines inside the circle and the horizontal lines outside. The piece is built with vanilla JavaScript, dynamically creating SVG elements and applying mask definitions without any external libraries. The code generates one hundred vertical and one hundred horizontal rectangles, using the `mask` attribute to alternate their visibility based on the circle’s boundary.

Hhelloelectro

91% match

Loading thumbnail…

SolLeWitt in VanilaJS

This example generates a geometric composition inspired by Sol LeWitt using only vanilla JavaScript and the SVG DOM API. It creates an SVG canvas sized to the viewport, then draws alternating horizontal and vertical bars whose visibility is controlled by two circular masks. The top mask applies a black circular cutout over white bars, while the bottom mask uses a white circle to reveal underlying horizontal bars, producing an intersecting circular pattern. The code relies on `document.createElementNS` and `setAttribute` for all SVG elements, with no external libraries.

JJun Alvarado

91% match

Loading thumbnail…

Sol LeWitt in Vanilla JavaScript (2)

This example reproduces a Sol LeWitt art piece using only vanilla JavaScript and the SVG API. It shows a grid of black vertical and horizontal rectangles intersecting within a central white area, created through layered masking. The code builds an SVG mask with a large white rectangle and a smaller black rectangle to hide portions of the vertical stripes, while a foreground mask with a white center reveals the horizontal stripes within the same central region. The rendering approach relies on programmatic SVG element creation and mask compositing.

Xxinyuwangxyw

91% match

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

90% match

Loading thumbnail…

Sol LeWitt in Vanilla JS

This example renders a generative art piece inspired by Sol LeWitt using vanilla JavaScript and SVG. It creates a full-screen SVG canvas and populates it with a series of vertical rectangles, each 10 pixels wide, spaced 20 pixels apart across the entire window width. The code uses `document.createElementNS` and `setAttribute` to construct SVG elements dynamically, looping to cover the viewport’s width. The result is a minimal, grid-based composition that directly translates the artist’s geometric aesthetic into a browser-based visualization.

Jjv

88% match

Loading thumbnail…

Sol Lewitt Vanilla JS Project Attempt #2

This example generates an interactive Sol LeWitt-inspired drawing using only native JavaScript and SVG APIs, without external libraries. It shows a grid of thin horizontal and vertical lines across the full browser viewport, masked by two circles at the center. The first mask reveals horizontal bars within a dark circle, while the second mask inverts the effect for vertical bars in a contrasting ring, creating a crosshatched circular pattern that stands out against the plain background. The code creates elements dynamically via `document.createElementNS` and applies masks (`circle-mask`, `circle-mask-2`) to clip the repeated rectangles.

CCasualWanderer20XX

88% match

Loading thumbnail…

Sol LeWitt Exercise with JS

An SVG built with vanilla JavaScript recreates a Sol LeWitt-inspired wall drawing by layering two sets of 100 striped rectangles. Horizontal and vertical black bars cross the full viewport, but a pair of circular masks restricts visibility: one mask shows only the horizontal stripes inside a 200-pixel circle, while the second reveals vertical stripes outside that same radius. The result is a clean, conceptual grid where the two orientations visually swap at the circle's boundary, using the SVG `mask` element and dynamic element creation via `document.createElementNS`.

Ppkdvalis

88% match