Skip to main content
SimilarExport ZIP
100%

Sol LeWitt learn something about mask

✓ Published1🌍 Public
Ddmr
Last edited Nov 15, 2021
Created on Nov 14, 2021

This example presents a set of minimal SVG experiments that illustrate fundamental concepts like the `viewBox` coordinate system, default pixel dimensions, and basic geometric shapes. Consecutive squares with circles show how changing the `viewBox` alters the visible portion of the artwork, acting as a crop or virtual artboard. The page also demonstrates basic polygons and rectangles with varied fills, strokes, and positioning, using raw SVG elements within an HTML document. The code relies on the core SVG API for rendering, not external libraries.

AI-generated description

learn how to use mask before applying it to Sol LeWitt

mdn mask

viewbox

The viewBox attribute defines the position and dimension, in user space, of an SVG viewport. The value of the viewBox attribute is a list of four numbers:

  • min-x
  • min-y
  • width
  • height

The numbers separated by whitespace and/or a comma, which specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated SVG element

viewbox version 2

which part of the SVG is visible - the artboard

It's the crop of the underlying image

  • starting x
  • starting y
  • width
  • height

There is an implied aspect ratio which van be overridden using the preserveAspectRatio attribute

polygon

The polygon element defines a closed shape consisting of a set of connected straight line segments. The last point is connected to the first point.

Learn SVG through 24 examples

  • SVG width and height default to pixels
  • viewBox is coordinates
  • For example, 50px by 50px "image" can have a coordinate system for x and y of 0 to 100
  • Then for CIRCLE cx, cy and r specified as coordinates
MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt

This example reproduces Sol LeWitt’s geometric art using an SVG rendering approach. It displays a grid of horizontal and vertical stripes, but only within a circular region at the center of the screen. The code creates SVG masks, specifically `circle-mask` and `circle-mask2`, to clip two sets of 100 rectangle elements. The first set uses a white-on-black mask for horizontal stripes, while the second uses a black-on-white mask for vertical stripes, producing a clean, intersecting pattern. The canvas automatically scales to the full window dimensions.

Aamrselaraby
84% match
Loading thumbnail…

Sol LeWitt

This example reproduces a Sol LeWitt drawing using SVG. It renders a grid of horizontal and vertical stripes, with a circular mask creating the illusion of layered bands across the canvas. The stripes are generated programmatically in JavaScript, using `document.createElementNS` to build SVG `rect` elements. Two complementary masks (`circle-mask` and `circle-mask-2`) alternate which stripe orientation is visible, producing a clean geometric composition that adapts to the full browser window size.

Aainhoadieruiz@gmail.com
84% match
Loading thumbnail…

Sol LeWitt

This example reproduces a Sol LeWitt-inspired geometric drawing using SVG. A series of 100 horizontal rectangles, each 10 pixels tall and spaced 20 pixels apart, render across the full screen width. A circular mask centered on the viewport clips these rectangles, revealing only the lines inside the circle. The visualization uses plain JavaScript to create SVG elements dynamically, with no external libraries, and responds to the browser window’s dimensions for sizing.

Ttonkocorp
83% match
Loading thumbnail…

Sol LeWitt

This example renders a generative SVG artwork inspired by Sol LeWitt. It uses raw JavaScript to create an SVG element sized to the browser window, then draws 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the full height of the canvas. A circular mask, defined in SVG and applied via the `mask` attribute, clips these rectangles, revealing a bold, striped disk centered on the screen. The piece demonstrates programmatic shape creation and SVG masking without any external libraries.

Bbillzhou2005
82% 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
82% 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
82% match
Loading thumbnail…

Sol LeWitt Reproduction-Learning-pt1

This example reproduces a Sol LeWitt art piece using SVG, displaying a central circle where horizontal and vertical lines intersect against a contrasting background. The circle is highlighted with yellow horizontal stripes, while the surrounding area features red vertical lines. The code uses raw SVG APIs to construct masks, specifically `createElementNS` for elements like `rect`, `circle`, and `mask`, defining visible regions. Horizontal stripes are masked by a white circle, while vertical lines use a rectangular mask with a transparent cutout, creating the layered geometric composition.

Kkavitha G
82% match
Loading thumbnail…

Sol LeWitt Reproduction Mask

This visualization reproduces a Sol LeWitt art piece using a simple SVG mask to create a circular viewing window. It shows a series of horizontal black-and-white striped bars filling the entire screen, stopped by a central circular hole that reveals the full rectangle. The code builds an SVG via DOM manipulation, defines a mask containing a white rectangle and black circle, then appends 100 thin rect elements with the mask applied to create the striped pattern. The rendering relies on core SVG APIs and no external libraries.

AAndre J Denais
82% match