mkarnam.mahendra@gmail.com

@mkarnam·6 public vizzes

Fork of Sol LeWitt Reproduction with D3

This example generates an abstract geometric composition inspired by Sol LeWitt, using D3 v6 to create intersecting striped rectangles with dynamic masking. The visualization alternates horizontal and vertical bands of thin lines, with masks that switch between filled and hollow symbol shapes—including circles, diamonds, and crosses—at regular intervals. Rendering in SVG, the code uses `d3.select`, `d3.range`, `d3.scaleBand`, and `d3.symbol` to position 120 strips across the viewport and apply patterned cutouts, producing a rhythmic interplay of line, shape, and negative space.

Jun 7, 2024

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v6 with SVG rendering. It draws 100 horizontal and 100 vertical rectangles that are partially hidden by two circular masks, creating a geometric grid pattern with a circular cutout effect. The code uses `d3.select`, `d3.range`, and the `.join()` pattern to generate the rectangles, while masks are constructed with SVG `mask` elements. The visualization fills the entire browser window and is rendered entirely through SVG attributes.

Jun 7, 2024

Loading thumbnail…

Fork of Sol LeWitt Reproduction

The visualization reproduces a Sol LeWitt art piece by rendering a grid of horizontal and vertical bars that intersect around a central circular void. The SVG is built entirely with vanilla JavaScript and SVG DOM methods, using two masks to create the effect: a circle-mask that reveals only the horizontal bars within a 200-pixel radius, and a circle-mask-2 that inverts the circle to show vertical bars outside it. Each bar is a thin rectangle, with 100 horizontal strips and 100 vertical strips drawn across the full viewport. The result is a geometric composition of alternating line directions inside and outside the circular boundary.

Jun 7, 2024

Loading thumbnail…

illusions

This example presents an optical illusion using overlapping vertical bars on an SVG canvas. The visualization shows a circular aperture in the center of the screen, created by masking a set of thin rectangles. The code uses raw JavaScript and the SVG API, constructing elements like `rect` and `circle` with `createElementNS`, and employs an SVG `mask` to reveal the bars only within the circular region. The result is a dynamic composition that highlights the interplay between geometry and visual perception.

Jun 7, 2024

Loading thumbnail…

svgfundamentals

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and a complex path—rendered directly in an HTML document. The code uses vanilla SVG elements within an inline `<svg>` tag, styled with CSS for sizing. A multi-segment path illustrates a detailed icon with fill rules and opacity settings. The visualization serves as a bare-minimum HTML starter, showcasing how SVG primitives compose static graphics without any JavaScript libraries or React integration, despite being categorized under that framework.

Jun 7, 2024

Loading thumbnail…

svgfundamentals

This example demonstrates how to build interactive visualizations from the ground up using SVG fundamentals. It shows the process of creating and manipulating basic SVG shapes, with code examples for rendering circles, rectangles, and paths. The implementation relies on the SVG API for drawing primitives and uses JavaScript DOM methods to dynamically generate elements. The example serves as a self-contained reference, with the source code contained in a single `index.js` file that outputs a blank HTML document as its starting point.

Jun 7, 2024