Maras13

@Maras13·4 public vizzes

Fork of Fork of Episode 3: Sol LeWitt in Vanilla JavaScript version 2

This example generates a colorful, generative art piece inspired by Sol LeWitt, built entirely with vanilla JavaScript and the SVG API. It renders a full-screen grid of randomly colored vertical rectangles, then overlays a large white circle in the center. A second grid of horizontal rectangles is clipped to that same circular shape using an SVG `<mask>`, creating a layered, intersecting pattern. All shapes are created dynamically via `document.createElementNS`, with colors assigned through randomized RGB values.

Sep 20, 2022

Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt drawing using only raw SVG and JavaScript, with no external libraries. It displays a grid of alternating horizontal and vertical lines that remain visible only within two intersecting circular masks, creating a dynamic visual interplay between the line directions. The code builds the SVG dynamically by appending a set of horizontal rectangles masked by a black/white circle, and vertical rectangles masked by an inverse circle, both centered on the screen. The rendering relies on native SVG mask elements and DOM manipulation in plain JavaScript.

Sep 20, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This is a generative art example that reproduces a Sol LeWitt piece as an SVG drawing. It shows a grid of horizontal and vertical bands intersecting within two circular masks at the center of the viewport. The rendering uses vanilla JavaScript with SVG’s `mask` and `circle` elements to alternate which bands are visible. The code creates 100 horizontal and 100 vertical rectangles, each 10 pixels thick, and uses two complementary masks to reveal either the horizontal or vertical set within a 200-pixel-radius circle, creating a crosshatched, layered effect.

Sep 20, 2022

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes, including overlapping circles, a line, and paths, within a 960x500 viewport. Anchored elements like the red and green circles at (150,50) and a navy line from (0,0) to (100,100) illustrate basic positioning and styling. The rendering uses raw SVG markup in an HTML body, with shapes defined via `<circle>`, `<line>`, and `<path>` elements. It also shows a commented-out `<rect>` and a path using cubic Bézier commands, highlighting static vector graphics without JavaScript libraries.

Sep 19, 2022