Indranil Biswas

@glitch401·5 public vizzes

D3 Sol LeWitt Reproduction

This D3.js example reproduces a Sol LeWitt wall drawing using generated SVG rects and masks. It creates two circular masks over a grid of horizontal and vertical bars, with one mask inverting the circle to show a ring pattern. The visualization uses native SVG mask elements and the d3 selection API, though the rendering is primarily procedural JavaScript manipulating the DOM. The piece fills the browser window dynamically using window dimensions, generating 100 rects in each orientation.

Mar 13, 2024

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style geometric piece using only SVG and JavaScript, creating an intricate grid of horizontal and vertical lines. It shows a large circular mask revealing a woven pattern of alternating line directions, with the circle centered on a full-screen canvas. The code builds the visualization by constructing SVG elements via the DOM API (`document.createElementNS`), defining two masks (`circle-mask` and `circle-mask-2`) to clip horizontal and vertical line groups. It generates 100 horizontal rectangles and 100 vertical rectangles, each 10 pixels thick, with the masks controlling visibility to create the overlapping effect. No external libraries are used; the rendering relies purely on raw SVG and JavaScript.

Mar 6, 2024

Loading thumbnail…

Sol LeWitt Reproduction

This reproduction of a Sol LeWitt art piece uses an SVG canvas to display a geometric, rule-based composition. The visualization shows a grid of intersecting lines and shapes that mimic LeWitt’s algorithmic style, with the code relying on basic JavaScript to generate the pattern programmatically. The rendering uses the SVG `width` and `height` attributes, while the script defines simple functions and variables to control the placement and repetition of forms. Although the provided HTML includes commented-out code for adding numbers or objects, the active script does not yet implement any interactive or dynamic behavior, leaving the static drawing as the core output. The approach highlights how minimal coding can emulate conceptual art.

Mar 6, 2024

Loading thumbnail…

Fork of Adil-sunRise-svg

A looping animated sunrise and sunset scene rendered entirely as a static SVG with embedded SMIL animations. The sky gradient cycles between aliceblue and indigo, while the sun’s vertical position oscillates via an `animate` element on its `cy` attribute. Two overlapping landscape paths use `linearGradient` fills that shift color in sync with the 15-second cycle. The visualization relies on native SVG `<radialGradient>`, `<linearGradient>`, and `<animate>` features without external JavaScript libraries, and the landscape shapes are hand-coded path data.

Feb 21, 2024

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamentals of SVG rendering and interactivity using a simple heart shape drawn with SVG path commands. The heart’s geometry is defined with arcs and quadratic Bézier curves within a 100×100 viewBox, while CSS handles layout centering and a hover effect that scales the shape and changes its fill color. The code uses inline SVG elements and CSS transitions for smooth animations. It shows how basic vector graphics can be created and styled without additional libraries, relying purely on the browser’s native SVG and CSS support.

Feb 20, 2024