mattykuch

@mattykuch·6 public vizzes

Ep. 3.4 - SoL LeWitt Art Reproduction Final - MK

This example reproduces a Sol LeWitt–style wall drawing using SVG masks to create intersecting stripe patterns. A central circular mask reveals a grid of horizontal and vertical colored bands, while a second inverted mask swaps the visible regions, producing a layered composition of alternating line orientations. The code builds all elements programmatically via the raw SVG DOM API, generating 100 horizontal and 100 vertical rectangles with the `createElementNS` method. No external libraries are used; the full-screen visualization relies solely on native SVG mask and rectangle elements.

Aug 10, 2022

Loading thumbnail…

Ep. 3.3 - SoL LeWitt Art Reproduction Vertical - MK

This example reproduces a Sol LeWitt-inspired drawing using the raw SVG API and the DOM’s `createElementNS` method. It renders 100 horizontal and 100 vertical gray rectangles in a grid, with all horizontal bars clipped by a circular mask applied via an SVG `<mask>` element. The mask, centered on the viewport, reveals only the horizontal strokes inside its 200-pixel radius while the vertical bars remain fully visible, creating a layered geometric pattern. The visualization uses `window.innerWidth` and `window.innerHeight` to size the full-screen canvas.

Aug 10, 2022

Loading thumbnail…

Ep. 3.2 - SoL LeWitt Art Reproduction - MK

This example reproduces a Sol LeWitt-style wall drawing using raw SVG. It shows a series of one hundred thin vertical rectangles evenly spaced across the full browser viewport, creating a minimalist striped pattern. The code generates the SVG element dynamically via the DOM API `document.createElementNS`, setting its width and height to match `window.innerWidth` and `window.innerHeight`. Each rectangle is positioned at a fixed increment of 20 pixels along the x-axis, with a width of 10 pixels and a height equal to the viewport, resulting in a regular, repeating visual rhythm.

Aug 9, 2022

Loading thumbnail…

Ep. 3.1 - Javascript Basics - MK

This example demonstrates the basics of JavaScript syntax and variables, contained entirely within an HTML page. The SVG element provides an empty rendering surface, while the script includes commented-out code showing console logging, arithmetic, const and let variable assignment, object property mutation, and a for loop. The visualization uses no external libraries or data sources, relying solely on vanilla JavaScript to illustrate fundamental programming concepts. The code is fully commented out, so the page renders as a blank SVG without any visible output or interactive behavior.

Aug 8, 2022

Loading thumbnail…

Ep. 2 - Pseudo Viz - MK

This example shows a simple geometric composition: a light pink rectangular frame containing a single gray five-pointed star, centered within the SVG canvas. The star is drawn using an SVG `path` element with explicit coordinate commands, while the background uses an SVG `rect` element with a custom fill color. The rendering relies entirely on static SVG markup in the HTML file, with no JavaScript libraries or data-binding frameworks involved. The visualization is a minimal pseudo-visualization that demonstrates basic vector shapes without any interactive or data-driven behavior.

Aug 5, 2022

Loading thumbnail…

Ep. 1 - SVG Basics - MK

This example demonstrates how to draw basic scalar vector graphics (SVG) shapes—including circles, rectangles, lines, and a path—using raw inline SVG elements. The blue and grey circles are positioned at different coordinates with a filled blue circle and a grey circle, while a stroked rectangle with no fill shows a border. A grey horizontal line spans from the left, and a black path outlines a polygonal shape with straight-line segments. The rendering occurs directly in an HTML page using the `<svg>` tag, with no external libraries. The shapes use explicit numeric attributes for coordinates, dimensions, and stroke properties.

Aug 4, 2022