alexis.delacotte@gmail.com

@AlexisdlC·6 public vizzes

JavaScript Arrays

This example demonstrates a minimal HTML starter page that displays the message "Hello HTML!" in large, centered text using CSS. The page consists of a single HTML file, a JavaScript file that simply logs "hello world" to the console, and a stylesheet applying a 12em font size with text alignment. It shows a basic project structure for web development, using vanilla JavaScript, HTML, and CSS without any external libraries or frameworks.

Apr 8, 2026

Loading thumbnail…

Sol LeWitt Full Working with D3 Full Alternate

This example creates an abstract grid of horizontal and vertical black bars, generated using D3.js. The composition is layered with two SVG masks that apply geometric and symbol-based cutouts, revealing alternating patterns. The code uses D3’s `range`, `selectAll`, and `join` methods to efficiently build the grid, while `symbol` and `symbols` generate the mask paths. The result is a dynamic, self-contained visual piece that plays with positive and negative space, rendered entirely in SVG.

Apr 8, 2026

Loading thumbnail…

Sol LeWitt Full Working with D3 Full

This example generates an abstract geometric composition inspired by Sol LeWitt, combining a grid of horizontal and vertical rectangles with dynamic masking. Two SVG masks, created via D3’s `svg.call()` and the `renderMask` function, selectively reveal or hide the grid lines using distinct symbols from `d3.symbol()` and `d3.symbols`. Each mask positions these symbols across the canvas, with inverted fill patterns controlling which areas of the underlying grid become visible. The result is a layered interplay of lines and shapes that shifts based on symbol placement and mask inversion.

Apr 8, 2026

Loading thumbnail…

Sol LeWitt Full Working with D3

This example encodes a minimalist grid in the style of Sol LeWitt, using a 50 × 50 set of horizontal and vertical rectangles. The rectangles are masked by two overlapping circular threshold patterns, effectively revealing a cross-hatched composition that changes with the mask geometry. The implementation uses D3’s `select`, `range`, and `symbol` APIs to build SVG elements and path masks, with the `symbol` function generating a large circular clip path via `symbols[1]`. The rendered output is entirely vector-based, with masks defined through SVG `mask` elements and applied to both sets of rectangles.

Apr 8, 2026

Loading thumbnail…

Working with D3

This example creates a grid of horizontal and vertical stripes that are visible only through a circular aperture in the center of the canvas. Horizontal rectangles are masked by a circle of white on black, while vertical rectangles are masked by a black circle on white, revealing the underlying pattern. The code uses D3’s `select`, `range`, and `join` methods to generate the SVG rects and masks, setting widths to the full window and heights to 500 pixels.

Apr 7, 2026

Loading thumbnail…

SVG Fundamentals

This example demonstrates how SVG masks can create a circular window onto layered geometric patterns. Using the native SVG DOM API, the code constructs fifty horizontal and fifty vertical rectangles, each with vibrant default colors, and applies two different masks to control their visibility. The first mask, built from a black rectangle and white circle, reveals only the horizontal bars inside the circle, while the second mask, with inverted colors, shows the vertical bars outside the circle’s edge. The result is a clean, mask-driven interplay of striped shapes across the full browser viewport.

Apr 5, 2026