Rifat Shadman

@Rifat-Shadman·5 public vizzes

D3 Sol LeWitt Reproduction RSJ

This visually striking example reproduces a Sol LeWitt art piece using D3 v7 and SVG, generating a dynamic geometric pattern of alternating colored rectangles and symbols across the full window width. The code creates two complementary masks that filter the rectangle layers, using D3’s `scaleBand`, `range`, `symbol`, and `symbols` to position and render varied shapes. Each mask inverts its fill pattern, producing a mirrored, interlocking composition. The artwork is driven by programmatic generation rather than external data, with dimensions tied to the viewport and a fixed 120-column grid, emphasizing algorithmic design.

Nov 5, 2022

Loading thumbnail…

Fork for Sol Lewitt Rifat_Shadman

A fork of a Sol LeWitt-inspired generative drawing creates an abstract composition of vertical black and white stripes overlaid with a circular mask. The artwork shows a central circle filled with alternating horizontal and vertical bands, while the surrounding canvas displays only the vertical stripe pattern. The code builds an SVG dynamically using vanilla JavaScript DOM manipulation, creating two masks with `circle` and `rect` elements to control visibility. One hundred `rect` elements are generated for each direction, with the vertical bars referencing `url(#circle-mask-2)` to produce the layered effect within the circular region.

Nov 4, 2022

Loading thumbnail…

SVG Fundamentals

A minimalist SVG composition demonstrates basic shape primitives and text labeling. Four black rectangles of varying widths and heights are arranged in a stepped layout against a white background, with the letters A through D positioned vertically along the left margin. The example uses raw SVG elements—`rect`, `path`, and `text`—rendered directly in HTML, with styling applied via the Fira Sans font family. No JavaScript libraries or data sources are involved; the visualization serves purely as a static reference for SVG structure and coordinate placement.

Nov 2, 2022

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals forked

An animated sunrise and sunset scene rendered entirely with SVG. A radial gradient fills the sky with color that shifts from aliceblue to indigo, while a sun circle moves vertically through the frame using the SVG `<animate>` element. Two curved landscape paths use linear gradients that also animate their color stops, transitioning from aliceblue to midnightblue. The example demonstrates SVG fundamentals, including gradients, paths, and declarative animation, with all motion driven by the `attributeName` and `values` attributes.

Nov 2, 2022

Loading thumbnail…

svg fundamentals practice fork

This example demonstrates layered SVG shapes to explore symmetry and basic element composition. Red and white circles of varying radii overlap to create a central emblem-like pattern, flanked by two larger circular forms at the edges. The composition also includes rectangles with red strokes, thick white diagonal lines near the corners, and a black stroke path with a horizontal line and angled segments. The code uses the SVG API directly, setting attributes like `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` on circles, rects, lines, and a path element.

Nov 1, 2022