Overpitch

@overpitch·2 public vizzes

eiwoqp

This example reproduces a Sol LeWitt art piece using only raw SVG and JavaScript, without any external libraries. It draws a grid of horizontal and vertical rectangles that are selectively revealed through two overlapping circular masks, creating a layered geometric composition. The code defines the masks with `<mask>` elements, using white and black fills to control visibility, and generates 100 rectangles in each direction with a simple loop. The result is a dynamic, minimalist pattern that responds to the browser window size.

Jan 7, 2024

Loading thumbnail…

Fork

This example demonstrates fundamental SVG shape drawing within a static 600×800 pixel canvas. It shows a rectangle outline, two circles (one filled red), horizontal and vertical lines, and a purple rectangular path, all positioned relative to the viewport. The code uses plain SVG markup as embedded in HTML, with no external JavaScript libraries or data binding. Styling is applied directly through attributes like `stroke`, `stroke-width`, and `fill`, illustrating basic vector graphics construction without animation or interaction.

Jan 6, 2024