Sumit Ningolli

@Sumitningolli·4 public vizzes

Sol LeWitt art

This example recreates Sol LeWitt-inspired geometric art using D3.js to generate a grid of horizontal and vertical SVG rectangles. The piece shows alternating full-width and full-height bands intersecting across the entire viewport, creating a woven pattern. Two SVG masks with circular cutouts are applied to these band groups, revealing the underlying shapes only within circular regions. The code constructs 100 rectangles in each direction using `d3.range` and `selectAll().join()`, with masks defined via appended `mask` elements containing `rect` and `circle` nodes.

Feb 23, 2025

Loading thumbnail…

Venn Diagram

This example displays a simple Venn diagram using two concentric circles overlaid on a larger blue circle, drawn with raw SVG elements. The larger circle serves as a backdrop, while two smaller hollow circles with white strokes create the intersection motif. The code directly instantiates `<circle>` elements within an inline SVG, using fixed numeric attributes for positioning and sizing. No JavaScript libraries or data bindings are involved; the visualization is purely declarative HTML and CSS, rendering statically without interaction or computed layout.

Feb 16, 2025

Loading thumbnail…

Bar graph chart

A static bar chart displays four colored bars with distinct heights, rendered as SVG rectangles. The red, green, yellow, and blue bars are positioned at different x-coordinates, with varying y-coordinates and heights that encode categorical data values. The chart uses raw SVG elements within an HTML document, specifying the `width`, `height`, and `viewBox` attributes on the root `<svg>` element. No JavaScript or external libraries are used; the visualization is achieved solely through declarative SVG markup.

Feb 16, 2025

Loading thumbnail…

SVG Fundamentals

This example demonstrates a collection of basic SVG shapes assembled into a stylized owl-like figure. It shows how circles, polygons, ellipses, and lines can be combined with inline CSS hover effects to create interactive graphics. The page renders entirely through raw SVG markup within an HTML document, using SVG circle, polygon, ellipse, and line elements. A hover state, controlled by a CSS class selector, reveals a hidden white circle, showcasing simple user-interaction patterns without any external libraries or data sources.

Feb 14, 2025