Skip to main content
SimilarExport ZIP
100%

API DOM

✓ Published0🌍 Public
Mmarc.chatton@outlook.com
Last edited Jan 6, 2026
Created on Jan 6, 2026

This example displays a full-screen abstract pattern of 100 horizontal and 100 vertical SVG rectangles, layered to create a grid. A white circular mask is applied to the horizontal bars, cropping them within a centered ring while the vertical bars span the entire viewport. The visualization is built entirely with the SVG DOM API, using `document.createElementNS` to construct each rect, mask, and circle, and relies on `window.innerWidth` and `window.innerHeight` to size the canvas. The code draws no explicit data, instead showcasing a programmatic composition inspired by a Sol LeWitt lesson.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

SVG + JS

This example uses JavaScript and the SVG API to construct a full-screen pattern of thin vertical and horizontal rectangles. It defines two SVG groups, each masked by a circle: one group displays vertical lines, the other horizontal lines, with the masks being inverses of each other. The resulting visualization shows a grid of perpendicular lines, with a circular region in the center showing only vertical lines, while the surrounding area displays only horizontal lines. The code programmatically creates SVG elements, including masks and groups, without using any external visualization libraries.

MMarta
80% match
Loading thumbnail…

Patterns

This example generates a full-screen abstract composition of 100 thin vertical rectangles. It uses the SVG namespace to create each rect element directly via JavaScript, setting the x position to increment by 20 pixels and giving each a fixed width of 10 pixels and a height equal to the window height. The visualization relies on `document.createElementNS` and `svg.appendChild` to build the pattern dynamically, without any external libraries.

Gguts
80% match
Loading thumbnail…

Sol LeWitt

This example recreates an abstract Sol LeWitt-inspired drawing using only DOM APIs. It shows a grid of thin horizontal and vertical bars overlaid with a circular mask, so the bars are visible only inside the circle. The code builds SVG elements dynamically with `document.createElementNS` and uses two SVG `<mask>` elements to define the visible region. Each bar is a `<rect>`; the horizontal set uses a mask that hides the center, while the vertical set uses an inverted mask, creating a subtle layered composition.

JJMeltzer92
79% match
Loading thumbnail…

HTML Starter

This example demonstrates a Sol LeWitt-inspired geometric composition rendered entirely in SVG. It shows a circular mask revealing a series of horizontal stripes across the full viewport. The code creates the mask using a white rectangle and a black circle, then draws 100 rectangles, each 20 pixels apart, applying the mask via the `url(#circle-mask)` reference. The implementation uses vanilla JavaScript DOM manipulation with `createElementNS` and `setAttribute`, avoiding any external libraries. The visualization is static, with the masked stripes forming the central visual effect against a clean, margin-free background.

Ffsenchyna@gmail.com
79% match
Loading thumbnail…

mySVGwork

This example displays a full-screen SVG canvas filled with one hundred vertical rectangles, each ten pixels wide and spaced twenty pixels apart. The code generates the graphic dynamically using the Document API's `createElementNS` method to construct SVG elements. The rectangles span the entire height of the browser window, creating a striped pattern that responds to the current viewport dimensions. The rendering approach uses a simple loop to position each shape incrementally across the horizontal axis.

DDonald Bagwell
79% 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
79% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates how SVG masks can create a circular window onto layered geometric patterns. Using the native SVG DOM API, the code constructs fifty horizontal and fifty vertical rectangles, each with vibrant default colors, and applies two different masks to control their visibility. The first mask, built from a black rectangle and white circle, reveals only the horizontal bars inside the circle, while the second mask, with inverted colors, shows the vertical bars outside the circle’s edge. The result is a clean, mask-driven interplay of striped shapes across the full browser viewport.

Aalexis.delacotte@gmail.com
79% match
Loading thumbnail…

Sol Lewitt Project

This example generates a geometric abstraction inspired by Sol LeWitt, layering horizontal and vertical striped rectangles over an SVG canvas. Two circular masks create a contrast where a central white circle reveals the full pattern, while the surrounding area inverts it. Using D3’s `select` and `range`, it appends over one hundred rect elements per axis, with widths and heights derived from window dimensions. The SVG `mask` elements, defined with white and black circles, control visibility, producing a precise, grid-based visual composition.

JJohnny Dodge
79% match