ddG12g

@ddG12g·5 public vizzes

3_Sol LeWitt Reproduction

This piece reproduces a Sol LeWitt wall drawing using JavaScript and dynamically generated SVG. It renders a full-screen series of horizontal black bars, evenly spaced, which are then clipped by a mask containing a single white rectangle and a central black circle. The resulting composition shows the striped pattern visible only outside the circular cutout, creating an inverted hole of solid white space. The work uses the standard SVG `mask` element and procedural creation of `rect` nodes through the Document API.

Sep 12, 2023

Loading thumbnail…

4_Sol LeWitt Reproduction with D3

This piece uses D3.js within an SVG framework to create a geometric composition inspired by Sol LeWitt. It displays a central circular window formed by two overlapping masks—one creating a circular hole, the other creating a surrounding ring—through which horizontal and vertical striped rectangles pass. The artwork is generated procedurally by creating a mask element with a circle, applying it to a series of rect elements, then repeating the process with inverted colors for a second layered set of lines. The D3 import is present but unused; all shapes are built via direct SVG DOM manipulation.

Sep 12, 2023

Loading thumbnail…

Wall Drawing #368

An interactive web reproduction of Sol LeWitt's Wall Drawing #368. The page renders a grid of thin, dark rectangles that are rotated at a fixed 45-degree angle and positioned to span the entire viewport. The algorithm calculates the screen diagonal to determine the number of bars needed to cover the canvas fully. Using raw SVG elements created via the DOM API, the code dynamically generates and styles each rectangle based on the browser's current dimensions.

Sep 11, 2023

Loading thumbnail…

2_psuedo visualizations - venn diagram

A Venn diagram rendered as a single SVG displays two overlapping blue circles on a white background, with a thin black border around the canvas and a title label above. The primary circle is filled with a light blue color and smoothly transitions to a darker blue on hover via a CSS `transition` on the `#blueCircle` element. Two smaller, unfilled circles outlined in white are positioned over the main circle to suggest intersection regions, though no data values or set labels are encoded. The example uses raw SVG elements (`circle`, `rect`, `text`) with no external JavaScript libraries, and its source is credited to the DataViz Catalogue.

Sep 9, 2023

Loading thumbnail…

1_SVG_Fundamentals_Sunrise_Sunset

This animation demonstrates a stylized sunrise and sunset cycle over a two-layer mountain landscape. An SVG `circle` for the sun moves vertically while a `radialGradient` sky background and `linearGradient` landmasses, defined using `stop` elements, synchronize their color shifts through SVG’s `<animate>` tag. The landscape is constructed with cubic and quadratic Bézier curves using the `path` element’s `d` attribute, and the code relies entirely on native SVG and SMIL animation.

Sep 9, 2023