Giacomo Rossoni

@uozznezz·3 public vizzes

SVG and D3 bundling with Webpack

This example demonstrates how SVG masks can layer and intersect geometric patterns, creating a tartan-like grid of vertical and horizontal bars. The code uses D3 v3’s `select`, `range`, `symbol`, and `symbols` APIs to generate shapes, while webpack bundles the JavaScript and SVG into a single `dist/bundle.js` file. It renders 100 vertical and 100 horizontal rectangles, each filtered through two complementary masks defined with `mask` elements and `rect`/`path` primitives. The visualization highlights modular SVG composition and mask inversion for visual effects.

Mar 29, 2024

Loading thumbnail…

SVG and Javascript

This example demonstrates how SVG masks can dynamically composite shapes to create an intricate visual pattern. Two circular masks—one black and one white—are layered with alternating sets of thin rectangular stripes, generating a crosshatched grid that reveals or hides sections of the canvas. The code uses raw JavaScript DOM manipulation with `document.createElementNS` to build SVG elements dynamically, computing positions based on `window.innerWidth` and `window.innerHeight`. No external libraries are employed; the rendering relies entirely on native SVG mask and rectangle elements.

Mar 28, 2024

Loading thumbnail…

SVG scatter plot and bar chart

This example combines a pseudo scatter plot with a bar chart in a single SVG visualization. Seven vertical bars in green and yellow represent categorical data points labeled A through G, while a dark red line overlay approximates a scatter plot trend across the same categories. The visualization uses raw SVG elements including `rect`, `path`, and `text` within multiple layers, with the text styled using the Imbue font from Google Fonts. The rendering approach relies on inline SVG styling with custom stroke widths, opacities, and layer transformations to create the composite chart layout.

Mar 28, 2024