Cereces

@Cereces·2 public vizzes

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using generative SVG. It shows a grid of alternating horizontal and vertical stripes, with two circular masks revealing different portions of the pattern: one mask displays the horizontal bands, the other the vertical bands. The code creates the visualization by appending rectangle elements to an SVG canvas and applying SVG `mask` definitions that use `circle` and `rect` shapes. The stripes are drawn with a loop, and the entire composition scales to the browser window’s dimensions.

Feb 22, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes within a single static scene, including circles, rectangles, lines, and a path. It applies visual styling properties directly in the markup, such as fill colors, stroke colors, and stroke widths, alongside coordinate attributes for positioning. The code uses no external JavaScript libraries; all elements are defined using raw SVG syntax embedded directly in the HTML page. The rendering approach relies solely on the browser’s native SVG support, presenting a minimal, hard-coded composition of geometric primitives.

Feb 22, 2023