Jude-Clarke

@Jude-Clarke·3 public vizzes

SOL LEWITT REPRODUCTION vertical

This example reproduces a Sol LeWitt-inspired drawing using raw SVG and JavaScript. It shows a grid of thin horizontal and vertical rectangles intersecting over a central circle, created without external libraries or frameworks. The code uses `document.createElementNS` to build SVG `<rect>` elements inside two masks (`circle-mask` and `circle-mask-2`) to clip alternating stripes, with the circle radius fixed at 200 pixels. The rendering approach relies entirely on native DOM manipulation and SVG mask attributes, producing a clean, generative geometric pattern.

Jun 5, 2022

Loading thumbnail…

SOL LEWITT REPRODUCTION

This example reproduces a Sol LeWitt-style drawing using only JavaScript and SVG, rendering a series of vertical black rectangles across a white canvas. The code creates a full-window SVG element and programmatically appends 100 narrow rectangles, each spaced 20 pixels apart with a width of 10 pixels, using the `createElementNS` API from the SVG specification. The rectangles stretch the full height of the viewport, producing a minimalist grid-like pattern that echoes LeWitt's geometric wall drawings. The piece demonstrates generative art through direct DOM manipulation without any external libraries.

Jun 5, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates how basic SVG shapes are used to compose a static vector graphic. It displays a circle, a yellow rectangle with a navy border, a diagonal line, and a black path forming an angular polyline. The rendering uses inline SVG elements within an HTML page, with explicit attributes for coordinates, dimensions, fill colors, stroke colors, and stroke widths. No JavaScript libraries or data sources are involved; the visualization is defined entirely through declarative SVG markup in the `index.html` file.

Jun 4, 2022