Belma Besirevic

@BelmaBesirevic·4 public vizzes

Fork of Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric drawing using only SVG elements and masks. It displays a grid of 100 horizontal and vertical stripes that are visible only within two circular regions at the center of the canvas. The code creates the pattern by appending rectangle elements with alternating orientations, applying SVG `mask` and `mask2` elements with circle and inverted circle cutouts to control visibility. It relies on raw DOM manipulation via `createElementNS` and `setAttribute` rather than D3, with no external data source or animation.

May 15, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This piece renders an abstract, generative composition inspired by Sol LeWitt’s wall drawings. It shows a circular mask overlaid with two sets of alternating horizontal and vertical stripes, creating a crosshatch pattern that fades to reveal a central white circle against a black background. The code uses the SVG API via JavaScript to create a full-viewport canvas, dynamically setting element attributes like width, height, and mask references. Two SVG masks (`circle-mask` and `circle-mask-2`) define the visible regions for the 100 horizontal and vertical rectangles drawn in looping iterations.

May 15, 2023

Loading thumbnail…

Sol Lewitt SVG Artwork

This example renders geometric SVG artwork inspired by Sol LeWitt, using a React framework with hard-coded SVG elements. The visualization displays a series of colorful, grid-based compositions with varying line patterns, shapes, and color blocks arranged across a 960x500 canvas. The code defines these patterns directly in the SVG markup, creating a static, non-interactive piece that emphasizes the artist's systematic approach to form and color. The rendering relies entirely on native SVG capabilities within the React component structure.

May 15, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG path rendering and CSS animation. A single red heart-shaped path is drawn using the SVG `path` element with an arc command (`a`) and line commands (`l`). The path is animated with a CSS `@keyframes` rule named `pulse`, which scales the element between 1 and 1.2 over a 2-second infinite loop. The code uses raw HTML, CSS, and JavaScript within a minimal page structure, with the SVG embedded directly in the body. No external libraries are used, showcasing core web visualization techniques.

May 14, 2023